/* =========================================================
   人體探索 · The Human Body — 課程頁專屬樣式
   只載在 /resources/classes/human-body/ 底下（build.py 的 _body_head）。
   3D 面板、迷思、口訣、課堂活動等共用樣式在 astro.css，這裡只放人體系列多出來的。
   ========================================================= */

/* ---------- 3D 骨架面板 ---------- */
.sk-lab { --al-bone: #f3ead6; --al-red: #ff6b5e; }
.sk-lab .al-stage { grid-template-columns: minmax(0, 1fr) 340px; }
.sk-lab .al-space { min-height: 660px; background: radial-gradient(70% 60% at 50% 42%, rgba(80,110,170,.18), transparent 70%); }
.sk-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; font-size: .9rem; font-weight: 700; color: var(--al-mute); }
.sk-loading[hidden] { display: none; }
.sk-bar { display: block; width: 180px; height: 5px; margin: .7rem auto 0; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.sk-bar i { display: block; width: 0; height: 100%; background: var(--al-sun); transition: width .2s; }
.al-nogl .sk-loading { display: none; }

.sk-aside { display: flex; flex-direction: column; gap: .2rem; }
.sk-aside .al-sky-k { margin-top: .9rem; }
.sk-aside .sk-card .al-sky-k { margin-top: 0; }
.sk-card { min-height: 190px; padding: .9rem 1rem 1rem; border-radius: 16px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); transition: border-color .3s, background .3s; }
.sk-card.on { border-color: rgba(255,200,87,.55); background: rgba(255,200,87,.06); }
.sk-empty p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--al-mute); }
.sk-empty .zh { margin-top: .25rem; }
.sk-info { display: none; }
.sk-card.on .sk-empty { display: none; }
.sk-card.on .sk-info { display: block; }
.sk-name-en { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; color: #fff; }
.sk-nick { margin: .15rem 0 0; font-size: .86rem; font-style: italic; color: var(--al-mute); }
.sk-nick:empty { display: none; }
.sk-name-zh { margin: .2rem 0 .6rem; font-family: var(--zh); font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; color: var(--al-sun); }
.sk-region { margin: 0; padding-top: .55rem; border-top: 1px solid var(--al-line); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--al-teal); }
.sk-rjob { margin: .3rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--al-text); }
.sk-rjob .zh, .sk-job-text .zh, .sk-count-t .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.sk-clear { margin-top: .6rem; border: 1px solid var(--al-line); background: transparent; color: var(--al-mute); font-family: var(--sans); font-weight: 700; font-size: .74rem; padding: .3rem .8rem; border-radius: 999px; cursor: pointer; }
.sk-clear:hover { color: #fff; border-color: rgba(255,255,255,.35); }

.sk-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.sk-jobs button { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font-family: var(--sans); font-weight: 800; font-size: .8rem; text-align: left; line-height: 1.15; cursor: pointer; transition: background .2s, border-color .2s; }
.sk-jobs button:last-child { grid-column: 1 / -1; }
.sk-jobs button i { font-style: normal; font-size: 1.05rem; }
.sk-jobs button small { display: block; margin-left: auto; font-family: var(--zh); font-weight: 600; font-size: .74rem; color: var(--al-mute); }
.sk-jobs button:hover { background: rgba(255,255,255,.07); }
.sk-jobs button[aria-pressed="true"] { border-color: var(--al-sun); background: rgba(255,211,110,.12); box-shadow: 0 0 0 1px var(--al-sun) inset; }
.sk-jobs button[data-job="blood"][aria-pressed="true"] { border-color: var(--al-red); background: rgba(255,107,94,.12); box-shadow: 0 0 0 1px var(--al-red) inset; }
.sk-job-text { margin: .55rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--al-text); min-height: 4.6em; }

