/* RE:VIEW MultiTrack — 多軌時間軸樣式。所有 class 皆 mt- 前綴；顏色讀宿主頁的 CSS 變數並附預設值。 */

.mt-root {
  --mt-bg: var(--bg, #0e0f13);
  --mt-panel: var(--panel, #16181f);
  --mt-panel2: var(--panel-2, #1d2029);
  --mt-line: var(--line, #2a2e3a);
  --mt-txt: var(--txt, #e7e9ee);
  --mt-dim: var(--txt-dim, #9aa0b0);
  --mt-faint: var(--txt-faint, #8a91a1);   /* 文字用；4.5:1 以上。小字一律用 --mt-dim，裝飾線才用 faint */
  --mt-accent: var(--accent, #5b8cff);
  --mt-good: var(--good, #3ecf8e);
  --mt-warn: var(--warn, #ff6b6b);
  --mt-note: var(--note, #ffb84d);
  --mt-mono: var(--mono, "SF Mono", ui-monospace, Menlo, monospace);
  --mt-sans: var(--sans, -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif);
  --mt-lane: color-mix(in srgb, var(--mt-bg) 72%, var(--mt-panel));
  --mt-rc: #ff6b81;          /* 選段／範圍的主色 */
  --mt-gw: 128px;            /* 左側軌名欄寬 */
  --mt-ovh: 22px;            /* 總覽條高（矮 dock 收掉總覽條時＝0，「還有 N 軌」的定位要跟著） */

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--mt-panel);
  color: var(--mt-txt);
  font: 12px/1.35 var(--mt-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  border-top: 1px solid var(--mt-line);
  outline: none;
}
.mt-root *, .mt-root *::before, .mt-root *::after { box-sizing: border-box; }
.mt-root:focus-visible { outline: none; }
/* round 5：根元素的焦點環＝實心 2px 主色（對面板底 ≥ 3:1），畫在內側（元件外面常有 overflow:hidden 的 dock），用疊在最上層的偽元素畫——
   標頭（z-index 8）與捲動區的子元素不會蓋掉它；pointer-events:none 不擋操作 */
.mt-root:focus-visible::after {
  content: ""; position: absolute; z-index: 20; inset: 0; pointer-events: none;
  border: 2px solid var(--mt-accent); border-radius: 2px;
}
.mt-root.mt-n1 { --mt-gw: 108px; }
.mt-root.mt-n2 { --mt-gw: 84px; }
.mt-root.mt-collapsed .mt-body { display: none; }
.mt-root.mt-noovw { --mt-ovh: 0px; }
.mt-root.mt-noovw .mt-ovw { display: none; }      /* 矮 dock（≤ 200px 且放不下）：收掉總覽條，22px 還給軌道（JS 的 _evalCompact 決定） */
.mt-root.mt-collapsed .mt-collapse svg { transform: rotate(180deg); }

/* ───────── 標頭 ───────── */
.mt-head {
  position: relative; z-index: 8; flex: none;
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 6px 0 12px;
  background: var(--mt-panel);
  border-bottom: 1px solid var(--mt-line);
  white-space: nowrap;
}
.mt-collapsed .mt-head { border-bottom: 0; }
.mt-head { overflow-x: clip; }              /* 觸控擴張點擊範圍（偽元素）不准把標頭／頁面撐出橫向捲動 */
.mt-head > * { flex: none; }              /* 標頭項目一律不縮：放不下時 JS 量得到溢出，逐級收掉次要項目（.mt-d1…d6，見 multitrack.js） */
.mt-spacer { flex: 1 1 0; min-width: 0; }
.mt-clock {
  display: flex; align-items: baseline; gap: 6px; min-width: 118px;
  font: 500 12px/1 var(--mt-mono); font-variant-numeric: tabular-nums;
}
.mt-cur b { font-weight: 600; font-size: 15px; color: var(--mt-txt); letter-spacing: -0.01em; }
.mt-cur i { font-style: normal; color: var(--mt-dim); font-size: 12px; }
.mt-sep, .mt-dur { color: var(--mt-dim); }

.mt-btn, .mt-ib {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--mt-dim);
  font: 500 12px/1 var(--mt-sans); height: 28px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color .12s, color .12s, box-shadow .12s, transform .12s;
}
.mt-btn { padding: 0 9px; }
.mt-ib { width: 28px; padding: 0; }
.mt-btn:hover, .mt-ib:hover { background: color-mix(in srgb, var(--mt-txt) 8%, transparent); color: var(--mt-txt); }
.mt-btn:active, .mt-ib:active { transform: scale(.96); }
.mt-btn:focus-visible, .mt-ib:focus-visible, .mt-zs:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 1px; }
.mt-btn svg, .mt-ib svg { flex: none; transition: transform .18s; }
.mt-kbd {
  font: 600 12px/1 var(--mt-mono); color: var(--mt-dim); padding: 3px 4px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--mt-line); background: transparent;
}

.mt-seg {
  display: flex; padding: 2px; gap: 2px; border-radius: 8px;
  background: color-mix(in srgb, var(--mt-bg) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--mt-line);
}
.mt-seg .mt-btn { height: 24px; }
.mt-seg .mt-btn[aria-pressed="true"] {
  background: var(--mt-panel2); color: var(--mt-txt);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--mt-line);
}
.mt-seg .mt-btn[aria-pressed="true"] svg { color: var(--mt-accent); }
.mt-snapbtn[aria-pressed="true"] { color: var(--mt-txt); }
.mt-snapbtn[aria-pressed="true"] svg { color: var(--mt-accent); }
.mt-snapbtn[aria-pressed="false"] { color: var(--mt-dim); }   /* 關閉態不再疊 opacity（4.37:1）：靠文字色（dim）、圖示不上色、斜角圖示區分開／關 */
.mt-snapbtn[aria-pressed="false"] svg { transform: rotate(-30deg); }
.mt-nosnap .mt-snapbtn { display: none; }                  /* 沒有文字軌＝沒有句子可吸附：隱藏吸附／貼齊句子 */

/* 入／出點 */
.mt-pend { display: flex; align-items: center; gap: 2px; margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--mt-line); }
.mt-pb { height: 28px; padding: 0 8px; gap: 5px; box-shadow: inset 0 0 0 1px var(--mt-line); }     /* round 6：和吸附／縮放／全覽同高（28px），標頭按鈕高度一致 */
.mt-pb em { font: 600 12px/1 var(--mt-mono); font-style: normal; font-variant-numeric: tabular-nums; }
.mt-pb em:empty { display: none; }
.mt-pb.mt-snp em::before {                /* 入／出點已吸附到句子邊界：和刻度尺上的吸附標記同一個菱形 */
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; vertical-align: 1px; background: var(--mt-accent); transform: rotate(45deg);
}
.mt-pb.mt-set { color: var(--mt-rc); background: color-mix(in srgb, var(--mt-rc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-rc) 50%, transparent); }
.mt-pb.mt-set .mt-kbd { display: none; }
.mt-pgo, .mt-pclr { display: none; }
.mt-has .mt-pgo { display: inline-flex; background: var(--mt-rc); color: #1d0a10; box-shadow: none; font-weight: 700; animation: mt-pop .22s cubic-bezier(.2, .9, .3, 1.3); }
.mt-has .mt-pgo:hover { background: color-mix(in srgb, var(--mt-rc) 85%, #fff); color: #1d0a10; }
.mt-has .mt-pgo .mt-kbd { color: color-mix(in srgb, #1d0a10 90%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #1d0a10 35%, transparent); }
.mt-has .mt-pclr { display: inline-flex; width: 24px; height: 24px; font-size: 15px; }       /* round 6：24×24（WCAG 2.5.8 最小目標） */
.mt-shake { animation: mt-shake .32s; }
/* round 7：只設了一端（還沒設終點）時，下一步「設另一端」才是主角，「建立」退成次要（外框）——不再誘導使用者按到「範圍太短」 */
.mt-has:not(.mt-both) .mt-pgo { background: transparent; color: var(--mt-rc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-rc) 50%, transparent); }
.mt-has:not(.mt-both) .mt-pgo:hover { background: color-mix(in srgb, var(--mt-rc) 14%, transparent); color: var(--mt-rc); }
.mt-has:not(.mt-both) .mt-pgo .mt-kbd { color: var(--mt-rc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-rc) 40%, transparent); }
.mt-has:not(.mt-both) .mt-pin:not(.mt-set), .mt-has:not(.mt-both) .mt-pout:not(.mt-set) { color: var(--mt-txt); box-shadow: inset 0 0 0 1.5px var(--mt-rc); }

/* 起訖點專用列（round 4）：窄螢幕（根寬 < 600px，JS 加 .mt-pbar-on）設起訖點到一半時整個標頭換成它：
   「起點 4:11｜設終點｜建立｜✕」→「4:11–4:20（9.2 秒）｜建立｜✕」。不自動收起；觸控時每個按鈕 ≥ 44px 高 */
.mt-pbar { display: none; align-items: center; gap: 8px; min-width: 0; height: 100%; }
.mt-head > .mt-pbar { flex: 1 1 auto; }
.mt-pbar-on .mt-head > .mt-pbar { display: flex; animation: mt-fadein .16s ease-out both; }
.mt-pbar-on .mt-head > :not(.mt-pbar) { display: none !important; }
.mt-pbar-t {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 14px/1 var(--mt-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--mt-rc);
}
.mt-pbar-b {
  appearance: none; -webkit-appearance: none; flex: none; border: 0; height: 32px; min-width: 44px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 13px/1 var(--mt-sans); white-space: nowrap; color: var(--mt-txt);
  transition: background-color .12s, filter .12s, transform .12s;
}
.mt-pbar-b[hidden] { display: none; }
.mt-pbar-b:active { transform: scale(.96); }
.mt-pbar-b:focus-visible { outline: 2px solid var(--mt-txt); outline-offset: 2px; }
.mt-pbar-set { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mt-rc) 65%, transparent); }
.mt-pbar-set:hover { background: color-mix(in srgb, var(--mt-rc) 14%, transparent); }
.mt-pbar-go { background: var(--mt-rc); color: #1d0a10; }
.mt-pbar-go:hover { filter: brightness(1.1); }
/* round 7：只設了一端時，「設另一端」是主按鈕（實心）、「建立」退成外框；兩端都設好（.mt-both）才反過來 */
.mt-pbar:not(.mt-both) .mt-pbar-go { background: transparent; color: var(--mt-rc); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mt-rc) 50%, transparent); }
.mt-pbar:not(.mt-both) .mt-pbar-go:hover { background: color-mix(in srgb, var(--mt-rc) 14%, transparent); filter: none; }
.mt-pbar:not(.mt-both) .mt-pbar-set { background: var(--mt-rc); color: #1d0a10; box-shadow: none; }
.mt-pbar:not(.mt-both) .mt-pbar-set:hover { background: var(--mt-rc); filter: brightness(1.1); }
.mt-pbar-x { padding: 0; width: 44px; background: transparent; color: var(--mt-dim); }
.mt-pbar-x:hover { background: color-mix(in srgb, var(--mt-txt) 10%, transparent); color: var(--mt-txt); }

/* 縮放 */
.mt-zoom { display: flex; align-items: center; gap: 2px; }
.mt-zs {
  -webkit-appearance: none; appearance: none; width: 92px; height: 24px; margin: 0 2px; background: transparent; cursor: pointer; --p: 0%;
}
.mt-zs::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--mt-accent) var(--p), var(--mt-line) var(--p)); }
.mt-zs::-moz-range-track { height: 3px; border-radius: 2px; background: var(--mt-line); }
.mt-zs::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--mt-accent); }
.mt-zs::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%;
  background: var(--mt-txt); border: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-panel) 70%, transparent), 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform .12s;
}
.mt-zs::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--mt-txt); border: 0; }
.mt-zs:hover::-webkit-slider-thumb, .mt-zs:active::-webkit-slider-thumb { transform: scale(1.18); }
.mt-fitbtn.mt-on { color: var(--mt-txt); }
.mt-fitbtn.mt-on svg { color: var(--mt-accent); }
.mt-keysb { margin-left: 2px; }                                  /* round 6：鍵盤快捷鍵說明（⌨）；窄於 640px 與縮放區一起收掉（見 .mt-n2、.mt-d2） */
.mt-keysb[aria-expanded="true"] { background: color-mix(in srgb, var(--mt-txt) 12%, transparent); color: var(--mt-txt); }
.mt-n2 .mt-keysb { display: none; }
.mt-nokeys .mt-kbd { display: none; }                            /* 單鍵快捷鍵關閉：按鈕上的鍵位提示（V／R／S／I／O／↵）一併拿掉 */
.mt-head > .mt-extra { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.mt-head > .mt-extra:empty { display: none; }
.mt-collapse svg { transition: transform .2s; }

/* 用語 pro：窄於 n1Width（預設 960）收掉按鈕文字與鍵盤提示；plain：沒有鍵盤提示，按鈕文字留到 < 640px */
.mt-plain .mt-kbd { display: none; }
.mt-n1 .mt-kbd, .mt-n1 .mt-pb .mt-pl + em { display: none; }
.mt-n1 .mt-pend .mt-kbd { display: none; }
.mt-pro.mt-n1 .mt-lbl { display: none; }
.mt-plain.mt-n2 .mt-lbl { display: none; }
.mt-n1 .mt-btn { padding: 0 8px; }
.mt-n1 .mt-zs { width: 72px; }
.mt-n1 .mt-clock { min-width: 108px; }
.mt-n2 .mt-zs, .mt-n2 .mt-fitbtn { display: none; }
.mt-n2 .mt-clock { min-width: 0; }
.mt-n2 .mt-clock .mt-sep, .mt-n2 .mt-clock .mt-dur, .mt-n2 .mt-cur i { display: none; }
.mt-n3 .mt-zoom .mt-ib { display: none; }
.mt-n2 .mt-head { gap: 6px; padding-left: 8px; }
.mt-n2 .mt-pend { padding-left: 4px; }
.mt-n2 .mt-btn { padding: 0 7px; }
.mt-n2 .mt-seg .mt-btn { padding: 0 8px; }
.mt-n2 .mt-ib { width: 26px; }
.mt-n2 .mt-pb em { display: none; }

/* 標頭退讓（JS 量測溢出後逐級加 .mt-d1…d6；窄版入／出點設定中一開始就是 .mt-np ＋ d1–d3）。
   順序：鍵盤提示／滑桿／入出點時間 → 縮放區 → 附加區收進「⋯」→ 按鈕文字 → 吸附 → 工具 */
.mt-d1 .mt-kbd, .mt-d1 .mt-zs, .mt-d1 .mt-pb em, .mt-d1 .mt-clock .mt-sep, .mt-d1 .mt-clock .mt-dur { display: none; }
.mt-d2 .mt-zoom { display: none; }
.mt-ovfb { display: none; }
.mt-d3 .mt-head > .mt-extra { display: none; }
.mt-d3 .mt-ovfb { display: inline-flex; }
.mt-ovfb[aria-expanded="true"] { background: color-mix(in srgb, var(--mt-txt) 12%, transparent); color: var(--mt-txt); }
.mt-d3.mt-ovf-open .mt-head > .mt-extra {          /* 附加區（宿主放的按鈕）在彈層裡，不佔標頭版面 */
  display: flex; position: absolute; z-index: 30; top: calc(100% + 4px); right: 6px; max-width: calc(100% - 12px);
  flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 8px; border-radius: 12px;
  background: var(--mt-panel2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mt-txt) 16%, var(--mt-line)), 0 14px 34px rgba(0, 0, 0, .55);
}
.mt-d4 .mt-lbl { display: none; }
.mt-d5 .mt-snapbtn { display: none; }
.mt-d6 .mt-seg { display: none; }
.mt-np .mt-zr { visibility: hidden; }              /* 「可見 …」時間標示：設起訖點時用不到 */

