/*
 * 台灣歷史 Taiwan's Story（/resources/classes/taiwan-history/）專屬樣式。
 * 共用的版面在 astro.css（.astro-lab、.al-*、.ph-card、.cc-card、.myth、.trick、.act）；這裡的 class 前綴一律 twh-
 * （th- 已被天文、人體、地球、書法、數學等系列用掉，不要用）。只載在本系列的頁面（build.py 的 _twh_head()）。
 * 中文一律系統字（var(--zh)），不載中文網頁字型。
 */

/* ── 時間軸（全系列共用；tools/twhist/src/timeline2d.js）────────────────────
   位置交給 CSS 變數：--p（一個點）、--a／--b（一段的兩端），0＝最古老、1＝現在。
   橫的：left；直的（.twh-tl-v）：top，現在在上、越下面越古老。 */
.twh-tl-wrap { margin-top: 1.4rem; padding: 1.2rem 1.3rem 1.1rem; border-radius: 22px; background: radial-gradient(120% 120% at 15% 0%, #14244d 0%, #070b17 62%); color: #e8edf7; box-shadow: 0 24px 60px -34px rgba(10,20,50,.7); }
.twh-tl { --tl-line: rgba(160,180,230,.22); --tl-mute: #9fb0cf; --tl-sun: #ffd36e; font-family: var(--sans); }
.twh-tl .zh { font-family: var(--zh); }
.twh-tl-track { position: relative; height: 164px; border-radius: 14px; border: 1px solid var(--tl-line); background: rgba(255,255,255,.03); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.twh-tl-track.is-drag { cursor: grabbing; }
.twh-tl-l { position: absolute; inset: 0; pointer-events: none; }
.twh-tl-span { position: absolute; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); top: 84px; height: 46px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; }
.twh-tl-span > span { padding: 0 .5rem; font-size: .78rem; font-weight: 800; line-height: 1.25; text-align: center; color: #0b1326; }
.twh-tl-span > span .zh { display: block; font-size: .76rem; font-weight: 700; }
.twh-tl-span.is-thin > span { display: none; }
.twh-tl-pre { background: linear-gradient(90deg, #6f8f72, #c9b27a); }
.twh-tl-rec { background: #e9c46a; min-width: 3px; }
.twh-tl-era { background: #8fb4e8; }
.twh-tl-focus { position: absolute; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); min-width: 6px; top: 10px; height: 30px; border: 2px solid var(--tl-sun); border-bottom: 0; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; }
.twh-tl-focus > span { margin-top: -1px; padding: .12rem .7rem .2rem; border-radius: 0 0 10px 10px; background: var(--tl-sun); color: #1b1405; font-size: .74rem; font-weight: 800; line-height: 1.25; text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.twh-tl-focus > span .zh { margin-left: .5em; font-weight: 700; }
.twh-tl-band { position: absolute; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); top: 0; bottom: 0; background: rgba(255,211,110,.16); border-inline: 1px solid rgba(255,211,110,.6); }
.twh-tl-tick { position: absolute; left: calc(var(--p) * 100%); top: 78px; bottom: 28px; width: 0; border-left: 1px dashed rgba(160,180,230,.2); }
.twh-tl-tick.is-major { border-left: 1px solid rgba(160,180,230,.42); top: 72px; }
.twh-tl-tick.is-end > span { transform: translateX(-100%); padding-right: .3rem; }
.twh-tl-tick.is-start > span { transform: none; padding-left: .3rem; }
.twh-tl-tick > span { position: absolute; left: 0; top: 100%; transform: translateX(-50%); padding-top: .25rem; font-size: .7rem; font-weight: 700; color: var(--tl-mute); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.1; text-align: center; }
.twh-tl-tick > span .zh { display: none; }
.twh-tl-tick:not(.is-major) > span { font-weight: 500; opacity: .75; }
.twh-tl-ev { position: absolute; left: calc(var(--p) * 100%); top: 60px; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0b1326; background: #fff; color: #0b1326; font: 800 .82rem/1 var(--sans); cursor: pointer; pointer-events: auto; box-shadow: 0 4px 14px -4px rgba(0,0,0,.7); transition: transform .18s, background .18s; }
.twh-tl-ev:hover, .twh-tl-ev.is-on { background: var(--tl-sun); transform: translate(-50%, -50%) scale(1.16); }
.twh-tl-ev:focus-visible { outline: 3px solid #4fd1c5; outline-offset: 2px; }
.twh-tl-cur { position: absolute; left: calc(var(--p) * 100%); top: 0; bottom: 0; width: 0; border-left: 2px solid var(--tl-sun); }
.twh-tl-cur > span { position: absolute; left: 6px; top: 6px; padding: .12rem .5rem; border-radius: 8px; background: var(--tl-sun); color: #1b1405; font-size: .72rem; font-weight: 800; white-space: nowrap; line-height: 1.25; }
.twh-tl-cur.is-flip > span { left: auto; right: 6px; }
.twh-tl-ends { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin: .55rem .2rem 0; font-size: .76rem; font-weight: 700; color: var(--tl-mute); line-height: 1.35; }
.twh-tl-ends > span:last-child { text-align: right; }
.twh-tl-ends .zh { display: block; font-weight: 500; }
.twh-tl-unit { text-align: center; font-weight: 500; opacity: .85; }
.twh-tl-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .9rem; }
.twh-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--tl-line, rgba(160,180,230,.22)); }
.twh-seg button { border: 0; border-radius: 13px; background: transparent; color: #9fb0cf; font: 700 .8rem/1.25 var(--sans); padding: .42rem .85rem; cursor: pointer; text-align: left; }
.twh-seg button small { display: block; font-family: var(--zh); font-size: .74rem; font-weight: 500; }
.twh-seg button[aria-pressed="true"] { background: #ffd36e; color: #1b1405; }
.twh-tl-zoom { display: inline-flex; gap: .4rem; }
.twh-tl .twh-btn { min-width: 2.5rem; height: 2.5rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(255,211,110,.45); background: transparent; color: #ffd36e; font: 800 .86rem/1 var(--sans); cursor: pointer; }
.twh-tl .twh-btn:hover:not(:disabled) { background: rgba(255,211,110,.12); }
.twh-tl .twh-btn:disabled { opacity: .35; cursor: default; }
.twh-tl-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .7rem; }
.twh-tl-li { display: flex; align-items: flex-start; gap: .6rem; width: 100%; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--tl-line); background: rgba(255,255,255,.03); color: #e8edf7; font: 500 .84rem/1.5 var(--sans); text-align: left; cursor: pointer; }
.twh-tl-li:hover, .twh-tl-li.is-on { border-color: var(--tl-sun); background: rgba(255,211,110,.08); }
.twh-tl-li i { flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #fff; color: #0b1326; font: 800 .76rem/1 var(--sans); }
.twh-tl-li.is-on i { background: var(--tl-sun); }
.twh-tl-li b { color: var(--tl-sun); }
.twh-tl-li .zh { display: block; color: var(--tl-mute); font-size: .82rem; }
.twh-tl-msg { margin: .8rem .2rem 0; min-height: 1.4em; font-size: .88rem; line-height: 1.55; color: #e8edf7; }
.twh-tl-msg:empty { display: none; }
.twh-tl-msg .zh { display: block; color: var(--tl-mute); }
.twh-tl-msg small { display: block; margin-top: .2rem; font-size: .74rem; color: var(--tl-mute); }
.twh-tl-msg b { color: var(--tl-sun); }

/* 直的時間軸（探坑旁邊）：現在在上、越下面越古老 */
.twh-tl-v { height: 100%; display: flex; flex-direction: column; }
.twh-tl-v .twh-tl-track { flex: 1; min-height: 300px; height: auto; cursor: default; touch-action: auto; overflow: visible; background: transparent; border: 0; }
.twh-tl-v .twh-tl-span { left: 0; width: 22px; top: calc((1 - var(--b)) * 100%); height: calc((var(--b) - var(--a)) * 100%); border-radius: 0; border-bottom: 1px solid #0b1326; }
.twh-tl-v .twh-tl-span > span { padding: 0; font-size: .72rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.twh-tl-v .twh-tl-span.is-thin > span { display: block; font-size: .62rem; }
.twh-tl-l1 { background: var(--twh-l1, #5b4630); } .twh-tl-l2 { background: var(--twh-l2, #9a7448); } .twh-tl-l3 { background: var(--twh-l3, #c2a26c); }
.twh-tl-l4 { background: var(--twh-l4, #8c5236); } .twh-tl-l5 { background: var(--twh-l5, #b3ab98); }
.twh-tl-v .twh-tl-band { left: 0; width: auto; right: 0; top: calc((1 - var(--b)) * 100%); bottom: auto; height: calc((var(--b) - var(--a)) * 100%); border-inline: 0; border-block: 1px solid rgba(255,211,110,.6); }
.twh-tl-v .twh-tl-tick { left: 22px; right: 0; width: auto; top: calc((1 - var(--p)) * 100%); bottom: auto; height: 0; border-left: 0; border-top: 1px dashed rgba(160,180,230,.2); }
.twh-tl-v .twh-tl-tick.is-major { border-top: 1px solid rgba(160,180,230,.42); top: calc((1 - var(--p)) * 100%); }
.twh-tl-v .twh-tl-tick.is-end > span, .twh-tl-v .twh-tl-tick.is-start > span { transform: translateY(-50%); padding: 0 .25rem; }
.twh-tl-v .twh-tl-tick > span { left: 8px; top: 0; transform: translateY(-50%); padding: 0 .25rem; background: #0a1022; font-size: .66rem; }
.twh-tl-v .twh-tl-tick:not(.is-major) > span { display: none; }
.twh-tl-v .twh-tl-cur { left: -4px; right: -4px; width: auto; top: calc((1 - var(--p)) * 100%); bottom: auto; height: 0; border-left: 0; border-top: 3px solid var(--tl-sun); transition: top .12s linear; }
.twh-tl-v .twh-tl-cur::before { content: ""; position: absolute; left: -2px; top: -8px; border: 6.5px solid transparent; border-left-color: var(--tl-sun); }
.twh-tl-v .twh-tl-cur > span { display: none; }
.twh-tl-v .twh-tl-ends { display: none; }

/* ── 3D 模型：考古探坑 ─────────────────────────────────────────────────── */
.twh-lab .al-stage { grid-template-columns: minmax(0, 1fr) 380px; }
.twh-lab .al-space { min-height: 620px; background: radial-gradient(70% 60% at 50% 40%, rgba(74,144,217,.12), transparent 70%); }
.twh-lab .al-space-cv { touch-action: none; }
.twh-lab .al-labels { pointer-events: none; }
.twh-lab .al-hint { left: auto; right: 1rem; text-align: right; }
.twh-badge { position: absolute; left: .8rem; top: .8rem; margin: 0; padding: .28rem .8rem; border-radius: 999px; background: rgba(6,10,22,.78); border: 1px solid rgba(255,211,110,.5); color: #ffd36e; font-size: .74rem; font-weight: 800; pointer-events: none; }
.al-lab.twh-lb { display: flex; align-items: center; gap: .45rem; padding: .18rem .7rem .2rem .2rem; border-radius: 999px; background: rgba(9,15,32,.84); border: 1px solid rgba(255,255,255,.22); line-height: 1.2; text-align: left; }
.al-lab.twh-lb b { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #ffd36e; color: #1b1405; font-size: .82rem; }
.al-lab.twh-lb span { font-size: .72rem; font-weight: 700; color: #fff; }
.al-lab.twh-lb .zh { margin-left: .35em; font-family: var(--zh); color: #ffd36e; }
.al-lab.twh-lb small { display: block; font-size: .64rem; font-weight: 500; color: #9fb0cf; }
.al-lab.twh-lb[hidden], .al-lab.twh-pin[hidden] { display: none; }
.al-lab.twh-lb-later { padding: .18rem .7rem; border-color: #ff9a8a; color: #ffd0c8; font-size: .72rem; }
.al-lab.twh-lb-later .zh { color: #ffd0c8; }
.twh-narrow .al-lab.twh-lb { padding: .12rem; }
.twh-narrow .al-lab.twh-lb span { display: none; }
.al-lab.twh-pin { pointer-events: auto; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%; border: 2px solid #ffd36e; background: rgba(9,15,32,.82); cursor: pointer; box-shadow: 0 0 0 0 rgba(255,211,110,.55); animation: twhPin 2.2s ease-out infinite; }
.al-lab.twh-pin i { font-style: normal; font-size: 1.05rem; line-height: 1; }
.al-lab.twh-pin.is-on { background: #ffd36e; animation: none; }
.al-lab.twh-pin:hover { background: rgba(255,211,110,.3); }
@keyframes twhPin { 0% { box-shadow: 0 0 0 0 rgba(255,211,110,.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255,211,110,0); } }
@media (prefers-reduced-motion: reduce) { .al-lab.twh-pin { animation: none; } .twh-tl-v .twh-tl-cur { transition: none; } }

.twh-aside { display: flex; flex-direction: column; gap: .5rem; }
.twh-aside > * { min-width: 0; }
.twh-aside .al-sky-k { margin-bottom: 0; }
.twh-age { margin: 0; font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: #fff; }
.twh-age .zh { display: block; margin-top: .15rem; font-family: var(--zh); font-size: 1.15rem; font-weight: 600; color: var(--al-sun); }
.twh-depth { margin: 0; font-size: .78rem; color: var(--al-mute); line-height: 1.45; }
.twh-depth .zh, .twh-lname .zh, .twh-msg .zh, .twh-card .zh { display: block; font-family: var(--zh); }
.twh-aside-grid { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .9rem; margin-top: .3rem; }
.twh-vtl { position: relative; min-height: 340px; padding-top: 1.5rem; }
.twh-vtl::before { content: attr(data-k); position: absolute; left: 0; top: 0; font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--al-mute); white-space: nowrap; }
.twh-aside-main { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.twh-lname { margin: 0; padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); font-size: .8rem; line-height: 1.45; color: var(--al-mute); }
.twh-lname b { display: block; margin-bottom: .2rem; color: #fff; font-size: .88rem; }
.twh-lname b .zh { color: var(--al-sun); }
.twh-k2 { margin-top: .3rem; }
.twh-finds { display: grid; gap: .32rem; }
.twh-find { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .36rem .6rem; border-radius: 10px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: var(--al-text); font: 700 .78rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.twh-find i { flex: none; font-style: normal; font-size: 1rem; }
.twh-find .zh { display: inline; margin-left: .4em; font-family: var(--zh); font-weight: 500; color: var(--al-mute); }
.twh-find:hover:not(:disabled) { border-color: var(--al-sun); }
.twh-find.is-on { border-color: var(--al-sun); background: rgba(255,211,110,.12); box-shadow: 0 0 0 1px var(--al-sun) inset; }
.twh-find:disabled { opacity: .32; cursor: default; }
.twh-find:disabled span { filter: blur(3.5px); }
.twh-find[hidden] { display: none; }
.twh-card { margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid rgba(255,211,110,.4); background: rgba(255,211,110,.06); font-size: .82rem; line-height: 1.5; color: var(--al-text); }
.twh-card:empty { display: none; }
.twh-card-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1rem; }
.twh-card-h i { font-style: normal; font-size: 1.3rem; }
.twh-card-h .zh { display: inline; margin-left: .4em; color: var(--al-sun); }
.twh-card dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto 1fr; gap: .15rem 1.2rem; }
.twh-card dt { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--al-sun); }
.twh-card dd { margin: 0; }
.twh-card dd .zh { color: var(--al-mute); }
.twh-dig-l { margin-top: 0; }
.twh-dig-l small { margin-left: .6em; font-weight: 500; letter-spacing: 0; text-transform: none; }
.twh-btn-d { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,211,110,.45); background: transparent; color: var(--al-sun); font-family: var(--sans); font-size: .86rem; font-weight: 800; cursor: pointer; }
.twh-btn-d:hover:not(:disabled) { background: rgba(255,211,110,.12); }
.twh-btn-d:disabled, .twh-down:disabled { opacity: .4; cursor: default; }
.twh-msg { margin: .8rem 0 0; min-height: 3em; font-size: .88rem; line-height: 1.55; color: var(--al-text); }
.twh-msg .zh { color: var(--al-mute); }
.twh-credit { margin: 0; padding: 0 1.3rem 1.1rem; font-size: .74rem; line-height: 1.6; color: #7f90b0; }
.twh-lab.al-nogl .al-sky { display: flex; }
.twh-lab.al-nogl .al-controls { display: block; }
.twh-lab.al-nogl .al-space { min-height: 150px; aspect-ratio: auto; border-right: 0; border-bottom: 1px solid var(--al-line); }
.twh-lab.al-nogl .twh-badge { display: none; }
.al-lg-twh0 i, .al-lg-twh1 i, .al-lg-twh2 i, .al-lg-twh3 i, .al-lg-twh4 i, .al-lg-twh5 i { border: 1.5px solid #16223f; border-radius: 3px; }
.al-lg-twh1 i { background: #5b4630; } .al-lg-twh2 i { background: #9a7448; } .al-lg-twh3 i { background: #c2a26c; }
.al-lg-twh4 i { background: #8c5236; } .al-lg-twh5 i { background: #b3ab98; } .al-lg-twh0 i { background: #8f8676; }
@media (max-width: 1000px) {
  .twh-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; }
  .twh-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .twh-lab .al-space { aspect-ratio: 16 / 10; min-height: 380px; max-height: 80vh; border-right: 0; border-bottom: 1px solid var(--al-line); }
  .twh-finds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .twh-lab .al-space { aspect-ratio: 1 / 1; min-height: 0; max-height: 72vh; }
  .twh-lab .al-hint { display: none; }
  .twh-badge { font-size: .66rem; max-width: calc(100% - 4.4rem); }
  .twh-aside-grid { grid-template-columns: 74px minmax(0, 1fr); gap: .7rem; }
  .twh-finds { grid-template-columns: 1fr; }
  .twh-age { font-size: 1.55rem; }
  .twh-card dl { display: block; }
  .twh-card dt { margin-top: .5rem; }
  .twh-lab .al-row-main > button { flex: 1 1 100%; justify-content: center; }
}

/* ── 卡片小圖、首頁 ────────────────────────────────────────────────────── */
.twh-ico { background: radial-gradient(circle at 50% 40%, #1b2f5c, #070b17); overflow: hidden; }
.twh-ico-t { font-size: 1.7rem; line-height: 1; }
.twh-lc-ico { background: radial-gradient(circle at 50% 38%, #1b2f5c, #070b17); }
.twh-progress { font-weight: 700; color: var(--brand-dk); }
.twh-intro-ic { float: right; margin: 0 0 .8rem 1.2rem; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 26px; background: radial-gradient(circle at 50% 38%, #1b2f5c, #070b17); box-shadow: 0 14px 34px -18px rgba(10,20,50,.7); }
.twh-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.twh-guide { padding: 1.3rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.twh-guide-ic { margin: 0 0 .5rem; font-size: 2rem; line-height: 1; }
.twh-guide h3 { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.22rem; line-height: 1.3; }
.twh-guide h3 .zh { display: block; font-family: var(--zh); font-size: 1.02rem; font-weight: 600; color: var(--gold-dk); }
.twh-guide p { margin: 0; font-size: .95rem; line-height: 1.65; }

/* ── 小互動共用 ────────────────────────────────────────────────────────── */
.twh-note { margin: 1rem 0 0; max-width: 860px; font-size: .88rem; line-height: 1.65; color: var(--ink-soft); }
.twh-note .zh { display: block; }
.twh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--brand-dk); font-family: var(--sans); font-size: .9rem; font-weight: 800; cursor: pointer; transition: transform .18s, border-color .18s; }
.twh-btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.twh-btn-gold { background: var(--gold); border-color: var(--gold); color: #1b1405; }
.twh-btn-gold:hover { background: var(--gold-dk); color: #fff; }
.twh-btn[hidden] { display: none; }

/* 這是哪一種證據？ */
.twh-sort { margin-top: 1.4rem; max-width: 860px; padding: 1.3rem 1.4rem 1.4rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.twh-sort-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; }
.twh-sort-top p { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .06em; color: var(--ink-soft); }
.twh-sort-sc b { color: var(--brand-dk); font-size: 1rem; font-variant-numeric: tabular-nums; }
.twh-sort-card { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; padding: 1.2rem 1.4rem; border-radius: 18px; background: linear-gradient(120deg, var(--cream), #fff); border: 1px solid var(--line); }
.twh-sort-card[hidden], .twh-sort-bins[hidden], .twh-sort-done[hidden] { display: none; }
.twh-sort-ic { flex: none; font-size: 3rem; line-height: 1; }
.twh-sort-t { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.twh-sort-t .zh { display: block; font-family: var(--zh); font-size: 1.15rem; font-weight: 600; color: var(--gold-dk); }
.twh-sort-bins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.twh-bin { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem .6rem; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-family: var(--sans); color: var(--ink); cursor: pointer; text-align: center; transition: transform .18s, border-color .18s, background .18s; }
.twh-bin i { font-style: normal; font-size: 1.9rem; line-height: 1; }
.twh-bin b { font-size: 1.02rem; }
.twh-bin b .zh { display: block; font-family: var(--zh); color: var(--gold-dk); }
.twh-bin small { font-size: .76rem; line-height: 1.35; color: var(--ink-soft); }
.twh-bin small .zh { display: block; font-family: var(--zh); }
.twh-bin:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); }
.twh-bin.is-right { border-color: #2e9d6a; background: #eaf7f0; }
.twh-bin.is-wrong { border-color: #d98a7c; background: #fbeeeb; opacity: .6; }
.twh-bin:disabled { cursor: default; }
.twh-sort-msg { margin: 1rem 0 0; min-height: 3.2em; font-size: .96rem; line-height: 1.6; }
.twh-sort-msg .zh { display: block; color: var(--ink-soft); }
.twh-sort-msg > b { display: inline-block; margin-right: .5em; color: #1f7a50; }
.twh-sort-msg > b .zh { display: inline; margin-left: .3em; color: #1f7a50; }
.twh-sort-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; min-height: 2.6rem; }
.twh-sort-done { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.twh-sort-col { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--cream); }
.twh-sort-col > p { margin: 0 0 .5rem; font-weight: 800; }
.twh-sort-col > p i { font-style: normal; margin-right: .4em; }
.twh-sort-col > p .zh { margin-left: .4em; font-family: var(--zh); color: var(--gold-dk); }
.twh-sort-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; line-height: 1.4; }
.twh-sort-col li span[aria-hidden] { margin-right: .4em; }
.twh-sort-col li .zh { display: block; padding-left: 1.7em; font-family: var(--zh); font-size: .86rem; color: var(--ink-soft); }

/* 兩個人說的不一樣 */
.twh-two { margin-top: 1.4rem; max-width: 940px; }
.twh-two-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.twh-two-rec { padding: 1.2rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-top: 5px solid #4a90d9; box-shadow: var(--shadow-sm); }
.twh-two-b { border-top-color: #e2a23c; }
.twh-two-k { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.twh-two-k .zh { margin-left: .5em; font-family: var(--zh); letter-spacing: 0; }
.twh-two-rec h3 { margin: .3rem 0 .7rem; font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; }
.twh-two-rec h3 .zh { display: block; font-family: var(--zh); font-size: .98rem; font-weight: 600; color: var(--gold-dk); }
.twh-two-rec blockquote { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: var(--cream); font-size: 1rem; line-height: 1.6; }
.twh-two-rec blockquote .zh { display: block; margin-top: .4rem; font-family: var(--zh); color: var(--ink-soft); }
.twh-two-rec mark { background: #ffe9a8; padding: 0 .15em; border-radius: 3px; color: inherit; }
.twh-two-meta { margin: .7rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }
.twh-two-meta .zh { display: block; font-family: var(--zh); }
.twh-two-q { margin: 1.3rem 0 .8rem; font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.twh-two-q .zh { display: block; font-family: var(--zh); font-weight: 600; color: var(--ink-soft); }
.twh-two-asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.twh-ask { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 700 .9rem/1.35 var(--sans); text-align: left; cursor: pointer; transition: border-color .18s, transform .18s; }
.twh-ask i { flex: none; font-style: normal; font-size: 1.5rem; }
.twh-ask .zh { display: block; font-family: var(--zh); font-weight: 500; color: var(--ink-soft); }
.twh-ask:hover { border-color: var(--gold); transform: translateY(-2px); }
.twh-ask.is-seen { background: var(--cream); }
.twh-ask.is-on { border-color: var(--brand-dk); }
.twh-two-out { margin-top: 1rem; padding: 1.1rem 1.3rem; border-radius: 16px; border: 1px solid var(--line); background: #fff; min-height: 9rem; }
.twh-two-out p { margin: 0; font-size: .95rem; line-height: 1.6; }
.twh-two-out .zh { display: block; font-family: var(--zh); color: var(--ink-soft); }
.twh-two-hint { color: var(--ink-soft); }
.twh-two-oh { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.05rem !important; }
.twh-two-oh span[aria-hidden] { font-size: 1.5rem; }
.twh-two-can, .twh-two-cant { margin-top: .7rem !important; padding-left: .9rem; border-left: 4px solid #2e9d6a; }
.twh-two-cant { border-left-color: #c9806f; }
.twh-two-can b, .twh-two-cant b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.twh-two-close { margin-top: 1rem; padding: 1.2rem 1.4rem; border-radius: 16px; background: linear-gradient(120deg, #13224a, #0b1326); color: #e8edf7; }
.twh-two-close[hidden] { display: none; }
.twh-two-ck { margin: 0 0 .6rem; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd36e; }
.twh-two-ck .zh { margin-left: .6em; font-family: var(--zh); letter-spacing: 0; }
.twh-two-close ul { margin: 0 0 .8rem; padding-left: 1.2em; display: grid; gap: .4rem; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.twh-two-close li .zh { display: block; font-family: var(--zh); font-weight: 500; color: #9fb0cf; }
.twh-two-close > p:last-child { margin: 0; font-size: .92rem; line-height: 1.6; }
.twh-two-close > p:last-child .zh { display: block; font-family: var(--zh); color: #9fb0cf; }

/* ── 三張固定的卡 ──────────────────────────────────────────────────────── */
.twh-src { display: inline-block; margin-top: .7rem; font-size: .8rem; font-weight: 700; color: var(--brand-dk); overflow-wrap: anywhere; }
.twh-hw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.twh-hw { display: flex; flex-direction: column; padding: 1.3rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--gold); box-shadow: var(--shadow-sm); }
.twh-hw-k { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.twh-hw-k i { font-style: normal; font-size: 1.3rem; }
.twh-hw-k .zh { margin-left: .5em; font-family: var(--zh); letter-spacing: 0; }
.twh-hw h3 { margin: .4rem 0 .6rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.twh-hw h3 .zh { display: block; font-family: var(--zh); font-size: 1.02rem; font-weight: 600; color: var(--ink-soft); }
.twh-hw p { margin: 0; font-size: .94rem; line-height: 1.65; }
.twh-hw p .zh { display: block; margin-top: .25rem; font-family: var(--zh); color: var(--ink-soft); }
.twh-hw-w { margin-top: .8rem !important; padding: .7rem .9rem; border-radius: 12px; background: var(--cream); font-size: .88rem !important; }
.twh-hw-w b { display: block; margin-bottom: .2rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dk); }
.twh-hw .twh-src { margin-top: auto; padding-top: .8rem; }
.twh-views { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.twh-view { padding: 1.3rem 1.4rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.twh-view h3 { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.twh-view h3 .zh { display: block; font-family: var(--zh); font-size: 1.05rem; font-weight: 600; color: var(--gold-dk); }
.twh-sides { display: grid; gap: .9rem; }
.twh-sides-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.twh-sides-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.twh-side { display: flex; flex-direction: column; padding: 1rem 1.1rem; border-radius: 14px; background: var(--cream); border-top: 4px solid #4a90d9; }
.twh-side:nth-child(2) { border-top-color: #e2a23c; }
.twh-side:nth-child(3) { border-top-color: #4fb477; }
.twh-side p { margin: 0; font-size: .94rem; line-height: 1.6; }
.twh-side p .zh { display: block; margin-top: .25rem; font-family: var(--zh); color: var(--ink-soft); }
.twh-side-k { margin-bottom: .5rem !important; font-size: .76rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.twh-side-k .zh { display: inline !important; margin-left: .5em; letter-spacing: 0; }
.twh-side .twh-src { margin-top: auto; padding-top: .7rem; }
.twh-view-n { margin: 1rem 0 0; padding-left: 1rem; border-left: 4px solid var(--gold); font-size: .94rem; line-height: 1.65; }
.twh-view-n .zh { display: block; margin-top: .25rem; font-family: var(--zh); color: var(--ink-soft); }
.twh-phs { list-style: none; counter-reset: twhph; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.twh-ph { counter-increment: twhph; display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.twh-ph .spk { flex: none; }
.twh-ph-b { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.twh-ph-en { font-family: var(--serif); font-size: 1.08rem; line-height: 1.45; }
.twh-ph-en::before { content: counter(twhph) ". "; color: var(--gold-dk); font-weight: 700; }
.twh-ph-en b { background: linear-gradient(transparent 62%, #ffe9a8 62%); }
.twh-ph-zh { font-family: var(--zh); font-size: .96rem; color: var(--ink); }
.twh-ph-n { margin-top: .2rem; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.twh-ph-n .zh { display: block; font-family: var(--zh); }

/* ── 給老師的提醒、延伸閱讀、出處（照看得見的數學）──────────────────────── */
.twh-notes { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
.twh-notes li { position: relative; padding: 1rem 1.2rem 1rem 3.1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: .96rem; line-height: 1.65; box-shadow: var(--shadow-sm); }
.twh-notes li::before { content: "\270E"; position: absolute; left: 1.05rem; top: .9rem; font-size: 1.25rem; color: var(--gold-dk); }
.twh-notes li .zh { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; }
.twh-links { display: grid; gap: 1rem; margin-top: 1.4rem; max-width: 860px; }
.twh-link { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.2rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
a.twh-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); color: var(--ink); }
.twh-link-soon { border-style: dashed; background: linear-gradient(120deg, #fff, var(--cream)); }
.twh-link-ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 50% 38%, #1b2f5c, #070b17); font-size: 2rem; }
.twh-link-b { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.twh-link-k { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.twh-link-b b { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.twh-link-zh { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.twh-link-n { margin-top: .4rem; font-size: .92rem; line-height: 1.6; }
.twh-link-n .zh { display: block; margin-top: .2rem; color: var(--ink-soft); }
.twh-link-go { align-self: flex-start; margin-top: .6rem; font-weight: 800; font-size: .82rem; color: var(--brand-dk); background: var(--brand-lt); border-radius: 999px; padding: .38rem .85rem; }
.twh-link-soon .twh-link-go { color: var(--ink-soft); background: var(--cream); border: 1px solid var(--line); }
.twh-sources { margin: 0 0 2.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.twh-sources .sub-head { margin-top: 0; }
.twh-sources > .muted { margin: .2rem 0 .8rem; font-size: .9rem; }
.twh-sources ol { margin: 0; padding-left: 1.3em; display: grid; gap: .55rem; }
.twh-sources li { font-size: .92rem; line-height: 1.55; }
.twh-sources li > span { display: block; }
.twh-sources li .zh { display: block; color: var(--ink-soft); font-size: .88rem; }
.twh-sources a { font-weight: 700; font-size: .86rem; color: var(--brand-dk); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .twh-guides, .twh-sides-3 { grid-template-columns: 1fr; }
  .twh-two-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .twh-notes, .twh-hw-grid, .twh-phs, .twh-sides-2, .twh-two-pair, .twh-tl-list { grid-template-columns: 1fr; }
  .twh-tl-wrap { padding: 1rem .8rem .9rem; border-radius: 18px; }
  .twh-tl-ctl { flex-direction: column; align-items: stretch; }
  .twh-seg { display: grid; grid-template-columns: 1fr 1fr; }
  .twh-tl-zoom { justify-content: flex-end; }
  .twh-tl-unit { display: none; }
  .twh-tl-focus > span .zh { display: none; }
}
@media (max-width: 560px) {
  .twh-link { flex-direction: column; }
  .twh-intro-ic { width: 80px; height: 80px; } .twh-intro-ic svg { width: 58px; height: 58px; }
  .twh-sort { padding: 1rem .9rem 1.1rem; }
  .twh-sort-bins, .twh-sort-done { grid-template-columns: 1fr; }
  .twh-bin { flex-direction: row; justify-content: flex-start; text-align: left; gap: .8rem; padding: .7rem 1rem; }
  .twh-bin b .zh { display: inline; margin-left: .4em; }
  .twh-sort-t { font-size: 1.25rem; }
  .twh-sort-ic { font-size: 2.4rem; }
  .twh-two-asks { grid-template-columns: 1fr; }
}

/* ── 第二課：遺址地圖（SVG，不需要 WebGL）──────────────────────────────── */
.twh-sites-lab { --twh-s1: #e9c46a; --twh-s2: #8fd0ff; --twh-s3: #8fe0a8; --twh-s4: #f4a27c; --twh-s5: #c7a6f0; --twh-s6: #f0e3a6; }
.twh-map-space { display: grid; place-items: center; min-height: 640px; padding: 2.6rem .6rem .8rem; background: radial-gradient(80% 70% at 50% 45%, #123058 0%, #0a1830 70%); }
.twh-map { width: 100%; max-width: 560px; }
.twh-map-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.twh-land path { fill: #5f8f6a; stroke: #d6ead8; stroke-width: 1.2; stroke-linejoin: round; }
.twh-scalebar path, .twh-north path { fill: none; stroke: #c9d6ee; stroke-width: 1.4; }
.twh-north path { fill: #c9d6ee; }
.twh-scalebar text, .twh-north text { fill: #c9d6ee; font-size: 11px; font-weight: 700; }
.twh-site { cursor: pointer; outline: none; }
.twh-site-lead { stroke: rgba(255,255,255,.55); stroke-width: 1.2; fill: none; }
.twh-site-dot { fill: #fff; }
.twh-site-halo { fill: rgba(255,211,110,0); transition: fill .25s; }
.twh-site-c { fill: #1b2b4d; stroke: #8fa3c8; stroke-width: 2; transition: fill .25s, stroke .25s; }
.twh-site-n { fill: #c9d6ee; font-size: 13px; font-weight: 800; pointer-events: none; }
.twh-site-t { fill: #e8edf7; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #0a1830; stroke-width: 3px; pointer-events: none; }
.twh-site-t .zh { font-family: var(--zh); font-weight: 600; fill: #ffd36e; }
.twh-site.is-lit .twh-site-c { fill: #ffd36e; stroke: #fff3c9; }
.twh-site.is-lit .twh-site-n { fill: #1b1405; }
.twh-site.is-lit .twh-site-halo { fill: rgba(255,211,110,.28); }
.twh-site.is-unknown .twh-site-c { stroke-dasharray: 4 3; }
.twh-site.is-sel .twh-site-c { stroke: #4fd1c5; stroke-width: 4; }
.twh-site:focus-visible .twh-site-c { stroke: #4fd1c5; stroke-width: 4; }
.twh-site:hover .twh-site-c { stroke: #fff; }
.twh-no-names .twh-site-t { display: none; }
.twh-site-card { font-size: .82rem; line-height: 1.5; color: var(--al-text); }
.twh-site-card .zh { display: block; font-family: var(--zh); color: var(--al-mute); }
.twh-site-hint { margin: 0; padding: .8rem .9rem; border-radius: 12px; border: 1px dashed var(--al-line); color: var(--al-mute); }
.twh-site-k { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--al-sun); }
.twh-site-k .zh { display: inline; margin-left: .5em; color: var(--al-sun); }
.twh-site-card h3 { margin: .15rem 0 .35rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; color: #fff; }
.twh-site-card h3 .zh { font-size: 1.02rem; font-weight: 600; color: var(--al-sun); }
.twh-site-tag { margin: 0 0 .6rem; }
.twh-site-lk { margin: 0 0 .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--al-mute); }
.twh-site-layers { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .25rem; }
.twh-site-layers li { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem .5rem; border-radius: 9px; border: 1px solid transparent; font-size: .76rem; line-height: 1.4; color: var(--al-mute); }
.twh-site-layers li i { flex: none; width: .7rem; height: .7rem; margin-top: .3rem; border-radius: 3px; background: var(--c); }
.twh-site-layers li b { display: block; color: var(--al-text); }
.twh-site-layers li b .zh { display: inline; margin-left: .4em; color: var(--al-text); font-weight: 600; }
.twh-site-layers li .zh { display: inline; margin-left: .4em; }
.twh-site-layers li.is-on { border-color: var(--al-sun); background: rgba(255,211,110,.12); }
.twh-site-layers li.is-rep b::after { content: " ★"; color: var(--al-sun); }
.twh-site-found { margin: 0 0 .5rem; }
.twh-site-found b { display: block; font-size: .68rem; letter-spacing: .04em; color: var(--al-sun); }
.twh-site-found b .zh { display: inline; margin-left: .5em; color: var(--al-sun); }
.twh-site-src { font-size: .74rem; font-weight: 700; color: #8fd0ff; overflow-wrap: anywhere; }
.twh-tl-s1 { background: var(--twh-s1, #e9c46a); } .twh-tl-s2 { background: var(--twh-s2, #8fd0ff); } .twh-tl-s3 { background: var(--twh-s3, #8fe0a8); }
.twh-tl-s4 { background: var(--twh-s4, #f4a27c); } .twh-tl-s5 { background: var(--twh-s5, #c7a6f0); } .twh-tl-s6 { background: var(--twh-s6, #f0e3a6); }
.twh-tl-v .twh-tl-span[class*="twh-tl-s"] { border-bottom: 0; outline: 1px solid #0b1326; }
.twh-jumps .twh-btn-d { flex-direction: column; align-items: flex-start; gap: 0; padding: .4rem .95rem; line-height: 1.25; }
.twh-jumps .twh-btn-d small { font-family: var(--zh); font-size: .72rem; font-weight: 500; color: var(--al-mute); }
.twh-jumps .twh-btn-d[aria-pressed="true"] { background: var(--al-sun); color: #1b1405; }
.twh-jumps .twh-btn-d[aria-pressed="true"] small { color: #1b1405; }
.al-lg-twhlit i { background: #ffd36e; border: 2px solid #fff3c9; border-radius: 50%; }
.al-lg-twhdim i { background: #1b2b4d; border: 2px solid #8fa3c8; border-radius: 50%; }
.al-lg-twhunk i { background: #1b2b4d; border: 2px dashed #8fa3c8; border-radius: 50%; }

/* 看一件文物：人獸形玉玦 */
.twh-jade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; margin-top: 1.4rem; border-radius: 22px; overflow: hidden; background: #0b1326; color: #e8edf7; box-shadow: 0 24px 60px -34px rgba(10,20,50,.7); }
.twh-jade-stage { position: relative; min-height: 460px; background: radial-gradient(70% 60% at 50% 45%, rgba(111,174,132,.2), transparent 70%); }
.twh-jade-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.twh-jade-stage .al-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.twh-jade-stage .al-home { position: absolute; right: .8rem; top: .8rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(160,180,230,.3); background: rgba(12,20,40,.75); color: #e8edf7; font-size: 1.25rem; cursor: pointer; }
.twh-jade .al-lab.twh-pin i { font-style: normal; font-size: .9rem; font-weight: 800; color: #ffd36e; }
.twh-jade .al-lab.twh-pin.is-on i { color: #1b1405; }
.twh-jade-nomsg { display: none; position: absolute; inset: 0; margin: 0; padding: 2rem; place-content: center; text-align: center; color: #9fb0cf; }
.twh-jade-nogl .twh-jade-nomsg { display: grid; }
.twh-jade-nogl canvas, .twh-jade-nogl .al-home, .twh-jade-nogl .twh-badge { display: none; }
.twh-jade-side { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; border-left: 1px solid rgba(160,180,230,.16); }
.twh-jade-side .zh { font-family: var(--zh); }
.twh-jade-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
.twh-jade-facts dt { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffd36e; }
.twh-jade-facts dt .zh { margin-left: .5em; letter-spacing: 0; }
.twh-jade-facts dd { margin: .1rem 0 0; font-size: .86rem; line-height: 1.45; }
.twh-jade-facts dd .zh { display: block; color: #9fb0cf; }
.twh-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.twh-spot { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-radius: 12px; border: 1px solid rgba(160,180,230,.22); background: rgba(255,255,255,.04); color: #e8edf7; font: 700 .82rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.twh-spot i { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #ffd36e; color: #ffd36e; font-style: normal; font-size: .8rem; }
.twh-spot .zh { display: block; font-weight: 500; color: #9fb0cf; }
.twh-spot:hover, .twh-spot.is-on { border-color: #ffd36e; background: rgba(255,211,110,.1); }
.twh-spot.is-on i { background: #ffd36e; color: #1b1405; }
.twh-jade-out { margin: 0; padding: .8rem .9rem; border-radius: 12px; background: rgba(255,211,110,.07); border: 1px solid rgba(255,211,110,.35); font-size: .9rem; line-height: 1.55; min-height: 7.5em; }
.twh-jade-out b { display: block; margin-bottom: .2rem; color: #fff; }
.twh-jade-out b .zh { display: inline; margin-left: .5em; color: #ffd36e; }
.twh-jade-out .zh { display: block; color: #9fb0cf; }
.twh-jade .twh-src { margin-top: auto; color: #8fd0ff; }
@media (max-width: 1000px) {
  .twh-map-space { min-height: 0; }
}
@media (max-width: 860px) {
  .twh-jade { grid-template-columns: 1fr; }
  .twh-jade-stage { min-height: 0; aspect-ratio: 1 / 1; max-height: 70vh; }
  .twh-jade-side { border-left: 0; border-top: 1px solid rgba(160,180,230,.16); }
}
@media (max-width: 620px) {
  .twh-map-space { padding: 2.6rem .2rem .4rem; }
  .twh-site-t { font-size: 13px; }
  .twh-jade-facts, .twh-spots { grid-template-columns: 1fr; }
  .twh-jumps .twh-btn-d { flex: 1 1 40%; }
}
.twh-sites-lab .al-space.twh-map-space { aspect-ratio: auto; max-height: none; }
@media (max-width: 620px) { .twh-sites-lab .twh-vtl::before { font-size: .58rem; } .twh-sites-lab .twh-aside-grid { grid-template-columns: 64px minmax(0, 1fr); } }

/* ── 第三課：族群地圖（名字標籤，不是界線）與南島語族的世界 ─────────────────── */
.twh-people { cursor: pointer; outline: none; }
.twh-people-dot { fill: #9fb0cf; stroke: #0a1830; stroke-width: 1.5; transition: fill .25s; }
.twh-people-t { fill: #9fb0cf; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #0a1830; stroke-width: 3px; transition: fill .25s, opacity .25s; opacity: .72; }
.twh-people-t .zh { font-family: var(--zh); font-weight: 600; }
.twh-people.is-lit .twh-people-t { fill: #fff; opacity: 1; }
.twh-people.is-lit .twh-people-t .zh { fill: #ffd36e; }
.twh-people.is-lit .twh-people-dot { fill: #ffd36e; }
.twh-people.is-sel .twh-people-dot { fill: #4fd1c5; r: 6; }
.twh-people.is-sel .twh-people-t { text-decoration: underline; text-decoration-color: #4fd1c5; }
.twh-people:focus-visible .twh-people-t { fill: #4fd1c5; opacity: 1; }
.twh-people:hover .twh-people-t { opacity: 1; }
.twh-peoples-lab .twh-aside .twh-site-card { margin-top: .3rem; }
.twh-people-dl { margin: 0 0 .6rem; display: grid; gap: .1rem; }
.twh-people-dl dt { margin-top: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--al-sun); }
.twh-people-dl dt .zh { display: inline; margin-left: .5em; color: var(--al-sun); }
.twh-people-dl dd { margin: 0; }
.twh-people-not { margin: 0 0 .6rem; padding: .5rem .7rem; border-radius: 10px; border: 1px dashed rgba(255,211,110,.5); }
.twh-world { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-top: 1.4rem; border-radius: 22px; overflow: hidden; background: #0b1326; color: #e8edf7; box-shadow: 0 24px 60px -34px rgba(10,20,50,.7); }
.twh-world-map { padding: .8rem; background: radial-gradient(80% 70% at 40% 45%, #123058 0%, #0a1830 75%); display: grid; place-items: center; }
.twh-world-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.twh-world-land path { fill: #3f6f52; stroke: #9cc9a8; stroke-width: .7; stroke-linejoin: round; }
.twh-world-eq { stroke: rgba(201,214,238,.35); stroke-dasharray: 4 5; fill: none; }
.twh-world-lines path { stroke: #ffd36e; stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.twh-wp { cursor: pointer; outline: none; }
.twh-wp circle { fill: #ffd36e; stroke: #0a1830; stroke-width: 2; }
.twh-wp.is-home circle { fill: #4fd1c5; }
.twh-wp text { fill: #e8edf7; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #0a1830; stroke-width: 3px; }
.twh-wp text .zh { font-family: var(--zh); fill: #ffd36e; }
.twh-wp.is-on circle, .twh-wp:focus-visible circle { stroke: #fff; stroke-width: 3; }
.twh-world-side { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; border-left: 1px solid rgba(160,180,230,.16); }
.twh-world-out { margin: 0; padding: .8rem .9rem; border-radius: 12px; background: rgba(255,211,110,.07); border: 1px solid rgba(255,211,110,.35); font-size: .9rem; line-height: 1.55; min-height: 9em; }
.twh-world-out b { display: block; margin-bottom: .2rem; color: #fff; }
.twh-world-out b .zh { display: inline; margin-left: .5em; color: #ffd36e; }
.twh-world-out .zh { display: block; font-family: var(--zh); color: #9fb0cf; }
.twh-world-km { margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid rgba(160,180,230,.2); font-size: .82rem; }
.twh-world-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.twh-world-list .twh-spot { width: 100%; }
.twh-world-list .zh { font-family: var(--zh); }
@media (max-width: 900px) { .twh-world { grid-template-columns: 1fr; } .twh-world-side { border-left: 0; border-top: 1px solid rgba(160,180,230,.16); } }
@media (max-width: 560px) { .twh-world-list { grid-template-columns: 1fr; } .twh-people-t { font-size: 13px; } }
@media (max-width: 560px) {
  .twh-wp text { font-size: 21px; stroke-width: 4px; }
  .twh-wp text .zh { display: none; }
  .twh-wp circle { r: 9px; }
  .twh-world-lines path { stroke-width: 3; }
}

/* ── 第四課：老地圖展示台 ─────────────────────────────────────────────── */
.twh-mapstage { position: relative; padding: 3.2rem 1rem 1rem; place-items: start center; }
.twh-mapview { position: sticky; top: 88px; }
.twh-mapview { width: 100%; max-width: 620px; overflow: hidden; border-radius: 10px; background: #1a1408; box-shadow: 0 16px 40px -20px rgba(0,0,0,.8); }
.twh-mapframe { position: relative; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--z, 1)); transform-origin: center; transition: transform .25s ease; touch-action: none; }
.twh-mapimg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; background: #e8d7a8; }
.twh-hots { position: absolute; inset: 0; }
.twh-hot { position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1))); width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid #fff3c9; background: rgba(27,20,5,.78); color: #ffd36e; font: 800 .85rem/1 var(--sans); cursor: pointer; box-shadow: 0 0 0 0 rgba(255,211,110,.55); animation: twhPin 2.2s ease-out infinite; }
.twh-hot i { font-style: normal; }
.twh-hot.is-on { background: #ffd36e; color: #1b1405; animation: none; }
.twh-mapzoom { position: absolute; right: .8rem; top: .8rem; display: flex; gap: .3rem; }
.twh-mapzoom .twh-btn-d { width: 2.4rem; height: 2.4rem; justify-content: center; padding: 0; font-size: 1.1rem; }
.twh-mapdots { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; justify-content: center; }
.twh-mapdot { display: flex; flex-direction: column; align-items: center; padding: .35rem .6rem; border-radius: 10px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: var(--al-text); font: 800 .82rem/1.2 var(--sans); cursor: pointer; }
.twh-mapdot small { font-size: .64rem; font-weight: 500; color: var(--al-mute); max-width: 8rem; text-align: center; }
.twh-mapdot.is-on { background: var(--al-sun); border-color: var(--al-sun); color: #1b1405; }
.twh-mapdot.is-on small { color: #1b1405; }
.twh-today { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--al-line); }
.twh-today-svg { display: block; width: 100%; max-width: 150px; height: auto; margin: .3rem auto 0; }
.twh-today-n { margin: .3rem 0 0; font-size: .66rem; color: var(--al-mute); text-align: center; }
.twh-today-n .zh { display: block; font-family: var(--zh); }
.twh-no-today .twh-today { display: none; }
.twh-maps-lab .twh-age { font-size: 1.6rem; }
@media (max-width: 620px) { .twh-mapdot small { display: none; } .twh-mapstage { padding: 2.8rem .4rem .6rem; } }
.al-lg-twhhot i { background: rgba(27,20,5,.78); border: 2px solid #fff3c9; border-radius: 50%; }
.al-lg-twhtoday i { background: transparent; border: 2px solid #c9d6ef; border-radius: 3px; }

/* ── 第五課：熱蘭遮城 3D 示意＋版畫＋事件；季風航路圖 ───────────────────────── */
.twh-fort-lab .al-space { position: sticky; top: 84px; align-self: start; height: min(640px, calc(100vh - 110px)); min-height: 440px; }
@media (max-width: 1020px) { .twh-fort-lab .al-space { position: relative; top: 0; height: auto; min-height: 340px; } .twh-fort-lab .al-sky { display: block; } }
.twh-print { margin: 0 0 .9rem; }
.twh-print-frame { position: relative; border-radius: 8px; overflow: hidden; background: #e8dcc4; }
.twh-print-frame img { display: block; width: 100%; height: auto; }
.twh-print-hots { position: absolute; inset: 0; }
.twh-print .twh-hot { width: 1.6rem; height: 1.6rem; font-size: .72rem; }
.twh-print figcaption { margin-top: .4rem; font-size: .7rem; line-height: 1.45; color: var(--al-mute); }
.twh-print figcaption .zh { display: block; font-family: var(--zh); }
.twh-print figcaption a { color: var(--al-sun); }
.twh-evs { display: grid; gap: .3rem; }
.twh-ev { display: flex; gap: .5rem; align-items: baseline; padding: .32rem .5rem; border-radius: 8px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font: 600 .74rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.twh-ev b { flex: none; color: var(--al-sun); font-size: .78rem; }
.twh-ev .zh { display: block; color: var(--al-mute); font-weight: 500; font-family: var(--zh); }
.twh-ev:hover, .twh-ev.is-on { border-color: var(--al-sun); background: rgba(255,211,110,.1); }
.twh-spots { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; margin: 0; padding: 0; list-style: none; }
.twh-pin i { font-style: normal; }
.twh-fort-lab .twh-pin { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid #fff3c9; background: rgba(27,20,5,.8); color: #ffd36e; font: 800 .8rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; }
.twh-fort-lab .twh-pin.is-on { background: #ffd36e; color: #1b1405; }
.twh-site-src { font-size: .7rem; color: var(--al-mute); }
.twh-trade { margin-top: 1.4rem; border-radius: 22px; overflow: hidden; background: #0b1326; color: #e8edf7; box-shadow: 0 24px 60px -34px rgba(10,20,50,.7); }
.twh-trade-seasons { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem 1rem .4rem; }
.twh-trade-seasons .twh-btn-d[aria-pressed="true"] { background: #ffd36e; color: #1b1405; border-color: #ffd36e; }
.twh-trade-seasons .twh-btn-d[aria-pressed="true"] .zh { color: #1b1405; }
.twh-trade-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.twh-trade-map { padding: .4rem .6rem .8rem; }
.twh-trade-svg { display: block; width: 100%; height: auto; }
.twh-trade-side { padding: .8rem 1rem 1rem; border-left: 1px solid rgba(160,180,230,.16); }
.twh-trade-out { min-height: 7rem; font-size: .86rem; line-height: 1.5; }
.twh-trade-out .zh { display: block; color: #9fb0cf; font-family: var(--zh); }
.twh-trade-goods { margin: .4rem 0; padding-left: 1.1rem; }
.twh-trade-src { font-size: .7rem; color: #9fb0cf; }
.twh-trade-list { display: grid; gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.twh-trade-list .twh-spot small { display: block; font-weight: 500; color: #9fb0cf; }
.twh-tr { fill: none; stroke: #ffd36e; stroke-width: 2.4; stroke-dasharray: 6 4; cursor: pointer; opacity: .8; }
.twh-tr-all { stroke: #4fd1c5; }
.twh-tr.is-on { stroke-width: 4; opacity: 1; stroke-dasharray: none; }
#twhtr-a path { fill: #ffd36e; }
.twh-tp circle { fill: #e8edf7; stroke: #0a1830; stroke-width: 2; }
.twh-tp.is-home circle { fill: #ffd36e; }
.twh-tp text { fill: #e8edf7; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #0a1830; stroke-width: 3px; }
.twh-tp text .zh { font-weight: 500; }
.al-lg-twhpin i { background: rgba(27,20,5,.8); border: 2px solid #fff3c9; border-radius: 50%; }
.al-lg-twhjunk i { background: #c9a66b; border-radius: 3px; }
@media (max-width: 860px) { .twh-trade-body { grid-template-columns: 1fr; } .twh-trade-side { border-left: 0; border-top: 1px solid rgba(160,180,230,.16); } }


/* ── 第六課：南北據點地圖 ─────────────────────────────────────────────── */
.twh-base[data-who="es"] .twh-site-c { fill: #4fd1c5; stroke: #0a1830; }
.twh-base[data-who="nl"] .twh-site-c { fill: #f08a4b; stroke: #0a1830; }
.twh-base[data-who="none"] .twh-site-c { fill: #1b2b4d; stroke: #8fa3c8; stroke-dasharray: 3 3; }
.twh-base[data-who="none"] .twh-site-n { fill: #8fa3c8; }
.twh-base[data-who="es"] .twh-site-n, .twh-base[data-who="nl"] .twh-site-n { fill: #0a1830; }
.twh-ppl text { fill: #d6c48f; font: italic 600 11px var(--sans); paint-order: stroke; stroke: #0a1830; stroke-width: 3px; opacity: .9; }
.twh-ppl text .zh { font-style: normal; font-family: var(--zh); font-weight: 500; }
.twh-no-ppl .twh-ppl { display: none; }
.twh-who-es { background: #4fd1c5; } .twh-who-nl { background: #f08a4b; }
.twh-bases-lab .twh-site-layers i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; flex: none; margin-top: .2rem; }
.twh-tl-es { background: #4fd1c5 !important; } .twh-tl-nl { background: #f08a4b !important; }
.al-lg-twhes i { background: #4fd1c5; border-radius: 50%; border: 2px solid #0a1830; }
.al-lg-twhnl i { background: #f08a4b; border-radius: 50%; border: 2px solid #0a1830; }
.al-lg-twhnone i { background: #1b2b4d; border-radius: 50%; border: 2px dashed #8fa3c8; }
.al-lg-twhppl i { background: transparent; border: 0; color: #d6c48f; font-style: italic; }
.al-lg-twhppl i::before { content: "Aa"; font: italic 700 11px var(--sans); }