.sk-count-box { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--al-line); }
.sk-count { display: inline-flex; align-items: center; gap: .5rem; width: 100%; justify-content: center; padding: .62rem 1rem; border: 0; border-radius: 999px; background: var(--al-sun); color: #1b1405; font-family: var(--sans); font-weight: 800; font-size: .86rem; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(255,211,110,.9); transition: transform .2s; }
.sk-count:hover { transform: translateY(-2px); }
.sk-count i { font-style: normal; font-size: 1.1rem; }
.sk-count span { text-align: left; line-height: 1.2; }
.sk-count small { display: block; font-family: var(--zh); font-weight: 600; font-size: .78rem; opacity: .8; }
.sk-count[aria-pressed="true"] { background: transparent; color: var(--al-sun); box-shadow: 0 0 0 1px var(--al-sun) inset; }
.sk-count-n { margin: .6rem 0 .1rem; text-align: center; font-size: .9rem; font-weight: 700; color: var(--al-mute); font-variant-numeric: tabular-nums; }
.sk-count-n b { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: #fff; }
.sk-count-t { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--al-text); }
.sk-count-t > b { display: block; color: var(--al-sun); font-size: .8rem; letter-spacing: .04em; margin-bottom: .15rem; }

.sk-apart-row { margin-top: 0; }
.sk-apart::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--al-sun) 0 var(--p, 0%), rgba(255,255,255,.12) var(--p, 0%)); }
.sk-apart::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--al-sun); }
.sk-chips { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.sk-chip { position: relative; padding-top: .55rem; }
.sk-chip-n { font-family: var(--serif); font-size: 1.15rem; line-height: 1; color: var(--al-bone); }

/* 標籤 */
.al-lab.sk-rl { font-size: .68rem; color: #cfe0ff; background: rgba(6,10,22,.55); }
.al-lab.sk-sel { color: #1b1405; background: var(--al-sun); border-color: var(--al-sun); font-size: .76rem; box-shadow: 0 6px 20px -6px rgba(255,211,110,.8); }
.al-lab.sk-ol { color: #ffd2dc; border-color: rgba(255,160,180,.45); }
.al-lab[hidden] { display: none; }

/* 圖例與出處 */
.al-lg-gold i { border: 0; background: var(--al-sun); box-shadow: 0 0 10px 2px rgba(255,211,110,.6); }
.al-lg-red i { border: 0; background: #d9382e; }
.al-lg-organ i { border: 0; background: radial-gradient(circle at 40% 40%, #f2a7b8, #d8434a); opacity: .75; }
.sk-credit { margin: 0; padding: 0 1.3rem 1.1rem; font-size: .74rem; line-height: 1.6; color: #7f90b0; }
.sk-credit a { color: var(--al-mute); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1020px) {
  .sk-lab .al-stage { grid-template-columns: 1fr; }
  .sk-lab .al-space { aspect-ratio: 4 / 5; min-height: 420px; max-height: 80vh; }
  .sk-lab .sk-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; column-gap: 1.1rem; align-items: start; }
  .sk-lab .sk-aside .sk-card { grid-row: span 3; }
  .sk-aside .al-sky-k { margin-top: 0; }
  .sk-count-box { grid-column: 1 / -1; margin-top: .6rem; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .3rem 1rem; align-items: center; }
  .sk-count { width: auto; }
  .sk-count-n { margin: 0; }
  .sk-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sk-lab .al-space { aspect-ratio: 3 / 4; min-height: 0; }
  .sk-lab .sk-aside { grid-template-columns: 1fr; }
  .sk-lab .sk-aside .sk-card { grid-row: auto; min-height: 0; }
  .sk-count-box { grid-template-columns: 1fr; text-align: center; }
  .sk-count { width: 100%; }
  .sk-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 五大功能卡 ---------- */
.jb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .jb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .jb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jb-ico { font-size: 2.3rem; background: radial-gradient(circle at 50% 40%, #1b2f5c, #070b17); }
.jb-try { margin: 0 0 .9rem; padding: .6rem .75rem; border-radius: 10px; background: var(--brand-lt); color: var(--brand-dk); font-size: .84rem; line-height: 1.5; }
.jb-try b { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .15rem; }
.jb-try .zh { display: block; margin-top: .2rem; }
.jb-blood .jb-try { background: #fbece6; color: #8a3a1b; }
@media (max-width: 480px) { .jb-grid { grid-template-columns: 1fr; } }

/* ---------- 骨頭數一數 ---------- */
.bc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.1rem; margin-top: 1.4rem; }
.bc-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .1rem 1rem; align-items: center; width: 100%; padding: .75rem 2.6rem .75rem 1rem; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s, box-shadow .2s; }
button.bc-row { cursor: pointer; }
button.bc-row:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow); }
.bc-n { grid-row: span 2; font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--brand-dk); text-align: center; }
.bc-t { font-weight: 800; font-size: 1rem; color: var(--ink); }
.bc-t .zh { margin-left: .5rem; font-weight: 700; color: var(--gold-dk); }
.bc-note { font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.bc-note .zh { display: block; }
.bc-go { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 800; color: var(--brand); }
.bc-total { background: linear-gradient(150deg, var(--brand), var(--brand-dk)); border-color: transparent; }
.bc-total .bc-n, .bc-total .bc-t, .bc-total .bc-t .zh { color: #fff; }
.bc-total .bc-n { grid-row: auto; }
@media (max-width: 760px) { .bc-list { grid-template-columns: 1fr; } }

/* ---------- 親身測量 ---------- */
.ms-steps { list-style: none; margin: 1.4rem 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.ms-steps li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); font-size: .95rem; line-height: 1.6; }
.ms-n { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(150deg, var(--gold), var(--sunset)); color: #fff; font-family: var(--serif); font-size: 1.5rem; }
.ms-steps li > span > b { display: block; margin-bottom: .2rem; color: var(--ink); }
.ms-steps .zh { display: block; color: var(--ink-soft); font-size: .9rem; margin-top: .2rem; }
.ms-go { font-size: .9rem; padding: .6rem 1.2rem; }
@media (max-width: 880px) { .ms-steps { grid-template-columns: 1fr; } }

/* ---------- 中文怎麼說、健康提醒 ---------- */
.cu-box { max-width: 70ch; margin-top: 1rem; padding: 1.3rem 1.5rem; border-radius: 16px; background: linear-gradient(150deg, #fff, var(--cream)); border: 1px solid var(--line); }
.cu-box p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.75; }
.cu-link { font-weight: 800; color: var(--brand-dk); }
.hb-health { max-width: 70ch; margin: 0 auto 2rem; padding: .9rem 1.2rem; border-radius: 12px; background: #f3f6f9; border: 1px solid var(--line); font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.hb-health b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: .2rem; }
.hb-health .zh { display: block; margin-top: .2rem; }

/* 系列首頁的課程卡：人體系列用暖一點的底色 */
.hb-ico { background: radial-gradient(circle at 50% 38%, #3a2f4f, #120d1c); }

/* =========================================================
   第二課：手臂與肌肉（data-arm-lab）
   ========================================================= */
.am-lab .al-space { min-height: 600px; }
.am-aside { gap: .15rem; }
.am-angle { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .4rem; }
.am-deg { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 2.6ch; }
.am-angle span { font-size: .8rem; font-weight: 700; color: var(--al-mute); line-height: 1.2; }
.am-angle small, .am-m b small, .am-state small, .am-loads small, .am-act small { display: block; font-family: var(--zh); font-weight: 600; }
.am-muscles { display: grid; gap: .45rem; }
.am-m { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .15rem .6rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); transition: border-color .25s, background .25s; }
.am-dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: #d9a39b; transition: background .25s, box-shadow .25s; }
.am-m.on .am-dot { background: #e0412f; box-shadow: 0 0 10px 2px rgba(224,65,47,.6); }
.am-m.on.brake .am-dot { background: #ef8a3c; box-shadow: 0 0 10px 2px rgba(239,138,60,.6); }
.am-m.on { border-color: rgba(224,65,47,.55); background: rgba(224,65,47,.08); }
.am-m.on.brake { border-color: rgba(239,138,60,.55); background: rgba(239,138,60,.08); }
.am-m b { font-size: .9rem; color: #fff; line-height: 1.15; }
.am-m b small { font-size: .74rem; color: var(--al-mute); }
.am-state { grid-column: 3; grid-row: 1; font-style: normal; font-size: .74rem; font-weight: 800; color: var(--al-text); text-align: right; line-height: 1.2; }
.am-state small { font-size: .7rem; color: var(--al-mute); }
.am-m.on .am-state { color: #ffb4a8; }
.am-m.on.brake .am-state { color: #ffc792; }
.am-len { grid-column: 2; grid-row: 2; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.am-len s { display: block; height: 100%; border-radius: 999px; background: #d9a39b; text-decoration: none; transition: width .1s; }
.am-m.on .am-len s { background: #e0412f; }
.am-len-t { grid-column: 3; grid-row: 2; font-size: .72rem; font-weight: 700; color: var(--al-mute); text-align: right; font-variant-numeric: tabular-nums; }
.am-len-k { margin: .35rem 0 0; font-size: .68rem; line-height: 1.4; color: #7f90b0; }
.am-say { margin: .55rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--al-text); min-height: 5.2em; }
.am-say .zh, .am-kg-t .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.am-loads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.am-loads button { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .2rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font-family: var(--sans); font-weight: 800; font-size: .7rem; cursor: pointer; transition: background .2s, border-color .2s; }
.am-loads button i { font-style: normal; font-size: 1.2rem; }
.am-loads small { font-size: .66rem; color: var(--al-mute); }
.am-loads button:hover { background: rgba(255,255,255,.07); }
.am-loads button[aria-pressed="true"] { border-color: var(--al-sun); background: rgba(255,211,110,.12); box-shadow: 0 0 0 1px var(--al-sun) inset; }
.am-force { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--al-line); }
.am-kg-k { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--al-mute); }
.am-kg { margin: .1rem 0 .25rem; font-family: var(--serif); font-size: 2rem; line-height: 1.1; color: #ff9a8a; font-variant-numeric: tabular-nums; }
.am-kg-t { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--al-text); }

.am-acts { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.am-act { display: inline-flex; flex-direction: column; align-items: flex-start; padding: .45rem .95rem; border-radius: 14px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: #fff; font-family: var(--sans); cursor: pointer; line-height: 1.15; transition: background .2s, border-color .2s, transform .2s; }
.am-act b { font-size: .9rem; }
.am-act small { font-size: .72rem; color: var(--al-mute); }
.am-act:hover { transform: translateY(-2px); }
.am-act-lift:hover, .am-act-push:hover { border-color: rgba(224,65,47,.7); background: rgba(224,65,47,.12); }
.am-act-lower:hover { border-color: rgba(239,138,60,.7); background: rgba(239,138,60,.12); }
.am-bend::-webkit-slider-runnable-track { background: linear-gradient(90deg, #e0412f 0 var(--p, 0%), rgba(255,255,255,.12) var(--p, 0%)); }
.am-bend::-moz-range-progress { height: 6px; border-radius: 999px; background: #e0412f; }

.al-lab.am-lb { font-size: .7rem; }
.al-lab.am-lb-bi, .al-lab.am-lb-tri { color: #ffc4b8; border-color: rgba(224,65,47,.5); }
.al-lab.am-lb-t { color: #fff; }
.al-lab.am-lb-j, .al-lab.am-lb-lv { color: #ffe3a3; border-color: rgba(255,211,110,.45); }
.al-lab.am-lb-ef { color: #ffb4a8; border-color: rgba(255,107,94,.6); }
.al-lab.am-lb-ld { color: #b9e8ff; border-color: rgba(122,215,255,.6); }
.al-lg-brake i { border: 0; background: #ef8a3c; }
.al-lg-tendon i { border: 0; background: linear-gradient(90deg, #f4efe6 0 30%, #e0412f 30% 70%, #f4efe6 70%); border-radius: 4px; }

.am-col + .am-col { margin-top: .5rem; }
@media (max-width: 1020px) {
  .am-lab .al-space { aspect-ratio: 5 / 4; min-height: 380px; }
  .am-lab .am-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.3rem; align-items: start; }
  .am-col + .am-col { margin-top: 0; }
}
@media (max-width: 640px) {
  .am-lab .al-space { aspect-ratio: 1 / 1; min-height: 0; }
  .am-lab .am-aside { grid-template-columns: 1fr; }
  .am-col + .am-col { margin-top: .6rem; }
  .am-acts { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .am-act { padding: .45rem .6rem; }
}

/* 成對肌肉、三種肌肉 */
.kd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kd-ctl { color: var(--gold-dk); }
@media (max-width: 1020px) { .kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kd-grid, .pr-grid { grid-template-columns: 1fr; } }

/* =========================================================
   第三課：心臟與兩個循環（data-heart-lab）
   ========================================================= */
.hr-lab { --hr-rich: #ff3434; --hr-poor: #7a2a66; }
.hr-lab .al-space { min-height: 620px; }
.hr-facing { position: absolute; left: 1rem; top: .8rem; right: 4rem; margin: 0; font-size: .72rem; color: var(--al-mute); pointer-events: none; }
.hr-aside { gap: .2rem; }
.hr-col + .hr-col { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--al-line); }
.hr-rate { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.hr-bpm { font-family: var(--serif); font-size: 2.8rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.is-playing .hr-bpm { animation: none; }
.hr-rate > span { font-size: .78rem; font-weight: 700; color: var(--al-mute); line-height: 1.2; }
.hr-rate small, .hr-src small, .hr-rates small, .hr-measure small, .hr-tap small, .hr-side small { display: block; font-family: var(--zh); font-weight: 600; }
.hr-src { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 800; color: #ff9a8a; text-align: right; line-height: 1.2; }
.hr-src small { color: var(--al-mute); }
.hr-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.hr-rates button { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .4rem .15rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font-family: var(--sans); font-weight: 800; font-size: .68rem; cursor: pointer; transition: background .2s, border-color .2s; }
.hr-rates button i { font-style: normal; font-size: 1.1rem; }
.hr-rates small { font-size: .64rem; color: var(--al-mute); }
.hr-rates button:hover { background: rgba(255,255,255,.07); }
.hr-rates button[aria-pressed="true"] { border-color: var(--hr-rich); background: rgba(255,52,52,.12); box-shadow: 0 0 0 1px var(--hr-rich) inset; }
.hr-mbox { margin-top: .7rem; }
.hr-measure { display: inline-flex; align-items: center; gap: .55rem; width: 100%; justify-content: center; padding: .6rem 1rem; border: 0; border-radius: 999px; background: var(--hr-rich); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .88rem; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(255,52,52,.9); transition: transform .2s; }
.hr-measure:hover { transform: translateY(-2px); }
.hr-measure i { font-style: normal; font-size: 1.15rem; }
.hr-measure span { text-align: left; line-height: 1.2; }
.hr-measure small { font-size: .74rem; opacity: .85; }
.hr-measure[hidden] { display: none; }
.hr-tapbox { display: none; align-items: center; gap: 1rem; }
.hr-tapbox.on { display: flex; }
.hr-tap { flex: none; width: 92px; height: 92px; border-radius: 50%; border: 0; background: radial-gradient(circle at 40% 35%, #ff6b6b, #c81e1e); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 1.15rem; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(255,52,52,.9); touch-action: manipulation; user-select: none; }
.hr-tap small { font-size: .8rem; }
.hr-tap.hit { animation: hrHit .18s ease-out; }
@keyframes hrHit { 0% { transform: scale(.88); } 100% { transform: scale(1); } }
.hr-tap-count { margin: 0; font-size: .8rem; font-weight: 700; color: var(--al-mute); line-height: 1.5; }
.hr-tap-count b { font-family: var(--serif); font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums; }
.hr-tap-msg { margin: .55rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--al-text); }
.hr-tap-msg .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.hr-tap-msg b { color: #ff9a8a; }
.hr-nums { margin: .7rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; }
.hr-nums dt { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--al-mute); }
.hr-nums dd { margin: 0; font-size: 1.05rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.hr-nums-note { margin: .4rem 0 0; font-size: .66rem; line-height: 1.4; color: #7f90b0; }
.hr-follow { padding: .9rem 1.2rem 1rem; border-top: 1px solid var(--al-line); background: rgba(10,16,34,.6); }
.hr-follow .al-sky-k { margin: 0 0 .5rem; }
.hr-stops { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .3rem; }
.hr-stops li { counter-increment: st; position: relative; padding: 1.7rem .45rem .45rem; border: 1px solid var(--al-line); border-radius: 8px; font-size: .74rem; line-height: 1.3; color: var(--al-mute); transition: background .25s, color .25s; }
.hr-stops li::before { content: counter(st); position: absolute; left: .45rem; top: .4rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; font-weight: 800; background: rgba(255,255,255,.08); color: var(--al-mute); }
.hr-stops li b { font-weight: 700; }
.hr-stops li span { display: block; font-family: var(--zh); font-size: .7rem; }
.hr-stops li.on { background: rgba(255,211,110,.12); color: #fff; }
.hr-stops li.on::before { background: var(--al-sun); color: #1b1405; }
.hr-nofollow .hr-follow { opacity: .35; }

.al-lab.hr-lb { font-size: .7rem; }
.al-lab.hr-lb-r { color: #e7b7de; border-color: rgba(160,70,140,.6); }
.al-lab.hr-lb-l { color: #ffc4c4; border-color: rgba(255,52,52,.55); }
.al-lab.hr-lb-x { color: #cfe0ff; }
.al-lab.hr-side { font-size: .72rem; font-weight: 800; background: rgba(6,10,22,.75); }
.al-lab.hr-side-r { color: #e7b7de; border-color: rgba(160,70,140,.7); }
.al-lab.hr-side-l { color: #ffc4c4; border-color: rgba(255,52,52,.7); }
.al-lg-rich i { border: 0; background: #ff3434; }
.al-lg-poor i { border: 0; background: #7a2a66; }
.al-lg-valve i { border: 3px solid #f6e7c8; background: rgba(246,231,200,.6); }

@media (max-width: 1020px) {
  .hr-lab .al-space { aspect-ratio: 1 / 1; min-height: 380px; max-height: 80vh; }
  .hr-lab .hr-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.3rem; align-items: start; }
  .hr-col + .hr-col { margin-top: 0; padding-top: 0; border-top: 0; }
  .hr-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hr-lab .al-space { aspect-ratio: 4 / 5; }
  .hr-lab .hr-aside { grid-template-columns: 1fr; }
  .hr-col + .hr-col { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--al-line); }
  .hr-facing { font-size: .64rem; right: 3.4rem; }
}

/* 四個腔室卡 */
.ck-ico i { width: 34px; height: 34px; border-radius: 50%; display: block; }
.ck-r .ck-ico i { background: radial-gradient(circle at 40% 35%, #a2508f, #5b1c4b); }
.ck-l .ck-ico i { background: radial-gradient(circle at 40% 35%, #ff7070, #c41e1e); }

/* =========================================================
   第四課：肺與呼吸（data-lungs-lab）；計數、讀數沿用第三課的 hr-* 樣式
   ========================================================= */
.lu-lab { --hr-rich: #3aa6e8; --lu-air: #7ad7ff; }
.lu-lab .al-space { min-height: 640px; }
.lu-lab .hr-measure { box-shadow: 0 10px 26px -12px rgba(58,166,232,.9); }
.lu-lab .hr-tap { background: radial-gradient(circle at 40% 35%, #7ad7ff, #1f78b4); box-shadow: 0 12px 28px -10px rgba(58,166,232,.9); }
.lu-lab .hr-src, .lu-lab .hr-tap-msg b { color: #9fdcff; }
.lu-phase { margin: .7rem 0 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; color: #fff; }
.lu-phase small { display: inline-block; margin-left: .5rem; font-family: var(--zh); font-size: .95rem; font-weight: 600; color: var(--al-mute); }
.lu-in .lu-phase { color: var(--lu-air); }
.lu-out .lu-phase { color: #ffc76b; }
.lu-phase-t { margin: .3rem 0 .6rem; font-size: .8rem; line-height: 1.55; color: var(--al-text); min-height: 4.5em; }
.lu-phase-t .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.lu-hold { display: inline-flex; align-items: center; gap: .55rem; width: 100%; justify-content: center; padding: .7rem 1rem; border-radius: 16px; border: 2px dashed rgba(122,215,255,.55); background: rgba(122,215,255,.06); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .9rem; cursor: pointer; user-select: none; touch-action: none; -webkit-user-select: none; transition: background .2s, border-color .2s, transform .2s; }
.lu-hold i { font-style: normal; font-size: 1.2rem; }
.lu-hold span { text-align: left; line-height: 1.2; }
.lu-hold small { display: block; font-family: var(--zh); font-weight: 600; font-size: .74rem; color: var(--al-mute); }
.lu-hold.on { border-style: solid; border-color: var(--lu-air); background: rgba(122,215,255,.2); transform: scale(.98); }
.lu-strip { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 1rem 1.6rem; align-items: start; padding: 1rem 1.2rem 1.1rem; border-top: 1px solid var(--al-line); background: rgba(10,16,34,.6); }
.lu-strip .al-sky-k { margin: 0 0 .5rem; }
.lu-strip-nums .hr-nums { margin-top: 1.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
.lu-strip-nums .hr-nums dd { font-size: 1.35rem; }
.lu-alv-box { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--al-line); background: #060a16; }
.lu-alv { width: 100%; height: 100%; display: block; }
.lu-alv-cap { margin: .45rem 0 0; font-size: .72rem; line-height: 1.7; color: var(--al-mute); }
.lu-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.lu-o2 { background: #7ad7ff; }
.lu-co2 { background: #ffc76b; }
.lu-lab .al-row-main .al-toggles { margin-left: auto; }

.al-lab.lu-lb { font-size: .7rem; color: #cfe0ff; }
.al-lab.lu-lb-lung { color: #ffd2dc; border-color: rgba(242,167,184,.55); }
.al-lab.lu-lb-dia { color: #ffb4a8; border-color: rgba(180,84,74,.8); }
.al-lab.lu-lb-ht { color: #ffc4c4; border-color: rgba(216,67,74,.6); }
.al-lab.lu-lb-alv { color: #ffc2d1; }
.al-lg-dia i { border: 0; background: #b4544a; border-radius: 50% 50% 4px 4px; }
.al-lg-airin i { border: 0; background: #bfe6ff; }
.al-lg-airout i { border: 0; background: #ffc76b; }
.al-lg-tree i { border: 3px solid #f6e7c8; border-radius: 3px; }

@media (max-width: 1020px) {
  .lu-lab .al-space { aspect-ratio: 1 / 1; min-height: 380px; max-height: 80vh; }
  .lu-lab .al-row-main .al-toggles { margin-left: 0; }
}
@media (max-width: 640px) {
  .lu-lab .al-space { aspect-ratio: 4 / 5; }
  .lu-strip { grid-template-columns: 1fr; }
  .lu-strip-nums .hr-nums { margin-top: 0; }
}

/* =========================================================
   第五課：關節（data-joints-lab）
   ========================================================= */
.jt-lab .al-space { min-height: 620px; }
.jt-aside { gap: .1rem; }
.jt-name { margin: 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: #fff; }
.jt-zh { margin: .15rem 0 .55rem; font-family: var(--zh); font-size: 1.1rem; font-weight: 600; letter-spacing: .05em; color: var(--al-sun); }
.jt-type { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin: 0; padding: .35rem .8rem .35rem .55rem; border-radius: 999px; background: rgba(255,211,110,.12); border: 1px solid rgba(255,211,110,.45); color: #fff; font-weight: 800; font-size: .84rem; line-height: 1.15; }
.jt-type i { font-style: normal; font-size: 1.2rem; }
.jt-type small { display: block; font-family: var(--zh); font-weight: 600; font-size: .74rem; color: var(--al-mute); }
.jt-ways { margin: .55rem 0 0; font-size: .82rem; color: var(--al-mute); }
.jt-ways b { font-family: var(--serif); font-size: 1.5rem; color: #fff; margin-right: .2rem; }
.jt-ways small { display: inline; margin-left: .5rem; font-family: var(--zh); }
.jt-like { margin: .35rem 0 .7rem; font-size: .84rem; line-height: 1.55; color: var(--al-text); }
.jt-like .zh, .jt-say .zh, .jt-ex .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.jt-sliders { display: grid; gap: .55rem; }
.jt-sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: center; padding: .5rem .65rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); }
.jt-sl-k { font-size: .78rem; font-weight: 800; color: #fff; line-height: 1.2; }
.jt-sl-k small { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.jt-sl-v { grid-column: 2; grid-row: 1; text-align: right; line-height: 1.15; }
.jt-sl-v b { font-family: var(--serif); font-size: 1.25rem; color: var(--al-sun); font-variant-numeric: tabular-nums; }
.jt-sl-v small { display: block; font-size: .62rem; color: var(--al-mute); }
.jt-sl input { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.jt-sl input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--al-sun) 0 var(--p, 0%), rgba(255,255,255,.12) var(--p, 0%)); }
.jt-sl input::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); }
.jt-sl input::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--al-sun); }
.jt-sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--al-sun); }
.jt-sl input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--al-sun); }
.jt-btns { display: grid; grid-template-columns: 1.3fr 1fr; gap: .4rem; margin-top: .7rem; }
.jt-btns button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .55rem .5rem; border-radius: 14px; font-family: var(--sans); font-weight: 800; font-size: .84rem; cursor: pointer; line-height: 1.2; transition: transform .2s, background .2s; }
.jt-btns small { font-family: var(--zh); font-weight: 600; font-size: .72rem; }
.jt-circle { border: 0; background: var(--al-sun); color: #1b1405; box-shadow: 0 10px 26px -12px rgba(255,211,110,.9); }
.jt-circle small { color: rgba(27,20,5,.7); }
.jt-reset { border: 1px solid var(--al-line); background: transparent; color: var(--al-text); }
.jt-reset small { color: var(--al-mute); }
.jt-btns button:hover { transform: translateY(-2px); }
.jt-say { margin: .6rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--al-text); min-height: 4.8em; }
.jt-ex { margin: .6rem 0 0; padding-top: .6rem; border-top: 1px solid var(--al-line); font-size: .8rem; line-height: 1.5; color: var(--al-text); }
.jt-ex b { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--al-teal); margin-bottom: .15rem; }
.jt-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jt-chip small { font-size: .62rem; color: var(--al-mute); }
.jt-chip.on { border-color: var(--al-sun); background: rgba(255,211,110,.1); box-shadow: 0 0 0 1px var(--al-sun) inset; }
.al-lab.jt-lb { font-size: .7rem; }
.al-lab.jt-lb-pv { color: #ffe3a3; border-color: rgba(255,211,110,.5); }
.al-lg-fan i { border: 0; border-radius: 50% 50% 0 50%; background: rgba(255,211,110,.35); box-shadow: inset 0 0 0 2px #ffd36e; }
.al-lg-trace i { border: 0; height: 4px; margin-top: .55rem; border-radius: 2px; background: #7ad7ff; }
.ty-none { margin: 0; font-size: .74rem; color: var(--ink-soft); opacity: .7; }

@media (max-width: 1020px) {
  .jt-lab .al-space { aspect-ratio: 1 / 1; min-height: 380px; max-height: 80vh; }
  .jt-lab .jt-aside { display: block; }
  .jt-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .jt-lab .al-space { aspect-ratio: 4 / 5; }
}

/* =========================================================
   第六課：消化（data-digestion-lab）；路線條沿用第三課的 hr-follow／hr-stops
   ========================================================= */
.dg-lab .al-space { min-height: 640px; }
.dg-aside { gap: .15rem; }
.dg-clockrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: stretch; }
.dg-lunch-l { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 800; color: var(--al-text); line-height: 1.15; }
.dg-lunch-l small { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.dg-lunch { font: 800 1.05rem var(--sans); color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--al-line); border-radius: 10px; padding: .35rem .5rem; color-scheme: dark; }
.dg-now { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 0; border-radius: 14px; background: #f0b44a; color: #1b1405; font-family: var(--sans); font-weight: 800; font-size: .84rem; text-align: left; line-height: 1.2; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(240,180,74,.9); transition: transform .2s; }
.dg-now:hover { transform: translateY(-2px); }
.dg-now i { font-style: normal; font-size: 1.2rem; }
.dg-now small { display: block; font-family: var(--zh); font-weight: 600; font-size: .74rem; color: rgba(27,20,5,.7); }
.dg-nums { margin-bottom: .6rem; }
.dg-nums dd { font-size: 1.25rem; }
.dg-stop-en { margin: 0; font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; color: #fff; }
.dg-stop-zh { margin: .15rem 0 .45rem; font-family: var(--zh); font-size: 1.1rem; font-weight: 600; letter-spacing: .05em; color: #f0b44a; }
.dg-stop-time { display: inline-block; margin: 0; padding: .2rem .7rem; border-radius: 999px; background: rgba(240,180,74,.14); border: 1px solid rgba(240,180,74,.45); color: #fff; font-size: .78rem; font-weight: 800; }
.dg-stop-time small { margin-left: .4rem; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.dg-what { margin: .6rem 0 0; font-size: .86rem; line-height: 1.6; color: var(--al-text); min-height: 7em; }
.dg-what .zh { display: block; color: var(--al-mute); margin-top: .2rem; }
.dg-lab .hr-stops { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dg-lab .hr-stops li { cursor: pointer; }
.dg-lab .hr-stops li:hover { background: rgba(255,255,255,.06); color: #fff; }
.dg-lab .hr-stops li:focus-visible { outline: 2px solid #f0b44a; outline-offset: 2px; }
.dg-slider { flex: 1; min-width: 240px; margin: 0; }
.dg-slider .ec-slider-k em { font-size: .66rem; }
.dg-time::-webkit-slider-runnable-track { background: linear-gradient(90deg, #f0b44a 0 var(--p, 0%), rgba(255,255,255,.12) var(--p, 0%)); }
.dg-time::-moz-range-progress { height: 6px; border-radius: 999px; background: #f0b44a; }
.al-lab.dg-lb { font-size: .7rem; color: #cfe0ff; }
.al-lab.dg-lb-food { color: #1b1405; background: #f0b44a; border-color: #f0b44a; font-weight: 800; box-shadow: 0 6px 20px -6px rgba(240,180,74,.8); }
.al-lab.dg-lb-org { color: #e8d2a8; }
.al-lab[hidden] { display: none; }
.al-lg-food i { border: 0; background: radial-gradient(circle at 40% 35%, #fff4cf, #e8c46a); box-shadow: 0 0 8px 2px rgba(240,180,74,.6); }
.al-lg-squeeze i { border: 3px solid #c8424a; }
.dg-lab .al-lg-organ i { opacity: 1; background: conic-gradient(#8b3a2e 0 40%, #3f8f4a 0 60%, #f0c96a 0); }

@media (max-width: 1020px) {
  .dg-lab .al-space { aspect-ratio: 1 / 1; min-height: 380px; max-height: 80vh; }
  .dg-lab .dg-aside { display: block; }
  .dg-lab .hr-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dg-lab .al-space { aspect-ratio: 4 / 5; }
  .dg-clockrow { grid-template-columns: 1fr; }
}

/* =========================================================
   第七課：大腦與神經（data-nerves-lab）
   ========================================================= */
.nv-lab .al-space { min-height: 640px; }
.nv-slow { position: absolute; left: 1rem; top: .8rem; right: 4rem; margin: 0; font-size: .72rem; color: var(--al-mute); pointer-events: none; }
.nv-aside { gap: .15rem; }
.nv-scs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.nv-sc { display: flex; align-items: center; gap: .45rem; padding: .5rem .55rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .78rem; text-align: left; line-height: 1.15; cursor: pointer; transition: background .2s, border-color .2s; }
.nv-sc i { font-style: normal; font-size: 1.2rem; }
.nv-sc small { display: block; font-family: var(--zh); font-weight: 600; font-size: .72rem; color: var(--al-mute); }
.nv-sc:hover { background: rgba(255,255,255,.07); }
.nv-sc[aria-pressed="true"] { border-color: #ffe08a; background: rgba(255,224,138,.12); box-shadow: 0 0 0 1px #ffe08a inset; }
.nv-title { margin: .8rem 0 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.15; color: #fff; }
.nv-zh { margin: .15rem 0 .4rem; font-family: var(--zh); font-size: 1.05rem; font-weight: 600; letter-spacing: .05em; color: #ffe08a; }
.nv-clock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; background: rgba(255,224,138,.08); border: 1px solid rgba(255,224,138,.35); }
.nv-ms { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.nv-clock > span { font-size: .7rem; font-weight: 700; color: var(--al-mute); line-height: 1.3; }
.nv-clock > span b { display: block; font-size: .95rem; color: #fff; }
.nv-replay { border: 1px solid var(--al-line); background: transparent; color: var(--al-text); font-family: var(--sans); font-weight: 800; font-size: .74rem; padding: .35rem .6rem; border-radius: 10px; cursor: pointer; line-height: 1.15; }
.nv-replay small { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.nv-steps { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.nv-steps li { position: relative; padding: .35rem .55rem .35rem .6rem; border-left: 3px solid rgba(255,255,255,.12); font-size: .76rem; line-height: 1.4; color: var(--al-mute); transition: color .25s, border-color .25s, background .25s; }
.nv-steps li b { display: inline-block; min-width: 4.2ch; margin-right: .4rem; font-variant-numeric: tabular-nums; color: inherit; }
.nv-steps li .zh { display: block; margin-top: .1rem; font-size: .72rem; }
.nv-steps li.on { color: #fff; border-color: #ffe08a; background: rgba(255,224,138,.06); }
.nv-steps li.on b { color: #ffe08a; }
.nv-steps li.nv-you.on { border-color: #7ddc9a; }
.nv-note { margin: .55rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--al-text); }
.nv-note .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.nv-strip { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem 1.4rem; align-items: start; padding: 1rem 1.2rem 1.1rem; border-top: 1px solid var(--al-line); background: rgba(10,16,34,.6); }
.nv-rt-box { height: 230px; border-radius: 16px; border: 2px solid var(--al-line); background: #060a16; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: border-color .15s, box-shadow .15s; }
.nv-rt-box:focus-visible { outline: 2px solid #ffe08a; outline-offset: 3px; }
.nv-rt-box.wait { border-color: #ffd36e; }
.nv-rt-box.drop { border-color: #7ddc9a; box-shadow: 0 0 0 4px rgba(125,220,154,.25); }
.nv-rt-cv { width: 100%; height: 100%; display: block; }
.nv-rt-text .al-sky-k { margin: 0 0 .4rem; }
.nv-rt-msg { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--al-text); }
.nv-rt-msg .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.nv-rt-msg b { color: #ffe08a; }
.nv-rt-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; font-size: .78rem; }
.nv-rt-list span { padding: .15rem .55rem; border-radius: 999px; background: rgba(255,255,255,.07); color: #fff; font-variant-numeric: tabular-nums; }
.nv-rt-list b { padding: .15rem .6rem; border-radius: 999px; background: rgba(125,220,154,.18); color: #b9f0c9; }
.nv-rt-use { margin-top: .7rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 0; border-radius: 999px; background: #ffe08a; color: #1b1405; font-family: var(--sans); font-weight: 800; font-size: .84rem; cursor: pointer; line-height: 1.2; text-align: left; }
.nv-rt-use small { display: block; font-family: var(--zh); font-weight: 600; font-size: .72rem; color: rgba(27,20,5,.7); }
.nv-rt-use[hidden] { display: none; }
.al-lab.nv-lb { font-size: .7rem; color: #ffe9a8; }
.al-lab.nv-lb-ouch { color: #fff; background: #ff7a59; border-color: #ff7a59; font-size: .9rem; font-weight: 800; }
.al-lg-signal i { border: 0; background: radial-gradient(circle, #fff 0 25%, #fff1b8 40%, rgba(255,210,100,0) 70%); }
.al-lg-pain i { border: 0; background: radial-gradient(circle, #fff 0 20%, #ff7a59 45%, rgba(255,122,89,0) 75%); }
.al-lg-nerve i { border: 0; height: 4px; margin-top: .55rem; border-radius: 2px; background: #ffe08a; }
.al-lg-brainmap i { border: 0; background: conic-gradient(#7fb0ff 0 25%, #ff8a5c 0 50%, #ffd36e 0 75%, #7ddc9a 0); }

@media (max-width: 1020px) {
  .nv-lab .al-space { aspect-ratio: 1 / 1; min-height: 380px; max-height: 80vh; }
  .nv-lab .nv-aside { display: block; }
  .nv-scs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nv-lab .al-space { aspect-ratio: 4 / 5; }
  .nv-scs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-strip { grid-template-columns: 110px minmax(0, 1fr); }
  .nv-slow { font-size: .64rem; right: 3.4rem; }
}

/* =========================================================
   第八課：眼睛（data-eyes-lab）
   ========================================================= */
.ey-lab .al-space { min-height: 720px; }   /* 比右欄（狀態文字最長時）高，畫面不會跟著跳 */
.ey-mag { position: absolute; left: 1rem; top: .8rem; right: 4rem; margin: 0; font-size: .72rem; color: var(--al-mute); pointer-events: none; }
.ey-aside { gap: .15rem; }
.ey-objs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.ey-objs button, .ey-types button, .ey-more button { display: flex; align-items: center; gap: .4rem; padding: .45rem .5rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .74rem; text-align: left; line-height: 1.15; cursor: pointer; transition: background .2s, border-color .2s; }
.ey-objs button { flex-direction: column; align-items: flex-start; gap: .15rem; }
.ey-objs i, .ey-more i { font-style: normal; font-size: 1.15rem; }
.ey-objs small, .ey-types small, .ey-more small { display: block; font-family: var(--zh); font-weight: 600; font-size: .68rem; color: var(--al-mute); }
.ey-objs button:hover, .ey-types button:hover, .ey-more button:hover:not(:disabled) { background: rgba(255,255,255,.07); }
.ey-objs button[aria-pressed="true"], .ey-types button[aria-pressed="true"] { border-color: #b8f28a; background: rgba(184,242,138,.1); box-shadow: 0 0 0 1px #b8f28a inset; }
.ey-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .7rem 0 .2rem; }
.ey-views figure { margin: 0; }
.ey-cv { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--al-line); background: #0a1224; }
.ey-views figcaption { margin-top: .25rem; font-size: .72rem; font-weight: 800; color: #fff; line-height: 1.2; }
.ey-views figcaption small { display: block; font-family: var(--zh); font-weight: 600; font-size: .68rem; color: var(--al-mute); }
.ey-status { margin: .45rem 0 .3rem; padding: .45rem .6rem; border-left: 3px solid rgba(255,255,255,.2); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.04); font-size: .8rem; line-height: 1.45; color: var(--al-text); min-height: 8.4em; }
.ey-status .zh { display: block; color: var(--al-mute); margin-top: .15rem; font-size: .76rem; }
.ey-status.ey-ok { border-color: #7ddc9a; background: rgba(125,220,154,.08); }
.ey-status.ey-bad { border-color: #ffb066; background: rgba(255,176,102,.08); }
.ey-status.ey-blindmsg { border-color: #ff5c7a; background: rgba(255,92,122,.08); }
.ey-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin: 0 0 .2rem; }
.ey-nums div { padding: .35rem .45rem; border-radius: 10px; background: rgba(255,255,255,.04); }
.ey-nums dt { font-size: .62rem; font-weight: 700; color: var(--al-mute); line-height: 1.25; }
.ey-nums dd { margin: .1rem 0 0; font-family: var(--serif); font-size: 1.02rem; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ey-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.ey-types button { flex-direction: column; align-items: flex-start; gap: .1rem; }
.ey-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; margin-top: .35rem; }
.ey-more button[aria-pressed="true"] { border-color: #9fd8ff; background: rgba(159,216,255,.12); box-shadow: 0 0 0 1px #9fd8ff inset; }
.ey-more .ey-blind[aria-pressed="true"] { border-color: #ff5c7a; background: rgba(255,92,122,.12); box-shadow: 0 0 0 1px #ff5c7a inset; }
.ey-more button:disabled { opacity: .4; cursor: not-allowed; }

/* 盲點測驗卡：白底黑字，跟紙本一樣 */
.ey-strip { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem 1.4rem; align-items: start; padding: 1rem 1.2rem 1.1rem; border-top: 1px solid var(--al-line); background: rgba(10,16,34,.6); }
.ey-card { position: relative; height: 170px; border-radius: 14px; background: #fff; overflow: hidden; }
.ey-cross, .ey-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.ey-cross { font-family: var(--sans); font-size: 2.1rem; font-weight: 400; line-height: 1; color: #111; }
.ey-dot { width: 22px; height: 22px; border-radius: 50%; background: #111; }
.ey-card[data-side="left"] .ey-dot { left: 13%; }
.ey-card[data-side="left"] .ey-cross { left: 85%; }
.ey-card[data-side="right"] .ey-dot { left: 87%; }
.ey-card[data-side="right"] .ey-cross { left: 15%; }
.ey-line { display: none; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; }
.ey-card[data-mode="line"] .ey-line { display: block; }
.ey-card[data-mode="line"] .ey-dot { visibility: hidden; }
.ey-card[data-mode="line"] .ey-cross { top: 30%; }
.ey-card[data-side="left"] .ey-line { background: linear-gradient(90deg, #111 0 calc(13% - 10px), transparent 0 calc(13% + 10px), #111 0); }
.ey-card[data-side="right"] .ey-line { background: linear-gradient(90deg, #111 0 calc(87% - 10px), transparent 0 calc(87% + 10px), #111 0); }
.ey-bs-text .al-sky-k { margin: 0 0 .4rem; }
.ey-bs-msg { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--al-text); }
.ey-bs-msg .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.ey-bs-msg b { color: #fff; }
.ey-bs-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.ey-bs-btns button { display: inline-flex; flex-direction: column; align-items: flex-start; padding: .4rem .8rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .76rem; cursor: pointer; line-height: 1.2; text-align: left; }
.ey-bs-btns button small { font-family: var(--zh); font-weight: 600; font-size: .68rem; color: var(--al-mute); }
.ey-bs-btns button:hover { background: rgba(255,255,255,.08); }
.ey-bs-btns .ey-bs-3d { border: 0; background: #ff5c7a; color: #2a0610; }
.ey-bs-btns .ey-bs-3d small { color: rgba(42,6,16,.75); }
.ey-bs-btns .ey-bs-3d:hover { background: #ff7891; }
.ey-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--al-line); }
.ey-calc label { font-size: .74rem; font-weight: 800; color: #fff; line-height: 1.2; }
.ey-calc label small { display: block; font-family: var(--zh); font-weight: 600; font-size: .68rem; color: var(--al-mute); }
.ey-calc label span { display: flex; align-items: center; gap: .35rem; margin-top: .25rem; font-weight: 700; color: var(--al-mute); }
.ey-calc input { width: 5.2em; padding: .3rem .45rem; border-radius: 8px; border: 1px solid var(--al-line); background: rgba(255,255,255,.06); color: #fff; font: 700 .9rem var(--sans); }
.ey-calc input:focus-visible { outline: 2px solid #ff5c7a; outline-offset: 2px; }
.ey-angle { grid-column: 1 / -1; margin: 0; font-size: .8rem; line-height: 1.5; color: var(--al-text); }
.ey-angle .zh { display: block; color: var(--al-mute); }
.ey-angle b { color: #ffd0d9; }

/* 滑桿：光線（暗→亮）、水晶體（扁→圓） */
.ey-light::-webkit-slider-runnable-track { background: linear-gradient(90deg, #1b2440, #ffd36e); }
.ey-light::-moz-range-track { background: linear-gradient(90deg, #1b2440, #ffd36e); }
.ey-lens::-webkit-slider-runnable-track { background: linear-gradient(90deg, #b8f28a 0 var(--p, 0%), rgba(255,255,255,.12) var(--p, 0%)); }
.ey-lens::-moz-range-progress { height: 6px; border-radius: 999px; background: #b8f28a; }

.al-lab.ey-lb { font-size: .68rem; color: #e8f0ff; }
.al-lab.ey-lb-m { color: #ffc4b8; border-color: rgba(168,64,60,.6); }
.al-lab.ey-lb-d { color: #2a2206; background: #f6e7b0; border-color: #f6e7b0; }
.al-lab.ey-lb-f { color: #0a1224; background: #fff; border-color: #fff; }
.al-lab.ey-lb-i { color: #d6f8c0; border-color: rgba(184,242,138,.55); }
.al-lab.ey-lb-o { color: #d6f8c0; border-color: rgba(184,242,138,.35); font-weight: 600; }
.al-lab.ey-lb-v { color: #b9f0c9; border-color: rgba(125,220,154,.55); }
.al-lg-raytop i { border: 0; height: 4px; margin-top: .55rem; border-radius: 2px; background: #b8f28a; }
.al-lg-raybot i { border: 0; height: 4px; margin-top: .55rem; border-radius: 2px; background: #ffb066; }
.al-lg-focus i { border: 0; width: 10px; height: 10px; margin: .35rem .2rem 0; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.5); }
.al-lg-disc i { border: 0; background: radial-gradient(circle, #f6e7b0 0 45%, #e0805c 50%); }
.al-lg-visual i { border: 0; background: radial-gradient(circle, #b9f0c9, #2f9a52 70%, rgba(47,154,82,0)); }

@media (max-width: 1020px) {
  .ey-lab .al-space { aspect-ratio: 1 / 1; min-height: 380px; max-height: 80vh; }
  .ey-lab .ey-aside { display: block; }
  .ey-lab .ey-aside > .al-sky-k:not(:first-child) { margin-top: .9rem; }
  .ey-views { max-width: 560px; }
}
@media (max-width: 640px) {
  .ey-lab .al-space { aspect-ratio: 1 / 1; min-height: 340px; }   /* 場景是橫的，手機用正方形少一點空白 */
  .ey-strip { grid-template-columns: 1fr; }
  .ey-card { height: 140px; }
  .ey-objs button, .ey-types button { font-size: .7rem; padding: .4rem .4rem; }
  .ey-mag { font-size: .64rem; right: 3.4rem; }
}