/* 收合時的單行提示（setHint／setHintCollapsed）；根寬 < 640px 由宿主依 onHintChange 自己畫 */
.mt-hl { display: none; flex: 0 1 auto; min-width: 0; align-items: center; gap: 8px; height: 28px; padding: 0 4px 0 9px; border-radius: 8px;
  color: var(--mt-txt); font: 500 12px/1 var(--mt-sans);
  background: color-mix(in srgb, var(--mt-rc) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-rc) 32%, transparent); }
.mt-hl:not([hidden]) { display: flex; }
.mt-n2 .mt-hl { display: none; }
.mt-hl-i { display: grid; place-items: center; flex: none; color: var(--mt-rc); }
.mt-hl-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-hl-x {
  appearance: none; -webkit-appearance: none; flex: none; border: 0; height: 22px; padding: 0 9px; border-radius: 6px; cursor: pointer;
  font: 700 12px/1 var(--mt-sans); background: var(--mt-rc); color: #1d0a10; white-space: nowrap; transition: filter .12s, transform .12s;
}
.mt-hl-x:hover { filter: brightness(1.1); }
.mt-hl-x:active { transform: scale(.96); }
.mt-hl-x:focus-visible { outline: 2px solid var(--mt-txt); outline-offset: 2px; }
.mt-hl.mt-in { animation: mt-fadein .28s ease-out both; }
.mt-hl.mt-out { animation: mt-fadeout .16s ease-in both; }

