/* MISLab 時間軸動畫的樣式。顏色與實驗室 logo 一致（藍綠 #2BA3C4、藍 #25A0D3、葉綠 #A2C46B）。
 * 畫面（.mtl-stage）固定 16:9，文字大小跟著畫面寬度（cqw）縮放，但不會小於可讀的大小；
 * 畫面下方的說明列（.mtl-bar）放完整標題、成員與連結，手機上主要看這裡。 */
:root {
	--mtl-teal: #2BA3C4;
	--mtl-teal-dark: #1E7C97;
	--mtl-ink: #23313A;
	--mtl-muted: #5E6E78;
	--mtl-line: #DCE7EA;
	--mtl-bg: #F3F8F8;
	--mtl-font: "Nunito", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
html, body { margin: 0; background: var(--mtl-bg); color: var(--mtl-ink); font-family: var(--mtl-font); }
.mtl-page { max-width: 1280px; margin: 0 auto; padding: 20px 16px 32px; }
.mtl-head { display: flex; align-items: center; gap: 12px; margin: 0 4px 14px; font-size: 15px; color: var(--mtl-muted); }
.mtl-head a { display: inline-flex; align-items: center; gap: 8px; color: var(--mtl-ink); font-weight: 800; font-size: 20px; text-decoration: none; }
.mtl-head img { width: 36px; height: 36px; }
.mtl-head .mtl-head-sub::before { content: "·"; margin-right: 10px; color: #A9B8BE; }
.mtl-foot { margin: 12px 6px 0; font-size: 13px; color: var(--mtl-muted); line-height: 1.6; }
.mtl-foot a { color: var(--mtl-teal-dark); }

/* 嵌入（iframe）：只有動畫本身 */
html.mtl-embed-page, html.mtl-embed-page body { background: transparent; }
html.mtl-embed-page .mtl-page { padding: 0; max-width: none; }
html.mtl-embed-page .mtl-head, html.mtl-embed-page .mtl-foot { display: none; }

/* ------------------------------------------------------------------ 外框 */
.mtl { position: relative; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 34px rgba(25, 70, 85, .12); outline: none; }
.mtl.is-embed { border-radius: 0; box-shadow: none; }
.mtl:focus-visible { box-shadow: 0 0 0 3px var(--mtl-teal), 0 10px 34px rgba(25, 70, 85, .12); }
.mtl-stage { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: #F4FBFB; cursor: pointer; user-select: none; -webkit-user-select: none; }
/* 全螢幕：畫面維持 16:9、置中，下面的控制列和畫面一樣寬（留 160px 給控制列；放不下時往下超出，不會切到畫面上緣） */
.mtl:fullscreen { border-radius: 0; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; background: #fff; }
.mtl:not(.is-embed):fullscreen { --mtl-fs-w: min(100%, calc((100vh - 160px) * 16 / 9)); }
.mtl:not(.is-embed):fullscreen .mtl-stage, .mtl:not(.is-embed):fullscreen .mtl-bar { flex: none; box-sizing: border-box; width: var(--mtl-fs-w); max-height: none; margin: 0 auto; }
/* 橫的螢幕全螢幕時，說明列和嵌入一樣只排一行（標題太長加 …、成員排不下右邊淡出，ui.js 的 clipPeople）：控制列的高度固定（約 140px），
   放得進上面留的 160px，標題換行、成員排兩排時也不會超出螢幕被切掉。直的螢幕（手機直拿）畫面下面還有很多空間，照常換行 */
@media (min-aspect-ratio: 1/1) {
	.mtl:not(.is-embed):fullscreen .mtl-cap-head { flex-wrap: nowrap; }
	.mtl:not(.is-embed):fullscreen .mtl-cap-year, .mtl:not(.is-embed):fullscreen .mtl-cap-cat, .mtl:not(.is-embed):fullscreen .mtl-person { flex: none; }
	.mtl:not(.is-embed):fullscreen .mtl-cap-title { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mtl:not(.is-embed):fullscreen .mtl-cap-people { flex-wrap: nowrap; overflow: hidden; }
	/* 控制列很窄（橫拿的手機，畫面只有 400 多 px 寬）：和嵌入的手機版一樣，字小一點、「Project page」只留箭頭、成員不放英文名，標題才放得下 */
	@container (max-width: 560px) {
		.mtl:not(.is-embed):fullscreen .mtl-cap-year { font-size: 15px; }
		.mtl:not(.is-embed):fullscreen .mtl-cap-title { font-size: 13px; }
		.mtl:not(.is-embed):fullscreen .mtl-cap-link { padding: 3px 6px; }
		.mtl:not(.is-embed):fullscreen .mtl-cap-link-txt { display: none; }
		.mtl:not(.is-embed):fullscreen .mtl-person { padding: 2px 8px; font-size: 12px; }
		.mtl:not(.is-embed):fullscreen .mtl-person small { display: none; }
	}
}
.mtl:fullscreen .mtl-cap-people.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.mtl-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mtl-svg text { font-family: var(--mtl-font); }

/* SVG 裡的文字 */
.lbl-zh { font-size: 15px; font-weight: 800; fill: #2B2B33; }
.lbl-en { font-size: 10px; font-weight: 600; fill: #5E6670; }
.lbl-en.lbl-only { font-size: 11px; font-weight: 800; fill: #2B2B33; }
/* 名牌的淡入淡出在 stage.js 依時間算（每一格都改 opacity），這裡不要 transition */
.is-teacher .actor-label rect { fill: #E6F5F8; stroke: #9ED3E0; }
.mtl.is-narrow .actor-label { display: none; }
.mtl-mark-year { font-size: 30px; font-weight: 900; fill: #A3BCC1; transition: fill .3s; }
.mtl-mark-year.is-current { fill: var(--mtl-teal-dark); }
.mtl-mark-gap { font-size: 17px; font-weight: 800; fill: #C2D3D6; }
.mtl-mark { transition: opacity .4s; }

/* ------------------------------------------------------------------ 畫面上的 HTML（年份、專案卡片、標題） */
/* 年份、卡片的淡入淡出由 stage.js 每一格依時間設定 opacity（拖曳時間軸也正確），所以只對 transform 做 transition：
   opacity 也做 transition 的話每一格都重新開始，會慢半拍（換專案時舊的文字還很清楚就換掉了） */
.mtl-hud { position: absolute; inset: 0; pointer-events: none; }
.mtl-year { position: absolute; left: 2.4cqw; top: 2.1cqw; opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: left top; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.mtl-year.is-on { opacity: 1; transform: none; }
.mtl-year-num { font-size: clamp(26px, 5.4cqw, 84px); font-weight: 900; line-height: .95; color: var(--mtl-teal-dark); letter-spacing: -.02em; }
.mtl-year-sub { margin-top: .45cqw; font-size: clamp(11px, 1.3cqw, 19px); font-weight: 700; color: var(--mtl-muted); }

.mtl-card { position: absolute; right: 2cqw; top: 1.8cqw; width: min(44cqw, 700px); box-sizing: border-box; padding: .85cqw 1.3cqw .95cqw; background: rgba(255, 255, 255, .94); border: 1.5px solid #DCEAEE; border-radius: 1.4cqw; box-shadow: 0 .5cqw 1.6cqw rgba(30, 90, 110, .1);
	opacity: 0; transform: translateY(-10px); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.mtl-card.is-on { opacity: 1; transform: none; }
.mtl-card-cat { display: inline-block; padding: .12cqw .7cqw; border-radius: 99px; color: #fff; font-size: clamp(9px, .85cqw, 13px); font-weight: 800; letter-spacing: .02em; }
.mtl-card-title { margin-top: .3cqw; font-size: clamp(15px, 2cqw, 31px); font-weight: 900; line-height: 1.12; color: var(--mtl-ink); }
.mtl-card-line { margin-top: .25cqw; font-size: clamp(11px, 1.15cqw, 17px); font-weight: 600; line-height: 1.3; color: var(--mtl-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container (max-width: 900px) { .mtl-card-line { -webkit-line-clamp: 1; } .mtl-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.mtl-card-count { position: absolute; right: 1.3cqw; top: 1cqw; font-size: clamp(9px, .95cqw, 14px); font-weight: 800; color: #9AAFB6; }
/* 沒有分類小標籤的卡片（stage.js 加 .no-cat）：標題在第一行，右邊留位置給「n / m」 */
.mtl-card.no-cat .mtl-card-title { padding-right: max(3.2cqw, 30px); }
/* 窄畫面（手機）：卡片只留一行標題，放在畫面最上面 */
.mtl.is-narrow .mtl-card { left: 1.5cqw; right: 1.5cqw; top: 1.5cqw; width: auto; padding: 4px 10px; border-radius: 10px; }
.mtl.is-narrow .mtl-card-cat, .mtl.is-narrow .mtl-card-line, .mtl.is-narrow .mtl-card-count { display: none; }
.mtl.is-narrow .mtl-card-title { margin: 0; padding-right: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtl.is-narrow .mtl-year { display: none; }      /* 時間軸上已經有年份 */

.mtl-title { position: absolute; left: 50%; top: 6.5cqw; transform: translate(-50%, -8px); width: 80cqw; text-align: center; opacity: 0; transition: opacity .5s, transform .6s; }
.mtl-title.is-on { opacity: 1; transform: translate(-50%, 0); }
.mtl-title-main { font-size: clamp(18px, 3.6cqw, 56px); font-weight: 900; color: var(--mtl-ink); line-height: 1.1; }
.mtl-title-sub { margin-top: .6cqw; font-size: clamp(11px, 1.5cqw, 22px); font-weight: 700; color: var(--mtl-muted); }
.mtl-title-logo { width: clamp(44px, 8cqw, 124px); height: auto; display: block; margin: 0 auto .6cqw; }
.mtl-title.is-end { top: 3.2cqw; }
/* 片尾的實驗室名稱：窄畫面（手機）只放短名稱、不放 logo，標題只有兩行，不會蓋到大合照（stage.js 兩個都放） */
.mtl-title-short { display: none; }
.mtl.is-narrow .mtl-title.is-end .mtl-title-long, .mtl.is-narrow .mtl-title.is-end .mtl-title-logo { display: none; }
.mtl.is-narrow .mtl-title.is-end .mtl-title-short { display: inline; }

/* 大播放鍵 */
.mtl-big { position: absolute; left: 50%; top: 50%; width: clamp(56px, 8cqw, 96px); height: clamp(56px, 8cqw, 96px); margin: calc(clamp(56px, 8cqw, 96px) / -2) 0 0 calc(clamp(56px, 8cqw, 96px) / -2);
	border: 0; border-radius: 50%; background: rgba(43, 163, 196, .92); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(20, 90, 110, .3); transition: opacity .25s, transform .25s; padding: 0; }
.mtl-big svg { width: 54%; height: 54%; margin-left: 8%; }
.mtl.is-playing .mtl-big, .mtl.is-paused .mtl-big { opacity: 0; transform: scale(.8); pointer-events: none; }
.mtl.is-ended .mtl-big { top: auto; bottom: 7cqw; margin-top: 0; }
.mtl.is-ended .mtl-big svg { margin-left: 0; }
/* 嵌入時播完：疊在畫面下方的控制列會蓋住中間偏下的重播鍵的一半，所以不放，用控制列的播放鍵（ui.js 的 setState 換成重播鍵） */
.mtl.is-embed.is-ended .mtl-big { display: none; }
/* 手機（窄畫面）播完：控制列的按鈕已經換成重播鍵，中間的大按鈕會蓋住大合照，不放 */
.mtl.is-narrow.is-ended .mtl-big { display: none; }
/* 播放到一半暫停（ui.js 的 setState 加 .is-paused）：只在左下角放一個小播放鍵，不蓋住畫面中間的老師和道具。
   嵌入時暫停會在畫面下方疊出控制列（有播放鍵），這個就不放 */
.mtl-resume { position: absolute; left: 1.6cqw; bottom: 1.6cqw; width: clamp(34px, 3.4cqw, 50px); height: clamp(34px, 3.4cqw, 50px); padding: 0; border: 0; border-radius: 50%;
	background: rgba(43, 163, 196, .9); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(20, 90, 110, .28);
	opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .25s, transform .25s; }
.mtl-resume svg { width: 54%; height: 54%; margin-left: 8%; }
.mtl-resume:hover { background: var(--mtl-teal-dark); }
.mtl.is-paused:not(.is-embed) .mtl-resume { opacity: 1; transform: none; pointer-events: auto; }

/* 嵌入（?embed=1）：畫面在上，說明列（年份、分類、標題連結、成員）一直顯示在畫面下面，兩個加起來裝進 iframe：
   畫面寬度 = min(iframe 寬, (iframe 高 − 說明列高) × 16/9)，iframe 的比例不合時左右留白（透明）。
   說明列高 --mtl-cap-h = clamp(54px, 40px + 4.5vw, 66px)（跟著 iframe 寬度連續變化），所以外層用
   padding-top: calc(56.25% + clamp(54px, 40px + 4.5%, 66px)) 給 iframe 高度就剛好不留白，寫法見 README「放上網站」。
   控制列疊在畫面下方（ui.js 把說明列移出控制列），滑鼠移上去或暫停時才出現 */
html.mtl-embed-page, html.mtl-embed-page body { overflow: hidden; }
.mtl.is-embed { --mtl-cap-h: clamp(54px, calc(40px + 4.5vw), 66px); --mtl-w: min(100vw, calc((100vh - var(--mtl-cap-h)) * 16 / 9)); background: transparent; }
.mtl.is-embed .mtl-stage { width: var(--mtl-w); margin: 0 auto; }
.mtl.is-embed .mtl-bar { position: absolute; left: 0; right: 0; top: calc(var(--mtl-w) * 9 / 16); width: var(--mtl-w); margin: 0 auto; box-sizing: border-box; padding: 8px 12px 4px;
	background: rgba(255, 255, 255, .93); border-top: 1px solid var(--mtl-line); opacity: 0; transform: translateY(calc(8px - 100%)); transition: opacity .25s, transform .25s; }
.mtl.is-embed:hover .mtl-bar, .mtl.is-embed:focus-within .mtl-bar, .mtl.is-embed:not(.is-playing) .mtl-bar { opacity: 1; transform: translateY(-100%); }
/* 說明列的內容 = 上 7 + 標題列 25 + 間距 4 + 成員標籤 27 = 63px，561px 寬時 --mtl-cap-h 只有 65.2px（扣掉上框線 64.2），
   所以都裝得下，成員標籤的下緣不會被切掉（560px 以下見下面的 @media） */
.mtl.is-embed > .mtl-caption { box-sizing: border-box; width: var(--mtl-w); height: var(--mtl-cap-h); margin: 0 auto; padding: 7px 14px 0; overflow: hidden; background: #FBFDFD; border-top: 1px solid var(--mtl-line); }
.mtl.is-embed .mtl-cap-head { flex-wrap: nowrap; }
.mtl.is-embed .mtl-cap-year, .mtl.is-embed .mtl-cap-cat { flex: none; }
.mtl.is-embed .mtl-cap-title { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtl.is-embed .mtl-cap-people { flex-wrap: nowrap; overflow: hidden; margin-top: 4px; }
.mtl.is-embed .mtl-cap-people.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.mtl.is-embed .mtl-person { flex: none; }
.mtl.is-embed:fullscreen { display: block; background: #fff; }
.mtl.is-embed:fullscreen .mtl-stage { max-height: none; }
@media (max-width: 560px) {
	.mtl.is-embed > .mtl-caption { padding: 6px 10px 0; }
	.mtl.is-embed .mtl-cap-year { font-size: 15px; }
	.mtl.is-embed .mtl-cap-title { font-size: 13px; }
	.mtl.is-embed .mtl-cap-people { margin-top: 4px; }
	.mtl.is-embed .mtl-person { padding: 2px 8px; font-size: 12px; }
	.mtl.is-embed .mtl-person small { display: none; }
	.mtl.is-embed .mtl-cap-link { padding: 3px 6px; }
	.mtl.is-embed .mtl-cap-link-txt { display: none; }     /* 手機上只留箭頭 */
}

/* ------------------------------------------------------------------ 下方：播放控制 + 說明 */
.mtl-bar { padding: 12px 16px 14px; border-top: 1px solid var(--mtl-line); background: #FBFDFD; container-type: inline-size; }
.mtl-controls { display: flex; align-items: flex-start; gap: 8px; }
.mtl-controls > .mtl-btn, .mtl-controls > .mtl-time { margin-top: -4px; }
.mtl-btn { flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #E7F4F7; color: var(--mtl-teal-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: 800 13px var(--mtl-font); }
.mtl-btn svg { width: 20px; height: 20px; }
.mtl-btn:hover { background: #D3ECF2; }
.mtl-btn:focus-visible { outline: 2px solid var(--mtl-teal); outline-offset: 2px; }
.mtl-play { background: var(--mtl-teal); color: #fff; }
.mtl-play:hover { background: var(--mtl-teal-dark); }
.mtl-speed { width: 46px; border-radius: 19px; }
/* 時間軸：年份刻度 + 老師的小頭像；上面疊一個透明的 range（拖曳、鍵盤操作、讀屏） */
.mtl-track { position: relative; flex: 1; min-width: 80px; height: 46px; margin: 0 14px; }   /* 左右留老師頭像（30px）的一半，不蓋到按鈕和時間 */
.mtl-track-line { position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 6px; background: #DCEAEC; overflow: hidden; }
.mtl-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--mtl-teal); }
.mtl-track-years { position: absolute; left: 0; right: 0; top: 24px; height: 20px; }
/* 目前的年份深色、在最上面；其他年份變淡；和目前的年份重疊的藏起來（ui.js 的 layoutYears，刻度還在、不擋點擊） */
.mtl-track-year { position: absolute; transform: translateX(-50%); padding: 1px 3px; border: 0; background: none; font: 800 11px var(--mtl-font); color: #B0C3C8; cursor: pointer; border-radius: 6px; z-index: 2; transition: color .25s; }
.mtl-track-year::before { content: ""; position: absolute; left: 50%; top: -10px; width: 2px; height: 6px; margin-left: -1px; background: #BBD2D6; }
.mtl-track-year:hover, .mtl-track-year:focus-visible { color: var(--mtl-teal-dark); background: #E7F4F7; outline: none; }
.mtl-track-year.is-current { color: var(--mtl-teal-dark); font-weight: 900; z-index: 3; }
.mtl-track-year.is-crowded { color: transparent; pointer-events: none; }
/* 藏起來的年份還在 Tab 順序裡：用鍵盤移到它的時候顯示出來（在旁邊年份的上面），不會是一個沒有字的底色 */
.mtl-track-year.is-crowded:focus-visible { color: var(--mtl-teal-dark); background: #E7F4F7; z-index: 4; }
.mtl-track-year .y2 { display: none; }
.mtl-track-head { position: absolute; top: -9px; width: 30px; height: 30px; margin-left: -15px; left: 0; pointer-events: none; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.mtl-track-head svg { width: 100%; height: 100%; display: block; }
.mtl-seek { position: absolute; left: -8px; right: -8px; top: 2px; width: calc(100% + 16px); height: 26px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mtl-seek:focus-visible + * , .mtl-track:focus-within .mtl-track-line { box-shadow: 0 0 0 2px var(--mtl-teal); }
@container (max-width: 560px) { .mtl-track-year .y4 { display: none; } .mtl-track-year .y2 { display: inline; } }
.mtl-time { flex: none; min-width: 38px; line-height: 38px; font-size: 13px; font-weight: 700; color: var(--mtl-muted); font-variant-numeric: tabular-nums; }
.mtl-caption { margin-top: 10px; min-height: 52px; }
.mtl-cap-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.mtl-cap-year { font-size: 18px; font-weight: 900; color: var(--mtl-teal-dark); }
.mtl-cap-cat { align-self: center; padding: 2px 9px; border-radius: 99px; color: #fff; font-size: 12px; font-weight: 800; }
.mtl-cap-title { flex: 1 1 320px; font-size: 15px; font-weight: 800; color: var(--mtl-ink); text-decoration: none; line-height: 1.35; }
.mtl-cap-title[href]:hover { color: var(--mtl-teal-dark); text-decoration: underline; }
/* 專案頁面的連結（標題本身也是連結；這個按鈕讓人一眼看出可以點） */
.mtl-cap-link { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 11px; border: 1.5px solid #BFE0E8; border-radius: 99px;
	color: var(--mtl-teal-dark); font-size: 12px; font-weight: 800; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.mtl-cap-link:hover, .mtl-cap-link:focus-visible { background: #E7F4F7; border-color: var(--mtl-teal); outline: none; }
.mtl-cap-link svg { width: 13px; height: 13px; flex: none; }
.mtl-cap-link[hidden] { display: none; }
.mtl-cap-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mtl-person { padding: 3px 10px; border-radius: 99px; background: #EEF5F6; font-size: 13px; font-weight: 800; color: #34444D; }
.mtl-person small { font-size: 11.5px; font-weight: 600; color: var(--mtl-muted); }
.mtl-person.is-ph { background: #F1F2F4; color: #6A747C; }
.mtl-person.is-teacher { background: #E1F3F7; }
@media (max-width: 560px) {
	.mtl-page { padding: 10px 8px 24px; }
	.mtl { border-radius: 12px; }
	.mtl-bar { padding: 8px 10px 12px; }
	.mtl-controls { gap: 5px; }
	.mtl-btn { width: 34px; height: 34px; }
	.mtl-time, .mtl-full { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mtl-year, .mtl-card, .mtl-title, .mtl-big, .mtl-resume { transition: none; }
}