/* 生命與生態 Living Things：本系列多出來的樣式（class 前綴 lf-）。
   面板用 astro.css 的 .astro-lab／.al-*，卡片、數字、小工具外框用 chips.css 的 cp-*，三個檔一起載。 */

/* ---------- 第二課：葉子怎麼用陽光做出食物？ ---------- */
@media (min-width: 1021px) { .lf-ph-lab .al-space { min-height: 640px; } }
.lf-ph-msg[hidden] { display: none; }
.lf-ph-bar { width: 0; background: linear-gradient(90deg, #4fae5a, #ffd84a) !important; transition: width .2s linear; }
.lf-ph-status small { display: block; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: var(--al-mute); }
.al-lab.lf-ph-lb-l { border-color: #ffe27a; } .al-lab.lf-ph-lb-o { border-color: #7df0e0; } .al-lab.lf-ph-lb-w { border-color: #58b4ff; }
.al-lg-lfphlight i, .al-lg-lfphco2 i, .al-lg-lfphwater i, .al-lg-lfpho2 i { border: 0; border-radius: 50%; width: 10px; height: 10px; margin: .35rem 10px 0; }
.al-lg-lfphlight i { background: #ffe27a; } .al-lg-lfphco2 i { background: #b9c2d0; } .al-lg-lfphwater i { background: #58b4ff; } .al-lg-lfpho2 i { background: #7df0e0; }
.al-lg-lfphsugar i { border: 0; width: 10px; height: 10px; margin: .35rem 10px 0; background: #ffa24a; }
.al-lg-lfphchl i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; background: #1f8a3a; box-shadow: 0 0 0 2px #7dff6a55; }
/* 頁面小工具：做糖的配方 */
.lf-rc .al-age::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--brand) 0 var(--p, 0%), #e5dfd0 var(--p, 0%)); }
.lf-rc .al-age::-webkit-slider-thumb { border-color: var(--brand); }
.lf-rc .al-age::-moz-range-progress { background: var(--brand); }
.lf-rc-k { margin: .9rem 0 .3rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.lf-rc-dots { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; padding: .5rem; border-radius: 12px; background: #f3efe3; }
.lf-rc-dots i, .lf-rc-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.lf-rc-dots i.c, .lf-rc-key.c { background: #8b93a6; } .lf-rc-dots i.w, .lf-rc-key.w { background: #58b4ff; } .lf-rc-dots i.o, .lf-rc-key.o { background: #3fd0bd; }
.lf-rc-dots i.s, .lf-rc-key.s { background: #ffa24a; border-radius: 2px; width: 14px; height: 14px; }
.lf-rc-key { margin-right: .5rem; vertical-align: -1px; }
.lf-rc-out .cp-home-sub { margin: .15rem 0; font-size: 1rem; } .lf-rc-out .cp-home-sub b { font-size: 1.5rem; margin-right: .35rem; font-variant-numeric: tabular-nums; }
.lf-rc-k2 { margin-top: .9rem; }

/* ---------- 第一課：細胞是什麼？ ---------- */
@media (min-width: 1021px) { .lf-ce-lab .al-space { min-height: 600px; } }
.lf-ce-msg[hidden] { display: none; }
.lf-ce-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-bottom: .8rem; }
.lf-ce-parts button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: center; 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; cursor: pointer; }
.lf-ce-parts button[hidden] { display: none; }
.lf-ce-parts button small { grid-column: 2; font-family: var(--zh); font-weight: 600; font-size: .72rem; color: var(--al-mute); }
.lf-ce-parts button[aria-pressed="true"] { border-color: var(--al-sun); background: #22345f; }
.lf-ce-dot { grid-row: span 2; width: 13px; height: 13px; border-radius: 50%; }
.lf-ce-membrane { background: #f2a6b8; } .lf-ce-nucleus { background: #8a63c9; } .lf-ce-mito { background: #ff9a4a; } .lf-ce-cytoplasm { background: #ffe9c9; }
.lf-ce-wall { background: #6fae4f; border-radius: 3px; } .lf-ce-chloroplast { background: #2f9a3f; } .lf-ce-vacuole { background: #6fc4f0; }
.al-lg-lfcem i, .al-lg-lfcen i, .al-lg-lfceo i, .al-lg-lfceg i, .al-lg-lfcev i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfcem i { background: #f2a6b8; } .al-lg-lfcen i { background: #8a63c9; } .al-lg-lfceo i { background: #ff9a4a; } .al-lg-lfceg i { background: #4fa64a; border-radius: 3px; } .al-lg-lfcev i { background: #6fc4f0; }
/* 頁面小工具：這是哪一種細胞？ */
.lf-so-sws { display: grid; gap: .4rem; margin: .5rem 0 .9rem; }
.lf-so-sw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; padding: .55rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); font-weight: 800; font-size: .9rem; cursor: pointer; }
.lf-so-sw input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
.lf-so-sw small { display: block; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: var(--ink-soft); }
.lf-so-pic { position: relative; width: 170px; height: 120px; margin: 0 auto .6rem; background: #ffe3d0; border: 4px solid #f2a6b8; border-radius: 50%; transition: border-radius .3s, border-color .3s, border-width .3s; }
.lf-so-pic[data-wall="1"] { border-radius: 12px; border-color: #6fae4f; border-width: 8px; }
.lf-so-nuc { position: absolute; left: 22%; top: 30%; width: 34px; height: 34px; border-radius: 50%; background: #8a63c9; }
.lf-so-vac { position: absolute; left: 38%; top: 16%; width: 54%; height: 66%; border-radius: 45%; background: #a9dcf6; opacity: 0; transition: opacity .3s; }
.lf-so-pic[data-vac="1"] .lf-so-vac { opacity: 1; } .lf-so-pic[data-vac="1"] .lf-so-nuc { left: 8%; top: 12%; width: 26px; height: 26px; }
.lf-so-c { position: absolute; width: 20px; height: 11px; border-radius: 50%; background: #2f9a3f; opacity: 0; transition: opacity .3s; }
.lf-so-c.c1 { left: 10%; bottom: 12%; } .lf-so-c.c2 { left: 44%; bottom: 4%; transform: rotate(20deg); } .lf-so-c.c3 { right: 6%; top: 6%; transform: rotate(-30deg); }
.lf-so-pic[data-chl="1"] .lf-so-c { opacity: 1; }
.lf-so-out .cp-home-big { font-size: 1.35rem; }

/* ---------- 第三課：DNA 是什麼？ ---------- */
@media (min-width: 1021px) { .lf-dn-lab .al-space { min-height: 640px; } }
.lf-dn-msg[hidden] { display: none; }
.cp-ht-bar .lf-dn-bar { background: linear-gradient(90deg, #d4dcec, #ffa64d); }
.lf-dn-k { margin-top: .9rem; }
.lf-dn-seq, .lf-dn-mate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.lf-dn-seq { margin-top: .3rem; }
.lf-dn-mate { margin-top: 3px; }
.lf-dn-seq button, .lf-dn-mate i { display: grid; place-items: center; aspect-ratio: 1 / 1.25; min-width: 0; padding: 0; border-radius: 6px; border: 2px solid var(--c, #888); font-family: var(--sans); font-style: normal; font-weight: 800; font-size: .82rem; color: #fff; }
.lf-dn-seq button { background: color-mix(in srgb, var(--c, #888) 38%, #0d1830); cursor: pointer; }
.lf-dn-seq button:hover, .lf-dn-seq button:focus-visible { background: var(--c); outline: none; }
.lf-dn-seq button.is-chg { box-shadow: 0 0 0 2px #fff; }
.lf-dn-mate i { background: transparent; color: var(--c); border-style: dashed; }
.lf-dn-cap { margin: .4rem 0 .8rem; font-size: .72rem; color: var(--al-mute); line-height: 1.5; }
.lf-dn-reset { margin-left: .2rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--al-line); background: transparent; color: var(--al-text); font: inherit; font-weight: 700; cursor: pointer; }
.al-lg-lfdna i, .al-lg-lfdnt i, .al-lg-lfdnc i, .al-lg-lfdng i { border: 0; border-radius: 3px; width: 14px; height: 8px; margin: .42rem 8px 0; }
.al-lg-lfdna i { background: #4caf6a; } .al-lg-lfdnt i { background: #e8625a; } .al-lg-lfdnc i { background: #4f9df0; } .al-lg-lfdng i { background: #f2c14e; }
.al-lg-lfdnold i, .al-lg-lfdnnew i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfdnold i { background: #d4dcec; } .al-lg-lfdnnew i { background: #ffa64d; }
/* 頁面小工具：用四個字母寫密碼 */
.lf-cd-keys { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .9rem; }
.lf-cd-key { min-width: 2.7rem; min-height: 2.7rem; padding: 0 .7rem; border-radius: 12px; border: 2px solid var(--c, var(--line)); background: color-mix(in srgb, var(--c, #fff) 16%, #fff); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.lf-cd-key.lf-cd-fn { background: var(--cream); font-size: .85rem; }
.lf-cd-key small { margin-left: .3rem; font-family: var(--zh); font-weight: 600; color: var(--ink-soft); }
.lf-cd-cap { margin: .2rem 0; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.lf-cd-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; min-height: 2.1rem; max-width: 26rem; }
.lf-cd-row i { display: grid; place-items: center; aspect-ratio: 1 / 1.15; border-radius: 7px; background: var(--c); color: #fff; font-style: normal; font-weight: 800; font-size: .95rem; }
.lf-cd-bot { margin-top: 3px; } .lf-cd-bot i { background: color-mix(in srgb, var(--c) 22%, #fff); color: var(--ink); border: 2px solid var(--c); }
.lf-cd-row em { grid-column: 1 / -1; align-self: center; color: var(--ink-soft); }
.lf-cd-full { margin: .5rem 0 0; font-size: .82rem; color: var(--ink-soft); } .lf-cd-full[hidden] { display: none; }
.lf-cd-out .cp-home-big { font-size: 1.9rem; }

/* ---------- 第四課：細菌和病毒哪裡不一樣？ ---------- */
@media (min-width: 1021px) { .lf-gm-lab .al-space { min-height: 600px; } }
.lf-gm-msg[hidden] { display: none; }
.cp-ht-bar .lf-gm-bar { background: linear-gradient(90deg, #58c9a0, #c77be8); }
.al-lg-lfgmb i, .al-lg-lfgmd i, .al-lg-lfgmv i, .al-lg-lfgmn i, .al-lg-lfgmg i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfgmb i { background: #58c9a0; border-radius: 6px; width: 18px; margin: .28rem 6px 0; } .al-lg-lfgmd i { background: #ffd84a; } .al-lg-lfgmv i { background: #c77be8; } .al-lg-lfgmn i { background: #ff7a6b; } .al-lg-lfgmg i { background: #ff4a4a; }
/* 頁面小工具：一毫米可以排幾個？ */
.lf-ru-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .5rem 0 1rem; }
.lf-ru-pick button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: .86rem; text-align: left; cursor: pointer; }
.lf-ru-pick button small { grid-column: 2; font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.lf-ru-pick button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.lf-ru-i { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; }
.lf-ru-virus { background: #c77be8; } .lf-ru-bacteria { background: #58c9a0; border-radius: 7px; width: 22px; }
.lf-ru-scale { margin: .2rem .6rem 1rem; }
.lf-ru-line { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #c77be8, #58c9a0); }
.lf-ru-dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 4px solid #c77be8; transition: left .35s; }
.lf-ru-dot[data-kind="bacteria"] { border-color: #2f8f6c; }
.lf-ru-ticks { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.lf-ru-out .cp-home-big { font-size: 1.9rem; }
@media (max-width: 520px) { .lf-ru-pick { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 第五課：種子怎麼知道什麼時候該發芽？ ---------- */
@media (min-width: 1021px) { .lf-sd-lab .al-space { min-height: 640px; } }
.lf-sd-msg[hidden] { display: none; }
.cp-ht-bar .lf-sd-bar { background: linear-gradient(90deg, #c9a15a, #ead9a4); }
.al-lg-lfsdf i, .al-lg-lfsdc i, .al-lg-lfsdr i, .al-lg-lfsds i, .al-lg-lfsdp i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfsdf i { background: #ead9a4; } .al-lg-lfsdc i { background: #8a5a2b; } .al-lg-lfsdr i { background: #f3ead2; } .al-lg-lfsds i { background: #7fc65a; } .al-lg-lfsdp i { background: #e6da7c; }
/* 頁面小工具：它會不會醒？ */
.lf-wk-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .5rem 0 1rem; }
.lf-wk-pick button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: .86rem; text-align: left; cursor: pointer; }
.lf-wk-pick button small { grid-column: 2; font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.lf-wk-pick button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.lf-wk-ic { grid-row: span 2; font-size: 1.4rem; }
.lf-wk-out .cp-home-big { font-size: 1.45rem; }
@media (max-width: 520px) { .lf-wk-pick { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 第六課：花為什麼要開？ ---------- */
@media (min-width: 1021px) { .lf-fl-lab .al-space { min-height: 640px; } }
.lf-fl-msg[hidden] { display: none; }
.cp-ht-bar .lf-fl-bar { background: linear-gradient(90deg, #ffd84a, #f08a3c); }
.al-lg-lfflp i, .al-lg-lffla i, .al-lg-lffls i, .al-lg-lfflo i, .al-lg-lfflt i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfflp i { background: #f58fb5; } .al-lg-lffla i { background: #ffd84a; } .al-lg-lffls i { background: #9fd27a; } .al-lg-lfflo i { background: #f08a3c; } .al-lg-lfflt i { background: #ffb347; border-radius: 3px; width: 16px; height: 6px; margin: .48rem 7px 0; }
/* 頁面小工具：誰來送花粉？ */
.lf-gs-sws { display: grid; gap: .4rem; margin: .5rem 0 .9rem; }
.lf-gs-sw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; padding: .55rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); font-weight: 800; font-size: .9rem; cursor: pointer; }
.lf-gs-sw input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
.lf-gs-sw small { display: block; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: var(--ink-soft); }
.lf-gs-pic { position: relative; width: 150px; height: 130px; margin: 0 auto .6rem; }
.lf-gs-c { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #9fd27a; border: 4px solid #6aa84f; }
.lf-gs-p { position: absolute; left: 50%; top: 50%; width: 30px; height: 46px; margin: -52px 0 0 -15px; border-radius: 50%; background: #f58fb5; transform-origin: 50% 52px; opacity: 0; transition: opacity .3s; }
.lf-gs-p.p2 { transform: rotate(72deg); } .lf-gs-p.p3 { transform: rotate(144deg); } .lf-gs-p.p4 { transform: rotate(216deg); } .lf-gs-p.p5 { transform: rotate(288deg); }
.lf-gs-pic[data-petals="1"] .lf-gs-p { opacity: 1; }
.lf-gs-n { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ffc93c; opacity: 0; transition: opacity .3s; }
.lf-gs-pic[data-nectar="1"] .lf-gs-n { opacity: 1; }
.lf-gs-d { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e9c93a; opacity: 0; transition: opacity .3s; }
.lf-gs-d.d1 { left: 4%; top: 12%; } .lf-gs-d.d2 { left: 16%; top: 78%; } .lf-gs-d.d3 { left: 84%; top: 20%; } .lf-gs-d.d4 { left: 92%; top: 60%; } .lf-gs-d.d5 { left: 70%; top: 90%; } .lf-gs-d.d6 { left: 0; top: 50%; }
.lf-gs-pic[data-dust="1"] .lf-gs-d { opacity: 1; }
.lf-gs-out .cp-home-big { font-size: 1.45rem; }

/* ---------- 第七課：水怎麼爬到樹頂？ ---------- */
@media (min-width: 1021px) { .lf-tr-lab .al-space { min-height: 660px; } }
.lf-tr-msg[hidden] { display: none; }
.cp-ht-bar .lf-tr-bar { background: linear-gradient(90deg, #1a6fd0, #7fd0ff); }
.al-lg-lftrw i, .al-lg-lftrv i, .al-lg-lftrl i, .al-lg-lftrt i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lftrw i { background: #4fb4ff; } .al-lg-lftrv i { background: #d7ecff; } .al-lg-lftrl i { background: #3f9f48; } .al-lg-lftrt i { background: #8a5a3a; border-radius: 3px; }
/* 頁面小工具：這棵樹有幾根吸管那麼高？ */
.lf-cl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 1rem; align-items: stretch; margin: .5rem 0 1rem; }
.lf-cl-pick { display: grid; gap: .4rem; }
.lf-cl-pick button { padding: .55rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: .86rem; text-align: left; cursor: pointer; }
.lf-cl-pick button small { display: block; font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.lf-cl-pick button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.lf-cl-pic { position: relative; min-height: 190px; border-bottom: 4px solid #8a6a44; }
.lf-cl-tree { position: absolute; left: 22px; bottom: 0; width: 18px; border-radius: 9px 9px 0 0; background: linear-gradient(#3f9f48, #3f9f48 22%, #8a5a3a 22%); transition: height .4s; }
.lf-cl-limit { position: absolute; left: 52px; bottom: 0; width: 10px; border-radius: 5px 5px 0 0; background: #4fb4ff; }
.lf-cl-cap { position: absolute; left: 44px; bottom: -1.5rem; font-size: .68rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.lf-cl-out .cp-home-big { font-size: 2rem; }

/* ---------- 第八課：葉子為什麼會變色？ ---------- */
@media (min-width: 1021px) { .lf-au-lab .al-space { min-height: 600px; } }
.lf-au-msg[hidden] { display: none; }
.lf-au-k { margin-top: 1rem; }
.lf-au-meters { display: grid; gap: .55rem; margin: .4rem 0 .2rem; }
.lf-au-m { display: grid; grid-template-columns: minmax(0, 1fr) 2.8rem; gap: .2rem .6rem; align-items: center; font-size: .78rem; font-weight: 800; color: var(--al-text); }
.lf-au-m span small { display: block; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.lf-au-m b { grid-row: span 2; text-align: right; font-size: .9rem; }
.lf-au-track { height: 9px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.lf-au-track i { display: block; height: 100%; border-radius: 99px; transition: width .2s; }
.lf-au-mg { background: #3f9f48; } .lf-au-my { background: #f2c23a; } .lf-au-mr { background: #d04a2f; }
.lf-au-sw { height: 34px; margin: .35rem 0 .9rem; border-radius: 10px; border: 1px solid var(--al-line); background: #6ca744; transition: background .2s; }
.al-lg-lfaug i, .al-lg-lfauy i, .al-lg-lfaur i, .al-lg-lfauc i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfaug i { background: #3f9f48; } .al-lg-lfauy i { background: #f2c23a; } .al-lg-lfaur i { background: #c82c2c; } .al-lg-lfauc i { background: #8a6a44; }
/* 頁面小工具：調調看色素 */
.lf-mx-row { display: grid; gap: .25rem; margin: .7rem 0; font-weight: 800; font-size: .9rem; }
.lf-mx-row small { margin-left: .35rem; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: var(--ink-soft); }
.lf-mx-row output { float: right; font-variant-numeric: tabular-nums; }
.lf-mx-row input { width: 100%; }
.lf-mx-row-g input { accent-color: #3f9f48; } .lf-mx-row-y input { accent-color: #d9a520; } .lf-mx-row-r input { accent-color: #c82c2c; }
.lf-mx-leaf { width: 96px; height: 96px; margin: .5rem 0 .8rem; border-radius: 4px 60% 4px 60%; border: 2px solid rgba(255,255,255,.35); background: #6ca744; transition: background .2s; }
.lf-mx-out .cp-home-big { font-size: 1.5rem; }

/* ---------- 第九課：鳥為什麼會飛？ ---------- */
@media (min-width: 1021px) { .lf-bd-lab .al-space { min-height: 620px; } }
.lf-bd-msg[hidden] { display: none; }
.lf-bd-k { margin-top: 1rem; }
.lf-bd-meters { display: grid; gap: .5rem; margin: .4rem 0 .9rem; }
.lf-bd-m { display: grid; gap: .2rem; font-size: .78rem; font-weight: 800; color: var(--al-text); }
.lf-bd-m span small { margin-left: .4rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.lf-bd-track { height: 9px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.lf-bd-track i { display: block; height: 100%; border-radius: 99px; transition: width .12s; }
.lf-bd-mlift { background: #6fe3ff; } .lf-bd-mweight { background: #fff; } .lf-bd-mthrust { background: #ffa64d; } .lf-bd-mdrag { background: #b8c2d6; }
.lf-bd-lab .lf-bd-p:disabled { opacity: .35; }
.al-lg-lfbdl i, .al-lg-lfbdw i, .al-lg-lfbdt i, .al-lg-lfbdd i, .al-lg-lfbdm i, .al-lg-lfbds i { border: 0; border-radius: 3px; width: 16px; height: 6px; margin: .48rem 7px 0; }
.al-lg-lfbdl i { background: #6fe3ff; } .al-lg-lfbdw i { background: #fff; } .al-lg-lfbdt i { background: #ffa64d; } .al-lg-lfbdd i { background: #b8c2d6; }
.al-lg-lfbdm i { background: #c0392b; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; } .al-lg-lfbds i { background: #e58aa0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
/* 頁面小工具：四種翅膀 */
.lf-wg-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .5rem 0 1rem; }
.lf-wg-pick button { padding: .55rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: .86rem; text-align: left; cursor: pointer; }
.lf-wg-pick button small { display: block; font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.lf-wg-pick button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.lf-wg-pic { display: grid; place-items: center; height: 110px; margin-bottom: .6rem; border-radius: 14px; background: linear-gradient(#cfe4ff, #eef6ff); }
.lf-wg-shape { display: block; background: #6f5a48; transition: all .35s; }
.lf-wg-shape[data-k="round"] { width: 120px; height: 62px; border-radius: 12px 70% 70% 12px / 12px 100% 100% 12px; }
.lf-wg-shape[data-k="fast"] { width: 150px; height: 46px; clip-path: polygon(0 0, 40% 0, 100% 78%, 96% 100%, 30% 62%, 0 70%); border-radius: 6px; }
.lf-wg-shape[data-k="long"] { width: 250px; height: 26px; border-radius: 6px 90% 90% 6px / 6px 100% 100% 6px; }
.lf-wg-shape[data-k="slot"] { width: 190px; height: 70px; border-radius: 10px 0 0 10px; clip-path: polygon(0 0, 72% 0, 100% 4%, 76% 14%, 100% 24%, 76% 34%, 100% 46%, 76% 54%, 100% 68%, 74% 74%, 96% 92%, 60% 100%, 0 100%); }
.lf-wg-out .cp-home-big { font-size: 1.35rem; }
.lf-wg-out .lf-wg-birds { display: block; font-weight: 800; }
@media (max-width: 520px) { .lf-wg-pick { grid-template-columns: minmax(0, 1fr); } .lf-wg-shape[data-k="long"] { width: 210px; } }

/* ---------- 第十課：魚怎麼在水裡呼吸？ ---------- */
@media (min-width: 1021px) { .lf-gl-lab .al-space { min-height: 620px; } }
.lf-gl-msg[hidden] { display: none; }
.lf-gl-k { margin-top: 1rem; }
.lf-gl-meters { display: grid; gap: .55rem; margin: .4rem 0 .9rem; }
.lf-gl-m { display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem; gap: .2rem .6rem; align-items: center; font-size: .78rem; font-weight: 800; color: var(--al-text); }
.lf-gl-m span small { margin-left: .4rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.lf-gl-m b { grid-row: span 2; text-align: right; font-size: 1rem; }
.lf-gl-track { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.lf-gl-track i { display: block; height: 100%; border-radius: 99px; transition: width .15s; }
.lf-gl-mw { background: #8fe9ff; } .lf-gl-mb { background: #ff5a4a; }
.cp-ht-bar .lf-gl-bar { background: linear-gradient(90deg, #7a1616, #ff5a4a); }
.al-lg-lfglo i, .al-lg-lfglb i, .al-lg-lfglw i, .al-lg-lfglr i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfglo i { background: #8fe9ff; } .al-lg-lfglb i { background: linear-gradient(90deg, #5e1010, #ff4a3a); width: 22px; border-radius: 6px; margin: .28rem 4px 0; } .al-lg-lfglw i { background: #2f7fd0; border-radius: 3px; } .al-lg-lfglr i { background: transparent; border: 2px solid #ffd84a; }
/* 頁面小工具：四種呼吸的辦法 */
.lf-br-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .5rem 0 1rem; }
.lf-br-pick button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: .86rem; text-align: left; cursor: pointer; }
.lf-br-pick button small { grid-column: 2; font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.lf-br-pick button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.lf-br-ic { grid-row: span 2; font-size: 1.4rem; }
.lf-br-out .cp-home-big { font-size: 1.3rem; }
@media (max-width: 520px) { .lf-br-pick { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 第十一課：毛毛蟲怎麼變成蝴蝶？ ---------- */
@media (min-width: 1021px) { .lf-mt-lab .al-space { min-height: 620px; } }
.lf-mt-msg[hidden] { display: none; }
.cp-ht-bar .lf-mt-bar { background: linear-gradient(90deg, #f5f0d0, #9fd04a 30%, #7fc65a 60%, #f08a2c); }
.al-lg-lfmte i, .al-lg-lfmtl i, .al-lg-lfmtp i, .al-lg-lfmta i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfmte i { background: #f5f0d0; } .al-lg-lfmtl i { background: #9fd04a; } .al-lg-lfmtp i { background: #7fc65a; border-radius: 40%; height: 16px; margin-top: .12rem; } .al-lg-lfmta i { background: #f08a2c; }
/* 頁面小工具：四個階段，還是三個？ */
.lf-cy-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .5rem 0 1rem; }
.lf-cy-pick button { display: grid; justify-items: center; gap: .1rem; padding: .55rem .4rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: .82rem; text-align: center; cursor: pointer; }
.lf-cy-pick button small { font-family: var(--zh); font-weight: 600; font-size: .76rem; color: var(--ink-soft); }
.lf-cy-pick button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.lf-cy-ic { font-size: 1.5rem; }
.lf-cy-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; padding: 0; list-style: none; counter-reset: cy; }
.lf-cy-steps li { counter-increment: cy; flex: 1 1 5.5rem; padding: .5rem .6rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 800; font-size: .84rem; }
.lf-cy-steps li::before { content: counter(cy) " · "; color: var(--brand); }
.lf-cy-steps li small { display: block; font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.lf-cy-out .cp-home-big { font-size: 2.2rem; }
@media (max-width: 520px) { .lf-cy-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 第十二課：候鳥怎麼認路？ ---------- */
@media (min-width: 1021px) { .lf-mg-lab .al-space { min-height: 640px; } }
.lf-mg-msg[hidden] { display: none; }
.lf-mg-k { margin-top: 1rem; }
.lf-mg-senses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: .4rem 0 .9rem; }
.lf-mg-senses button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: var(--al-text); font-family: var(--sans); font-weight: 800; font-size: .8rem; text-align: left; cursor: pointer; }
.lf-mg-senses button small { grid-column: 2; font-family: var(--zh); font-weight: 600; font-size: .72rem; color: var(--al-mute); }
.lf-mg-senses button em { grid-column: 2; font-style: normal; font-weight: 700; font-size: .68rem; color: var(--al-mute); }
.lf-mg-senses button[data-state="use"] { border-color: var(--al-sun); background: #22345f; } .lf-mg-senses button[data-state="use"] em { color: #ffd84a; }
.lf-mg-senses button[data-state="off"] { opacity: .5; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.5); } .lf-mg-senses button[data-state="off"] em { text-decoration: none; }
.lf-mg-dot { grid-row: span 3; width: 13px; height: 13px; border-radius: 50%; }
.lf-mg-sun { background: #ffe27a; } .lf-mg-stars { background: #fff; box-shadow: 0 0 0 2px #0b1630, 0 0 0 3px #fff; } .lf-mg-magnet { background: #b48cff; } .lf-mg-land { background: #8c7a5a; border-radius: 2px 2px 50% 50% / 60% 60% 10% 10%; }
.cp-ht-bar .lf-mg-bar { background: linear-gradient(90deg, #e0453a, #ffd84a 50%, #6aa85a); }
.al-lg-lfmgs i, .al-lg-lfmgt i, .al-lg-lfmgm i, .al-lg-lfmgl i, .al-lg-lfmgr i { border: 0; border-radius: 50%; width: 12px; height: 12px; margin: .28rem 9px 0; }
.al-lg-lfmgs i { background: #ffe27a; } .al-lg-lfmgt i { background: #fff; } .al-lg-lfmgm i { background: #b48cff; border-radius: 3px; width: 16px; height: 5px; margin: .5rem 7px 0; } .al-lg-lfmgl i { background: #8c7a5a; } .al-lg-lfmgr i { background: #e0453a; }
/* 頁面小工具：這段路有幾個台灣那麼長？ */
.lf-tp-pick { display: grid; gap: .4rem; margin: .5rem 0 1rem; }
.lf-tp-pick button { padding: .55rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: .86rem; text-align: left; cursor: pointer; }
.lf-tp-pick button small { display: block; font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.lf-tp-pick button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.lf-tp-track { height: 12px; margin-bottom: .9rem; border-radius: 99px; background: #e6e0d2; overflow: hidden; }
.lf-tp-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2f7fc4, #6aa85a); transition: width .4s; }
.lf-tp-out .cp-home-big { font-size: 2rem; }

/* ---------- 全系列共用 ---------- */
.lf-k { margin: 0 0 .1rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--al-mute); }
.lf-nums small { display: block; font-size: .7rem; font-weight: 600; color: var(--al-mute); line-height: 1.3; }
.al-lab.lf-lb-push { color: #2a1d00; background: #ffb347; border-color: #ffb347; font-weight: 800; }
.al-lab.lf-lb-push small { color: #4a3400; }
.cp-link.lf-link-soon { border-style: dashed; opacity: .78; cursor: default; }
.lf-safety-src { margin: 1rem 0 0; font-size: .86rem; color: var(--ink-soft); }
.lf-safety-src .zh { display: block; }