/* ───────── 本體：捲動區 ───────── */
.mt-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.mt-scroll {
  flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; overflow: auto; background: var(--mt-lane);
  overscroll-behavior-x: contain; scrollbar-width: none; scrollbar-color: color-mix(in srgb, var(--mt-txt) 22%, transparent) transparent;
  touch-action: pan-x pan-y; contain: layout paint;
}
.mt-vs .mt-scroll { scrollbar-width: thin; }
.mt-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.mt-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--mt-txt) 20%, transparent); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
.mt-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--mt-txt) 36%, transparent); }
.mt-scroll::-webkit-scrollbar-corner { background: transparent; }
.mt-sizer { position: relative; min-width: 100%; }

/* 刻度尺列（上方黏住） */
.mt-rrow {
  position: sticky; top: 0; z-index: 7; display: flex; height: 24px;
  background: var(--mt-panel); border-bottom: 1px solid var(--mt-line);
  transition: box-shadow .18s;
}
.mt-vscrolled .mt-rrow { box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .55); }   /* 軌道往上捲出去了：刻度尺下緣的陰影 */
.mt-corner {
  position: sticky; left: 0; z-index: 7; flex: 0 0 var(--mt-gw); width: var(--mt-gw); min-width: 0; max-width: var(--mt-gw); height: 100%; overflow: hidden;
  background: var(--mt-panel); border-right: 1px solid var(--mt-line);
}
.mt-ruler { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; touch-action: none; cursor: default; }
.mt-rc { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
.mt-root.mt-scrubbing .mt-ruler, .mt-root.mt-scrubbing .mt-scroll { cursor: ew-resize; }

/* 軌道列 */
.mt-rows { position: relative; background: var(--mt-lane); }
.mt-row {
  position: relative; display: flex; height: var(--mt-h, 36px);
  border-bottom: 1px solid color-mix(in srgb, var(--mt-line) 70%, transparent);
}
/* 軌名欄：寬度固定（不管標籤多長都一樣寬，否則該列的塊會和刻度尺／播放頭錯位），文字在欄內截斷 */
.mt-gl {
  position: sticky; left: 0; z-index: 3; flex: 0 0 var(--mt-gw); width: var(--mt-gw); min-width: 0; max-width: var(--mt-gw);
  display: flex; align-items: center; gap: 8px; overflow: hidden;
  padding: 0 8px 0 12px; background: var(--mt-panel); border-right: 1px solid var(--mt-line);
}
/* 水平捲動時，軌名欄右側的陰影：另立一個寬 0 的黏性元素，不被軌名欄的 overflow 裁掉 */
.mt-gsh { position: sticky; left: var(--mt-gw); z-index: 3; flex: 0 0 0; width: 0; pointer-events: none; }
.mt-gsh::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .34), transparent); opacity: 0; transition: opacity .18s;
}
.mt-scrolled .mt-gsh::after { opacity: 1; }
.mt-zr {
  position: absolute; left: 12px; right: 6px; top: 0; font: 600 12px/23px var(--mt-mono); font-variant-numeric: tabular-nums;
  color: var(--mt-dim); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-row { animation: mt-rowin .4s ease-out both; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }
.mt-playing .mt-ph { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), 0 0 10px color-mix(in srgb, var(--mt-txt) 35%, transparent); }
.mt-gd { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mt-c, var(--mt-dim)); transition: box-shadow .18s, transform .18s; }
.mt-live .mt-lane { background: color-mix(in srgb, var(--mt-c) 5%, transparent); }
.mt-lane { transition: background-color .25s; }
.mt-live .mt-gd { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-c) 30%, transparent); transform: scale(1.1); }
.mt-gt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.mt-gt b { font-weight: 600; font-size: 12.5px; color: var(--mt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-gt small { font-size: 12px; color: var(--mt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }   /* 軌名欄：標題＋副標，各一行、超出用 …；副標 ≥ 12px */
.mt-pri .mt-gt b { color: var(--mt-txt); font-size: 13px; }
.mt-compact .mt-gt small { display: none; }                  /* 精簡版面的文字軌只有 28–30px 高，放不下兩行 12px：只留標題（完整標籤在 title） */
.mt-n2 .mt-gt small { display: none; }
.mt-n2 .mt-gl { padding: 0 6px 0 9px; gap: 6px; }
.mt-live .mt-gt b { color: var(--mt-txt); }
.mt-lane { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; contain: layout paint style; }

.mt-gridw { position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--mt-gw); right: 0; overflow: hidden; pointer-events: none; }
.mt-grid { position: absolute; top: 0; left: 0; width: 0; height: 0; }

/* 選段、意見兩軌黏在捲動區底部：時間軸被壓矮、軌道溢出時，這兩條永遠看得到；
   其餘的軌在它們「上面」那一段自己捲動（捲過去的內容被一條清楚的分隔線＋陰影截斷，不會蓋住黏底的軌，黏底的軌也不會蓋住沒捲到的軌的內容——要看就捲）。 */
.mt-stk { position: sticky; bottom: 0; z-index: 4; background: var(--mt-lane); }
.mt-stk::before {                       /* 內容從它下面捲過去時，頂緣的陰影 */
  content: ""; position: absolute; z-index: 5; left: 0; right: 0; bottom: 100%; height: 20px; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent); opacity: 0; transition: opacity .2s;
}
.mt-stuck .mt-stk::before { opacity: 1; }
.mt-stk::after {                        /* 黏住時，群組頂緣的分隔線（沒黏住時上一軌的底線就是它） */
  content: ""; position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: color-mix(in srgb, var(--mt-txt) 46%, var(--mt-line)); opacity: 0; transition: opacity .2s;   /* round 5：分隔線 1px → 2px、更亮：上面的軌在這條線之上捲動，線以下是固定的選段／意見 */
}
.mt-stuck .mt-stk::after { opacity: 1; }
/* 「還有 N 軌」：貼在捲動區的右下角（黏底群組頂緣上方、垂直捲軸左邊），不碰軌名欄 */
.mt-more {
  position: absolute; z-index: 9; right: calc(12px + var(--mt-sbw, 0px)); bottom: calc(var(--mt-ovh, 22px) + var(--mt-sbh, 0px) + var(--mt-stk-h, 0px) + 8px);
  display: none; align-items: center; gap: 5px; height: 22px; padding: 0 10px 0 8px; border: 0; border-radius: 11px; cursor: pointer;
  font: 600 12px/1 var(--mt-sans); color: var(--mt-txt); letter-spacing: .01em;
  background: color-mix(in srgb, var(--mt-panel2) 94%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-txt) 22%, var(--mt-line)), 0 4px 14px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: mt-nudge 2.4s ease-in-out 1.2s 2;
}
.mt-more.mt-show { display: inline-flex; }
.mt-more svg { flex: none; color: var(--mt-accent); }
.mt-more:hover { background: color-mix(in srgb, var(--mt-txt) 14%, var(--mt-panel2)); }
.mt-more:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 1px; }

/* ───────── 波形 ───────── */
.mt-wv { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
.mt-un { /* 尚未播放的部分，罩一層半透明的軌道底色（已播放 = 原亮度，未播放 ≈ 5 成） */
  position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background: color-mix(in srgb, var(--mt-lane) 52%, transparent);
}

/* ───────── 文字塊（講者軌） ───────── */
/* 三級細節（由 JS 依縮放決定）：句子塊（>6 px/s）／說話段塊（<6 px/s，連續同講者、間隔 ≤2 秒的句子併成一塊，.mt-tn）。
   窄於 40px 的塊不畫左側色條、改用整塊實色調，避免一排「條碼」；相鄰塊之間留 1px 縫（寬度少 1px），不用邊框。 */
.mt-tb {
  position: absolute; top: 4px; height: var(--mt-bh, 27px); line-height: var(--mt-bh, 27px);
  padding: 0 6px 0 8px; border-radius: 2px 5px 5px 2px; cursor: pointer;
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--mt-txt) 62%, var(--mt-dim));   /* round 7：講者軌文字對任何講者色塊（含亮起、懸停）≥ 4.5:1（舊：--mt-dim 對藍／青塊 4.0–4.4:1） */
  background: color-mix(in srgb, var(--mt-c) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--mt-c);
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.mt-tb.mt-tn { background: color-mix(in srgb, var(--mt-c) 19%, transparent); }
.mt-tb:hover { background: color-mix(in srgb, var(--mt-c) 26%, transparent); color: var(--mt-txt); }
.mt-tb.mt-on {
  z-index: 1; background: color-mix(in srgb, var(--mt-c) 38%, transparent); color: var(--mt-txt);
  box-shadow: inset 2px 0 0 var(--mt-c), inset 0 0 0 1px color-mix(in srgb, var(--mt-c) 55%, transparent);
}
.mt-tb.mt-nr { padding: 0; border-radius: 2px; background: color-mix(in srgb, var(--mt-c) 34%, transparent); box-shadow: none; }
.mt-tb.mt-nr:hover { background: color-mix(in srgb, var(--mt-c) 52%, transparent); }
.mt-tb.mt-nr.mt-on { background: color-mix(in srgb, var(--mt-c) 88%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mt-c) 60%, #fff); }
/* 附和（dim）：round 7 起不再整塊疊 opacity .5（文字對比只剩 2.4:1）——只把色塊與色條淡下去，字維持 ≥ 4.5:1 */
.mt-tb.mt-dim { background: color-mix(in srgb, var(--mt-c) 7%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--mt-c) 42%, transparent); color: color-mix(in srgb, var(--mt-txt) 30%, var(--mt-dim)); }
.mt-tb.mt-dim.mt-tn { background: color-mix(in srgb, var(--mt-c) 9%, transparent); }
.mt-tb.mt-dim.mt-nr { background: color-mix(in srgb, var(--mt-c) 16%, transparent); box-shadow: none; }
.mt-tb.mt-dim:hover { background: color-mix(in srgb, var(--mt-c) 22%, transparent); color: var(--mt-txt); }
.mt-tb.mt-dim.mt-nr:hover { background: color-mix(in srgb, var(--mt-c) 34%, transparent); }
.mt-tb.mt-dim.mt-on { background: color-mix(in srgb, var(--mt-c) 38%, transparent); color: var(--mt-txt); box-shadow: inset 2px 0 0 var(--mt-c), inset 0 0 0 1px color-mix(in srgb, var(--mt-c) 55%, transparent); }
.mt-tb.mt-dim.mt-nr.mt-on { background: color-mix(in srgb, var(--mt-c) 88%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mt-c) 60%, #fff); }
/* round 7：塞不下字的窄塊，首句溢出到右邊的空檔（疊在塊上方、不吃指標；顏色同塊內文字，對比 ≥ 4.5:1） */
/* round 8（r7 [26]）：溢出的首句是塊自己的子節點（JS 設 width；塊同時設 overflow: visible），字色／字級／行高都繼承塊——一般、附和（dim）、亮起、懸停自動一致 */
.mt-tl {
  position: absolute; left: 0; top: 0; height: 100%; padding: 0 6px 0 8px; pointer-events: none;
  font: inherit; line-height: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit;
}
.mt-tb.mt-em::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #ff6b81; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mt-lane) 80%, transparent); }

/* ───────── 推薦金句 ───────── */
.mt-bd {
  position: absolute; top: 3px; bottom: 3px; border-radius: 3px; cursor: pointer; overflow: hidden;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mt-c) 34%, transparent) 0 4px, color-mix(in srgb, var(--mt-c) 15%, transparent) 4px 8px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-c) 55%, transparent);
  transition: filter .12s;
}
.mt-bd:hover { filter: brightness(1.25); }
.mt-bd span {
  position: absolute; left: 3px; top: 2px; max-width: calc(100% - 6px); padding: 0 5px; border-radius: 2px; height: 14px; line-height: 14px;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--mt-c) 38%, #fff); background: color-mix(in srgb, var(--mt-bg) 62%, transparent);
}

/* ───────── 選段 ───────── */
.mt-l-ranges { cursor: crosshair; }
.mt-hint {
  position: sticky; left: calc(var(--mt-gw) + 14px); display: inline-block; margin-top: 15px; font-size: 12px; color: var(--mt-dim);
  pointer-events: none; white-space: nowrap; letter-spacing: .02em;
}
.mt-compact .mt-hint { margin-top: 11px; }
.mt-coach-lane .mt-hint { display: none; }          /* 空軌裡改顯示靠右的首次使用提示（.mt-ch） */
.mt-hint::before { content: ""; display: inline-block; width: 18px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: 2px; border: 1px dashed color-mix(in srgb, var(--mt-rc) 60%, transparent); }
.mt-rg {
  position: absolute; border-radius: 5px; cursor: grab;
  background: color-mix(in srgb, var(--mt-c) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-c) 60%, transparent);
  color: color-mix(in srgb, var(--mt-c) 40%, #fff);
  transition: background-color .14s, box-shadow .14s;
  outline: none;
  /* round 8（r7 [24]）：疊放順序——選取中 4 ＞ 自己的（可編輯）2 ＞ 別人的（唯讀）1，同級時起點較晚的在上（JS 設 --zq＝在這條軌上的順位）。聚焦（:focus-visible）5 最高。
     4 段以上重疊時，自己的選段不會被別人的蓋住；被蓋住的那一段，標籤在 JS 判定被壓到時整個隱藏（.mt-cv，見 _rRanges），不會兩段的字疊成一團 */
  --zb: 2; z-index: calc(var(--zb) * 100 + var(--zq, 0));
}
.mt-rg.mt-ro { --zb: 1; }
.mt-rg:hover { background: color-mix(in srgb, var(--mt-c) 34%, transparent); }
.mt-rg.mt-sel {
  --zb: 4; background: color-mix(in srgb, var(--mt-c) 42%, transparent);
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 3px color-mix(in srgb, var(--mt-c) 28%, transparent), 0 4px 14px rgba(0, 0, 0, .35);
}
.mt-rg:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 1px; --zb: 5; }     /* 偏移 1px：軌道有 paint containment，再往外會被底邊裁成 1px */
.mt-rg.mt-cv .mt-rgh, .mt-rg.mt-cv .mt-rgs, .mt-rg.mt-cv .mt-rge { visibility: hidden; }
.mt-rg.mt-drg { cursor: grabbing; background: color-mix(in srgb, var(--mt-c) 50%, transparent); }
.mt-rg.mt-oth { background: color-mix(in srgb, var(--mt-c) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-c) 38%, transparent); color: var(--mt-dim); }
.mt-rg.mt-oth:hover { background: color-mix(in srgb, var(--mt-c) 22%, transparent); }
.mt-rg.mt-oth.mt-sel {
  background: color-mix(in srgb, var(--mt-c) 30%, transparent); color: var(--mt-txt);
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 3px color-mix(in srgb, var(--mt-c) 24%, transparent), 0 4px 14px rgba(0, 0, 0, .35);
}
.mt-rg.mt-ro { cursor: crosshair; background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, .07) 5px 10px); }
.mt-rg.mt-ghost { background: color-mix(in srgb, var(--mt-c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-c) 50%, transparent); border: 1px dashed color-mix(in srgb, var(--mt-c) 80%, transparent); animation: mt-pulse 1s ease-in-out infinite; pointer-events: none; }
.mt-rg.mt-saving { animation: mt-pulse 1s ease-in-out infinite; }
/* 重疊：較晚開始的那一段＝琥珀色斜紋＋右上角折角＋「重疊」標籤（匯出時會合併成一段，見 TLExport merge） */
.mt-rg.mt-ovl { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--mt-note) 24%, transparent) 5px 10px); }
.mt-rg.mt-ovl:not(.mt-sel) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-note) 78%, var(--mt-c)); }
.mt-rg.mt-ovl::after {                     /* 右上角折角：寬度不超過區塊本身（極窄的區塊不會長出比自己還大的三角） */
  content: ""; position: absolute; right: 0; top: 0; width: min(12px, 100%); height: 12px; pointer-events: none; border-top-right-radius: 5px;
  background: linear-gradient(225deg, var(--mt-note) 0 50%, transparent 50%);
}
.mt-ovt {
  flex: none; height: 14px; padding: 0 5px; border-radius: 7px; font: 700 12px/14px var(--mt-sans); letter-spacing: .02em; white-space: nowrap;
  background: var(--mt-note); color: #2a1700;
}
.mt-dgh {
  background: color-mix(in srgb, var(--mt-c) 36%, transparent); box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 3px color-mix(in srgb, var(--mt-c) 24%, transparent);
  z-index: 900; pointer-events: none; cursor: crosshair;
}
/* round 8（r7 [24]）：超過 3 列的重疊——最後一列的「+N」小標（N＝沒有自己那一列的選段數），點一下輪流選取疊在一起的選段 */
.mt-xb {
  position: absolute; z-index: 1000; height: 16px; min-width: 28px; padding: 0 7px; border: 0; border-radius: 8px; cursor: pointer; touch-action: manipulation;
  font: 700 12px/16px var(--mt-sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
  background: var(--mt-note); color: #2a1700; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mt-lane) 80%, transparent), 0 2px 6px rgba(0, 0, 0, .35);
  transition: filter .12s, transform .12s;
}
.mt-xb:hover { filter: brightness(1.1); }
.mt-xb:active { transform: scale(.94); }
.mt-l-ranges:focus { outline: none; }
.mt-l-ranges:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: -2px; border-radius: 6px; }       /* 「知道了」按下後焦點回到選段軌（空軌時），要看得見 */
.mt-pop { animation: mt-pop .26s cubic-bezier(.2, .9, .3, 1.25); }
.mt-rgh { position: absolute; left: 7px; right: 7px; top: 5px; display: flex; align-items: center; gap: 6px; min-width: 0; pointer-events: none; }
.mt-rgt { flex: 0 1 auto; min-width: 0; font: 700 12px/14px var(--mt-sans); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chip {
  flex: none; max-width: 90px; height: 14px; padding: 0 5px; border-radius: 7px; font: 600 12px/14px var(--mt-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: color-mix(in srgb, var(--mt-txt) 14%, transparent); color: var(--mt-txt);
}
.mt-rgs, .mt-rge { position: absolute; bottom: 4px; font: 600 12px/1 var(--mt-mono); font-variant-numeric: tabular-nums; opacity: .9; pointer-events: none; color: #fff; }
.mt-rgs { left: 7px; } .mt-rge { right: 7px; }
.mt-cp .mt-rgh { top: 2px; } .mt-cp .mt-rgt { font-size: 12px; line-height: 12px; }
.mt-cp .mt-chip { display: none; }
.mt-tiny .mt-rgh { display: none; }
.mt-gr { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 3; touch-action: none; }
.mt-gr-l { left: -4px; } .mt-gr-r { right: -4px; }
.mt-gr::after {
  content: ""; position: absolute; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: #fff; opacity: 0;
  transition: opacity .12s, height .12s, margin-top .12s;
}
.mt-gr-l::after { left: 5px; } .mt-gr-r::after { right: 5px; }
.mt-rg:hover .mt-gr::after { opacity: .45; }
.mt-rg.mt-sel .mt-gr::after { opacity: .95; }
.mt-gr:hover::after { opacity: 1 !important; height: 22px; margin-top: -11px; }
.mt-ro .mt-gr, .mt-oth.mt-ro .mt-gr, .mt-ghost .mt-gr { display: none; }
/* round 6：全覽時很短的選段（JS 至少畫成 20px，觸控 28px）——把手縮成 5px（只有 2px 在區塊內），中間 ≥ 16px 才是「移動」的區域；握把標記只在 hover／選取時出現 */
/* round 7：短選段的把手改成「10px 寬、整個長在區塊外面」（舊：5px、一半壓在 20px 的區塊裡，剩下的移動區只有 10–16px，相鄰的短選段還會互相蓋住）。
   平常整塊（≥ 20px）都是「選取／移動」的目標；點一下選取（或鍵盤聚焦）之後，兩側各長出 10px 的修剪把手（觸控 24px），被選取的那一塊疊在最上面——
   沒有被選取時版面不隨滑鼠移動而變，互相靠近的短選段永遠各有一塊抓得到的區域。 */
.mt-tiny .mt-gr { display: none; width: 10px; }
.mt-tiny .mt-gr-l { left: -10px; } .mt-tiny .mt-gr-r { right: -10px; }
.mt-tiny:not(.mt-ro):not(.mt-ghost).mt-sel .mt-gr, .mt-tiny:not(.mt-ro):not(.mt-ghost):focus-visible .mt-gr { display: block; }
.mt-tiny .mt-gr::after { width: 3px; height: 14px; margin-top: -7px; }
.mt-tiny .mt-gr-l::after { left: var(--gp, 6px); } .mt-tiny .mt-gr-r::after { left: var(--gp, 1px); right: auto; }     /* round 8：把手寬度由 JS 逐段設定（_zone），握把位置用 --gp 對準區塊邊緣 */
.mt-tiny .mt-gr:hover::after { height: 18px; margin-top: -9px; }
.mt-tool-range .mt-lane, .mt-tool-range .mt-lane .mt-it { cursor: crosshair; touch-action: none; }
.mt-tool-range .mt-lane .mt-gr { cursor: ew-resize; }
.mt-cur-trim, .mt-cur-trim * { cursor: ew-resize !important; }
.mt-cur-move, .mt-cur-move * { cursor: grabbing !important; }
.mt-cur-create, .mt-cur-create * { cursor: crosshair !important; }
.mt-lp .mt-ov { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mt-rc) 40%, transparent); }

/* ───────── 意見標記 ───────── */
.mt-mk {
  position: absolute; top: 4px; height: 18px; display: flex; align-items: center; border-radius: 9px; cursor: pointer;
  background: transparent; transition: background-color .12s, transform .12s;
}
.mt-mk-l { background: color-mix(in srgb, var(--mt-c) 18%, var(--mt-lane)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-c) 36%, transparent); }
.mt-mkd {
  flex: none; width: 18px; height: 18px; border-radius: 9px; background: var(--mt-c); color: #11131a;
  font: 700 12px/18px var(--mt-sans); text-align: center; font-style: normal;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mt-lane) 90%, transparent), 0 1px 4px rgba(0, 0, 0, .4);
  transition: transform .14s cubic-bezier(.2, .9, .3, 1.3);
}
.mt-mk:hover .mt-mkd { transform: scale(1.16); }
.mt-mkt { display: none; padding: 0 9px 0 6px; font-size: 12px; color: color-mix(in srgb, var(--mt-c) 30%, var(--mt-txt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-mk-l .mt-mkt { display: block; }

/* ───────── 疊層 ───────── */
.mt-ov { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--mt-gw); right: 0; overflow: hidden; pointer-events: none; }
.mt-endcap {
  position: absolute; top: 0; bottom: 0; left: 0; width: 240px;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .3) 0 4px, rgba(0, 0, 0, .16) 4px 8px); box-shadow: inset 1px 0 0 var(--mt-line);
}
.mt-ph {
  position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; will-change: transform;
  background: var(--mt-txt); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35); z-index: 5;
}
.mt-hv { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--mt-txt); opacity: 0; will-change: transform; transition: opacity .12s; }
.mt-hv.mt-show { opacity: .2; }
.mt-sl { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--mt-accent); opacity: 0; will-change: transform; transition: opacity .08s; z-index: 4; box-shadow: 0 0 6px color-mix(in srgb, var(--mt-accent) 70%, transparent); }
.mt-sl.mt-show { opacity: 1; }
.mt-vl, .mt-pv {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; opacity: 0;
  background: color-mix(in srgb, var(--mt-rc) 9%, transparent);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--mt-rc) 75%, transparent), inset -1px 0 0 color-mix(in srgb, var(--mt-rc) 75%, transparent);
  transition: opacity .1s;
}
.mt-vl.mt-show, .mt-pv.mt-show { opacity: 1; }
.mt-pv { background: color-mix(in srgb, var(--mt-rc) 6%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--mt-rc) 60%, transparent), inset -1px 0 0 color-mix(in srgb, var(--mt-rc) 60%, transparent); }

/* 刻度尺上的標籤 */
.mt-phh { position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 24px; will-change: transform; pointer-events: none; }
.mt-pill {
  position: absolute; left: 0; top: 2px; height: 17px; padding: 0 6px; border-radius: 4px; transform: translateX(calc(-50% + var(--sh, 0px)));
  background: var(--mt-txt); color: var(--mt-bg); font: 700 12px/17px var(--mt-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.mt-pill::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: calc(-4px - var(--sh, 0px)); border: 4px solid transparent; border-bottom: 0; border-top-color: var(--mt-txt); }
.mt-scrubbing .mt-pill { transform: translateX(calc(-50% + var(--sh, 0px))) scale(1.06); background: var(--accent-fill, var(--mt-accent)); color: #fff; }   /* 白字底色用 --accent-fill（4.56:1） */
.mt-scrubbing .mt-pill::after { border-top-color: var(--accent-fill, var(--mt-accent)); }
.mt-hvp {
  position: absolute; z-index: 4; top: 4px; left: 0; height: 15px; padding: 0 5px; border-radius: 3px; margin-left: 5px; opacity: 0;
  font: 600 12px/15px var(--mt-mono); font-variant-numeric: tabular-nums; white-space: nowrap; will-change: transform; transition: opacity .1s;
  color: var(--mt-dim); background: color-mix(in srgb, var(--mt-panel2) 92%, transparent); box-shadow: inset 0 0 0 1px var(--mt-line); pointer-events: none;
}
.mt-hvp.mt-show { opacity: 1; }
.mt-bub {
  position: absolute; z-index: 5; top: 3px; left: 0; height: 18px; padding: 0 6px; border-radius: 4px; opacity: 0; pointer-events: none; will-change: transform;
  background: var(--mt-rc); color: #1d0a10; font: 700 12px/18px var(--mt-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.mt-bub.mt-show { opacity: 1; }
.mt-sdia {
  position: absolute; z-index: 5; bottom: 1px; left: -4px; width: 8px; height: 8px; background: var(--mt-accent); opacity: 0; will-change: transform;
  pointer-events: none; animation: .22s cubic-bezier(.2, .9, .3, 1.4) 1;
}
.mt-sdia.mt-show { opacity: 1; }
.mt-pf { position: absolute; z-index: 3; bottom: 0; left: 0; width: 8px; height: 13px; opacity: 0; pointer-events: none; will-change: transform; }
.mt-pf.mt-show { opacity: 1; }
.mt-pf-in { margin-left: 0; border-left: 2px solid var(--mt-rc); border-top: 2px solid var(--mt-rc); border-bottom: 2px solid var(--mt-rc); border-radius: 2px 0 0 2px; width: 7px; left: -1px; }
.mt-pf-out { border-right: 2px solid var(--mt-rc); border-top: 2px solid var(--mt-rc); border-bottom: 2px solid var(--mt-rc); border-radius: 0 2px 2px 0; width: 7px; margin-left: -6px; }

/* ───────── 總覽條 ───────── */
.mt-ovw { flex: none; display: flex; height: var(--mt-ovw-h, 22px); background: var(--mt-panel); border-top: 1px solid var(--mt-line); }
.mt-ovw-l {
  flex: 0 0 var(--mt-gw); width: var(--mt-gw); min-width: 0; max-width: var(--mt-gw); overflow: hidden; display: flex; align-items: center; padding-left: 12px;
  font: 600 12px/1 var(--mt-sans); letter-spacing: .1em; color: var(--mt-dim); border-right: 1px solid var(--mt-line);
}
.mt-n2 .mt-ovw-l { padding-left: 9px; }
.mt-ovw-t { position: relative; flex: 1 1 0; min-width: 0; margin: 0 12px 0 0; cursor: pointer; touch-action: none; overflow: hidden; }
.mt-ovw-c { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mt-ovw-win {
  position: absolute; left: 0; top: 1px; bottom: 1px; width: 0; border-radius: 3px; cursor: grab; will-change: transform;
  background: color-mix(in srgb, var(--mt-txt) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-txt) 38%, transparent);
  transition: background-color .15s, box-shadow .15s;
}
.mt-ovw-win.mt-all { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-txt) 14%, transparent); }
.mt-ovw-t { outline: none; }
.mt-ovw-t:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: -2px; border-radius: 3px; }     /* 實心 2px 主色畫在內側（欄位 overflow:hidden）；強制色彩模式下 box-shadow 會消失，outline 不會 */
.mt-ovw-t:hover .mt-ovw-win { background: color-mix(in srgb, var(--mt-txt) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-txt) 55%, transparent); }
.mt-ovdrag .mt-ovw-win { cursor: grabbing; background: color-mix(in srgb, var(--mt-accent) 20%, transparent); box-shadow: inset 0 0 0 1px var(--mt-accent); }
.mt-ovw-ph { position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1px; background: var(--mt-txt); opacity: .9; will-change: transform; pointer-events: none; }

/* 提示泡泡（掛在 body） */
.mt-tip {
  --mt-tip-bg: var(--panel-2, #1d2029);
  position: fixed; z-index: 2147483000; top: 0; left: 0; max-width: 340px; padding: 8px 11px 9px; border-radius: 9px; pointer-events: none;
  background: var(--panel-2, #1d2029); color: var(--txt, #e7e9ee); border: 1px solid var(--line, #2a2e3a);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .04) inset;
  font: 12.5px/1.55 var(--sans, -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif);
  opacity: 0; transition: opacity .1s; -webkit-font-smoothing: antialiased;
}
.mt-tip[hidden] { display: none; }
.mt-tip.mt-tip-on { opacity: 1; }
/* round 7：短暫的文字提示（_flash）：貼在時間軸上緣、掛在 body；讀屏另有 .mt-sr 播報 */
.mt-toast {
  position: fixed; z-index: 2147483000; top: 0; left: 0; max-width: 360px; padding: 9px 13px; border-radius: 10px; pointer-events: none;
  background: var(--panel-2, #1d2029); color: var(--txt, #e7e9ee); border: 1px solid color-mix(in srgb, #ff6b81 55%, var(--line, #2a2e3a));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font: 600 13px/1.5 var(--sans, -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif); text-wrap: balance;
  opacity: 0; transition: opacity .14s; -webkit-font-smoothing: antialiased;
}
.mt-toast[hidden] { display: none; }
.mt-toast.mt-on { opacity: 1; }
.mt-tip-m { display: flex; align-items: center; gap: 7px; font: 600 12px/1.3 var(--mono, "SF Mono", ui-monospace, Menlo, monospace); color: var(--txt-dim, #9aa0b0); font-variant-numeric: tabular-nums; }
.mt-tip-d { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.mt-tip-t { margin-top: 3px; word-break: break-word; }
/* 選段備註（round 5）：名稱＋時間下面獨立一行，最多 5 行；有備註時，後面的作者／狀態列退成次要色 */
.mt-tip-nt { margin-top: 4px; white-space: pre-wrap; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.mt-tip.mt-has-note .mt-tip-t { color: var(--txt-dim, #9aa0b0); font-size: 12px; }
.mt-tip-n { font-style: normal; color: var(--txt-dim, #9aa0b0); font-size: 12px; margin-left: 2px; white-space: nowrap; }

.mt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── 精簡模式（時間軸被壓矮時自動啟用；也可由宿主指定）：波形 21、文字軌 24／26、推薦金句 18、選段 34、意見 22 ───────── */
.mt-compact .mt-tb { font-size: 12px; }
.mt-compact .mt-tb.mt-em::after { top: 2px; }
.mt-compact .mt-bd { top: 2px; bottom: 2px; }
.mt-compact .mt-bd span { top: 1px; height: 12px; line-height: 12px; }
.mt-compact .mt-mk { top: 3px; }
.mt-compact .mt-rgh { top: 3px; }
.mt-compact .mt-rgs, .mt-compact .mt-rge { display: none; }

/* ───────── 首次使用提示（setHint） ─────────
   空的選段軌 → 畫在軌裡（.mt-ch：靠右的文字＋一次性「拖出一段」的虛線動畫＋「知道了」；右緣讓開片尾斜紋，--mt-ec＝可見的片尾斜紋寬度）；
   選段軌已有選段 → 標頭中間的空白處（.mt-hp，round 6：不再浮在軌道上蓋住其他軌；空白處放不下就不顯示）；收合 → 標頭單行（.mt-hl） */
.mt-ch {
  position: sticky; left: var(--mt-gw); z-index: 2; width: var(--mt-vw, 100%); max-width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 calc(10px + var(--mt-ec, 0px)) 0 16px; pointer-events: none;
}
.mt-ch[hidden] { display: none; }
.mt-ch.mt-in { animation: mt-fadein .32s ease-out both; }
.mt-ch.mt-out { animation: mt-fadeout .16s ease-in both; }
.mt-ch-ill { position: relative; flex: none; width: 76px; height: 24px; }
.mt-ch-g {                                   /* 虛線選段：寬度由 0 長到 60px（只播一次；reduced-motion 時直接是畫好的樣子） */
  position: absolute; left: 0; top: 3px; width: 60px; height: 18px; border-radius: 5px; box-sizing: border-box;
  border: 1.5px dashed color-mix(in srgb, var(--mt-rc) 85%, transparent); background: color-mix(in srgb, var(--mt-rc) 16%, transparent);
  animation: mt-chdraw 1.15s .45s cubic-bezier(.3, .7, .2, 1) both;
}
.mt-ch-c { position: absolute; left: -3px; top: 12px; width: 15px; height: 15px; color: var(--mt-txt); transform: translateX(60px); animation: mt-chcur 1.15s .45s cubic-bezier(.3, .7, .2, 1) both; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.mt-ch-c svg { display: block; }
.mt-ch-t { margin: 0; flex: 0 1 auto; min-width: 0; text-align: right; font: 500 12.5px/1.45 var(--mt-sans); letter-spacing: .01em; color: var(--mt-txt); text-wrap: balance; }
.mt-ch-x, .mt-hp-x {
  appearance: none; -webkit-appearance: none; flex: none; border: 0; cursor: pointer; pointer-events: auto; white-space: nowrap;
  font: 700 12px/1 var(--mt-sans); background: var(--mt-rc); color: #1d0a10; transition: filter .12s, transform .12s;
}
.mt-ch-x { height: 26px; padding: 0 12px; border-radius: 7px; }
.mt-ch-x:hover, .mt-hp-x:hover { filter: brightness(1.1); }
.mt-ch-x:active, .mt-hp-x:active { transform: scale(.96); }
.mt-ch-x:focus-visible, .mt-hp-x:focus-visible { outline: 2px solid var(--mt-txt); outline-offset: 2px; }
.mt-n3 .mt-ch { gap: 10px; padding: 0 calc(8px + var(--mt-ec, 0px)) 0 10px; }
.mt-n3 .mt-ch-ill { display: none; }
.mt-n3 .mt-ch-t { font-size: 12px; line-height: 1.3; }

/* 標頭中間空白處的首次提示（round 6）：絕對定位在 .mt-spacer 裡，不佔標頭版面、不影響量測式退讓；空白處 < 236px 時 JS 不顯示 */
.mt-spacer { position: relative; }
.mt-hp {
  position: absolute; left: 6px; right: 6px; top: 50%; transform: translateY(-50%); height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 9px;
  border-radius: 8px; color: var(--mt-txt); font: 500 12px/1 var(--mt-sans);
  background: color-mix(in srgb, var(--mt-rc) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-rc) 32%, transparent);
}
.mt-hp[hidden] { display: none; }
.mt-hp.mt-in { animation: mt-fadein .28s ease-out both; }
.mt-hp.mt-out { animation: mt-fadeout .16s ease-in both; }
.mt-hp-i { display: grid; place-items: center; flex: none; color: var(--mt-rc); }
.mt-hp-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-hp-x { height: 24px; padding: 0 9px; border-radius: 6px; }   /* ≥24px（WCAG 2.5.8；round 7 審查：22px） */
.mt-coaching .mt-l-ranges { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-rc) 26%, transparent); animation: mt-hintglow 2.2s ease-in-out infinite; }

/* 觸控長按提示（round 6）：手指按在選段軌上就出現一圈收縮的環，0.3 秒後環消失、開始拉選段——快速滑動只是捲動 */
.mt-lpr {
  position: absolute; z-index: 11; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform;
  background: color-mix(in srgb, var(--mt-rc) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mt-bg) 55%, transparent);
}
.mt-lpr.mt-on::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--mt-rc); animation: mt-lpring .3s cubic-bezier(.3, .6, .3, 1) both; }
.mt-lpr.mt-on { opacity: 1; }
@keyframes mt-lpring { 0% { opacity: 0; transform: scale(1.7); } 35% { opacity: .95; } 100% { opacity: 1; transform: scale(.55); } }

/* ───────── 鍵盤快捷鍵說明面板（round 6；掛在 body，顏色讀宿主頁的 CSS 變數並附預設值，和 .mt-tip 同一套） ───────── */
.mt-kp {
  --kp-bg: var(--panel-2, #1d2029); --kp-line: var(--line, #2a2e3a); --kp-txt: var(--txt, #e7e9ee); --kp-dim: var(--txt-dim, #9aa0b0); --kp-acc: var(--accent, #5b8cff);
  position: fixed; z-index: 2147483001; left: 0; top: 0; padding: 12px 14px 14px; border-radius: 12px; overflow: auto; overscroll-behavior: contain;
  background: var(--kp-bg); color: var(--kp-txt); border: 1px solid var(--kp-line);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;
  font: 12.5px/1.5 var(--sans, -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.mt-kp[hidden] { display: none; }
.mt-kp.mt-in { animation: mt-fadein .16s ease-out both; }
.mt-kp *, .mt-kp *::before, .mt-kp *::after { box-sizing: border-box; }
.mt-kp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mt-kp-h b { font-size: 13px; font-weight: 700; }
.mt-kp-x {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--kp-dim); width: 28px; height: 28px; margin: -4px -6px -4px 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.mt-kp-x:hover { background: color-mix(in srgb, var(--kp-txt) 10%, transparent); color: var(--kp-txt); }
.mt-kp-x:focus-visible, .mt-kp-sw:focus-visible { outline: 2px solid var(--kp-acc); outline-offset: 2px; }
.mt-kp-sw {
  appearance: none; -webkit-appearance: none; width: 100%; display: flex; align-items: flex-start; gap: 11px; text-align: left; cursor: pointer;
  padding: 10px 11px; border: 0; border-radius: 9px; color: inherit; font: inherit;
  background: color-mix(in srgb, var(--kp-txt) 6%, transparent); box-shadow: inset 0 0 0 1px var(--kp-line);
}
.mt-kp-sw:hover { background: color-mix(in srgb, var(--kp-txt) 9%, transparent); }
.mt-kp-sw b { display: block; font-size: 13px; font-weight: 600; }
.mt-kp-sw small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--kp-dim); }
.mt-kp-tg { flex: none; position: relative; width: 34px; height: 20px; margin-top: 1px; border-radius: 10px; background: var(--kp-line); transition: background-color .15s; }
.mt-kp-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--kp-txt); transition: transform .15s; }
.mt-kp-sw[aria-checked="true"] .mt-kp-tg { background: var(--kp-acc); }
.mt-kp-sw[aria-checked="true"] .mt-kp-tg::after { transform: translateX(14px); background: #fff; }
.mt-kp h4 { margin: 14px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--kp-dim); }
.mt-kp h4.mt-kp-off { text-decoration: line-through; }
/* round 7：鍵位欄寬跟內容走（max-content），整個清單共用同一條欄線——「Alt Shift [ ]」這種長組合不會折行、說明文字也上下對齊 */
.mt-kp-l { margin: 0; display: grid; grid-template-columns: minmax(max-content, 140px) minmax(0, 1fr); gap: 5px 12px; align-items: start; }
.mt-kp-l > div { display: contents; }
.mt-kp-l dt { display: flex; flex-wrap: nowrap; gap: 3px; margin: 0; padding-top: 1px; }
.mt-kp-l dd { margin: 0; padding-top: 2px; color: var(--kp-txt); }
.mt-kp kbd {
  display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: 5px; text-align: center; font: 600 12px/1.25 var(--mono, "SF Mono", ui-monospace, Menlo, monospace);
  color: var(--kp-txt); background: color-mix(in srgb, var(--kp-txt) 8%, transparent); box-shadow: inset 0 0 0 1px var(--kp-line), 0 1px 0 var(--kp-line);
}
.mt-kp-offs { opacity: .55; }
.mt-kp-cols { display: block; }
.mt-kp-2 .mt-kp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
.mt-kp-2 h4 { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .mt-kp, .mt-kp * { transition: none !important; animation: none !important; } }

@keyframes mt-chdraw { from { width: 0; opacity: 0; } 18% { opacity: 1; } to { width: 60px; opacity: 1; } }
@keyframes mt-chcur { from { transform: translateX(0); } to { transform: translateX(60px); } }
@keyframes mt-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-fadeout { to { opacity: 0; } }
@keyframes mt-hintglow { 0%, 100% { background-color: color-mix(in srgb, var(--mt-rc) 2%, transparent); } 50% { background-color: color-mix(in srgb, var(--mt-rc) 7%, transparent); } }
@keyframes mt-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@keyframes mt-rowin { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-pop { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes mt-snapA { from { scale: 1.9; } to { scale: 1; } }
@keyframes mt-snapB { from { scale: 1.9; } to { scale: 1; } }
@keyframes mt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes mt-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ───────── 觸控（pointer: coarse）：點擊範圍 ≥ 44×44 ─────────
   視覺大小不變，用偽元素把可點的範圍擴出去：標頭按鈕、修剪把手、選段區塊、意見標記、「知道了」、「還有 N 軌」。
   選段軌（≥ 52px，區塊 44px 高）與意見軌（44px）由 JS 依 pointer: coarse 加高，偽元素才不會被軌道的 paint containment 裁掉。 */
@media (pointer: coarse) {
  .mt-head { height: 48px; padding-right: 10px; }
  .mt-btn, .mt-ib { height: 32px; }
  .mt-ib { width: 32px; }
  .mt-seg .mt-btn { height: 28px; }
  .mt-zs { height: 44px; }                                  /* 滑桿本體 44px 高（軌道 3px、滑鈕 12px 的視覺不變） */
  .mt-btn, .mt-ib, .mt-ch-x, .mt-hl-x, .mt-hp-x { position: relative; }
  .mt-btn::before, .mt-ib::before, .mt-ch-x::before, .mt-hl-x::before, .mt-hp-x::before, .mt-more::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(calc(100% + 6px), 44px); height: 44px; transform: translate(-50%, -50%);
  }
  .mt-has .mt-pgo { z-index: 1; }                           /* 「建立」與旁邊的 × 的觸控範圍重疊時，主要動作優先 */
  .mt-pbar-b { height: 44px; min-width: 44px; }             /* 起訖點列：每顆 ≥ 44px 高（標頭 ≥ 48px） */
  .mt-pbar { gap: 8px; }
  .mt-gr { width: 22px; } .mt-gr-l { left: -9px; } .mt-gr-r { right: -9px; } .mt-gr-l::after { left: 10px; } .mt-gr-r::after { right: 10px; }
  .mt-gr::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .mt-tiny .mt-gr { width: 24px; } .mt-tiny .mt-gr-l { left: -24px; } .mt-tiny .mt-gr-r { right: -24px; }     /* 短選段：把手長在區塊外面（各 24px 寬，選取後才有），區塊本身（≥ 44px）才拖得動；實際寬度／位置由 JS 依鄰居空檔逐段設定（_zone） */
  .mt-tiny .mt-gr::before { display: none; }
  .mt-tiny .mt-gr-l::after { left: var(--gp, 16px); } .mt-tiny .mt-gr-r::after { left: var(--gp, 8px); right: auto; }
  .mt-rg::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .mt-rg.mt-tiny::before { width: 100%; }                   /* 短選段的觸控範圍不外擴到左右（會吃掉相鄰選段的本體）；本體已 ≥ 44px，被鄰居讓位縮小時也不低於 24px */
  .mt-xb { height: 26px; min-width: 44px; padding: 0 10px; border-radius: 13px; font-size: 13px; line-height: 26px; }
  .mt-xb::before { content: ""; position: absolute; inset: -9px -2px; }
  .mt-hint { margin-top: 19px; } .mt-compact .mt-hint { margin-top: 15px; }
  .mt-root .mt-lane .mt-mk { top: 13px; }                   /* 意見軌 44px：標記 18px 置中，偽元素擴成 44×44 */
  .mt-mk::before { content: ""; position: absolute; inset: -13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-root *, .mt-root *::before, .mt-root *::after, .mt-tip, .mt-toast { transition: none !important; animation: none !important; }
  .mt-shake { box-shadow: inset 0 0 0 2px var(--mt-warn); border-radius: 8px; }   /* 「範圍太短」本來靠抖動提示；沒有動畫時改成短暫的紅框（JS 700ms 後拿掉 class） */
  .mt-root, .mt-root * { scroll-behavior: auto !important; }      /* 宿主若把 scroll-behavior: smooth 設在 * 上，也不准讓時間軸的捲動／縮放變成慢慢滑 */
  .mt-zs::-webkit-slider-thumb, .mt-zs::-moz-range-thumb { transition: none !important; }   /* 縮放滑桿的滑鈕（偽元素，.mt-root * 碰不到）hover 放大改成立即 */
}