/* =========================================================
   萬物原理 · How Things Work — 課程頁專屬樣式
   只載在 /resources/classes/how-things-work/ 底下（build.py 的 _htw_head）。
   3D 面板、迷思、口訣、課堂活動等共用樣式在 astro.css，這裡只放本系列多出來的。
   ========================================================= */

/* ---------- 第一課：電池剖面 ---------- */
.bt-lab { --bt-li: #ffc94a; --bt-el: #58e1ff; --bt-ok: #4fd1a5; --bt-low: #ff6b5e; }
.bt-lab .al-stage { grid-template-columns: minmax(0, 1fr) 340px; }
.bt-lab .al-space { min-height: 600px; background: radial-gradient(70% 60% at 50% 45%, rgba(80,110,170,.18), transparent 70%); }
.bt-cut { position: absolute; left: 1rem; top: .8rem; right: 4rem; margin: 0; font-size: .72rem; color: var(--al-mute); pointer-events: none; }

.bt-aside { display: flex; flex-direction: column; gap: .7rem; }
.bt-aside .al-sky-k { margin-bottom: .45rem; }
.bt-phone { display: flex; align-items: center; gap: .8rem; }
.bt-cell { position: relative; flex: none; width: 92px; height: 40px; border: 3px solid #cfd8ea; border-radius: 9px; padding: 3px; }
.bt-cell::after { content: ""; position: absolute; right: -9px; top: 11px; width: 5px; height: 12px; border-radius: 0 3px 3px 0; background: #cfd8ea; }
.bt-fill { display: block; height: 100%; width: 85%; border-radius: 4px; background: var(--bt-ok); transition: width .25s, background .25s; }
.bt-phone.low .bt-fill { background: var(--bt-low); }
.bt-bolt { position: absolute; inset: 0; display: none; place-items: center; font-size: 1.2rem; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.6); }
.bt-phone.charging .bt-bolt { display: grid; }
.bt-pct { font-family: var(--serif); font-size: 2.5rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.bt-state { margin: .5rem 0 0; font-size: .95rem; font-weight: 800; color: var(--al-sun); line-height: 1.2; }
.bt-state small { display: block; font-family: var(--zh); font-weight: 600; font-size: .82rem; color: var(--al-mute); margin-top: .1rem; }

.bt-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.bt-modes 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: .74rem; cursor: pointer; transition: background .2s, border-color .2s; }
.bt-modes button i { font-style: normal; font-size: 1.15rem; }
.bt-modes small { display: block; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.bt-modes button:hover { background: rgba(255,255,255,.07); }
.bt-modes 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; }

.bt-nums { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem .6rem; }
.bt-nums dt { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--al-mute); line-height: 1.25; }
.bt-nums dd { margin: .15rem 0 0; font-size: 1rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.bt-count { margin: 0; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); font-size: .8rem; line-height: 1.45; color: var(--al-text); }
.bt-count b { font-family: var(--serif); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.bt-ions { color: var(--bt-li); }
.bt-els { color: var(--bt-el); }
.bt-count .zh, .bt-msg .zh { display: block; color: var(--al-mute); margin-top: .15rem; }
.bt-msg { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--al-text); }
.bt-aging { display: block; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--al-line); color: #c9ced8; }

.bt-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; margin: .2rem 0 .6rem; }
.bt-sliders .al-slider > span { text-transform: none; letter-spacing: .02em; }
.bt-sliders output { margin-left: .3rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.bt-cyc::-webkit-slider-runnable-track { background: linear-gradient(90deg, #9aa3b4 0 var(--p, 0%), rgba(255,255,255,.12) var(--p, 0%)); }
.bt-cyc::-webkit-slider-thumb { border-color: #9aa3b4; }
.bt-cyc::-moz-range-progress { background: #9aa3b4; }

/* 3D 裡的標籤：英文一行、中文一行 */
.al-lab.bt-lb { text-align: center; line-height: 1.25; padding: .18rem .6rem; }
.al-lab.bt-lb small { display: block; font-family: var(--zh); font-weight: 600; font-size: .66rem; color: var(--al-mute); }
.al-lab.bt-lb-a { border-color: rgba(190,205,230,.45); }
.al-lab.bt-lb-c { border-color: rgba(160,140,255,.5); color: #e2dcff; }
.al-lab.bt-lb-e { border-color: rgba(90,160,240,.5); color: #cfe4ff; }
.al-lab.bt-lb-li { color: var(--bt-li); border-color: rgba(255,201,74,.5); }
.al-lab.bt-lb-el { color: var(--bt-el); border-color: rgba(88,225,255,.45); }
.al-lab.bt-lb-b { color: #ffe3a3; border-color: rgba(255,211,110,.4); }
.al-lab.bt-sel { color: #1b1405; background: var(--al-sun); border-color: var(--al-sun); box-shadow: 0 6px 20px -6px rgba(255,211,110,.8); }
.al-lab.bt-sel small { color: #3a2a06; }
.al-lab[hidden] { display: none; }
.bt-narrow .al-lab.bt-lb { font-size: .62rem; padding: .1rem .45rem; }
.bt-narrow .al-lab.bt-lb small { font-size: .6rem; }

/* 圖例與出處 */
.al-lg-li i { border: 0; background: var(--bt-li, #ffc94a); box-shadow: 0 0 10px 2px rgba(255,201,74,.5); }
.al-lg-el i { border: 0; width: 12px; height: 12px; margin: .3rem 3px 0; background: var(--bt-el, #58e1ff); box-shadow: 0 0 8px 2px rgba(88,225,255,.5); }
.al-lg-stuck i { border: 0; background: #7d828c; }
.bt-credit { margin: 0; padding: 0 1.3rem 1.1rem; font-size: .74rem; line-height: 1.6; color: #7f90b0; }
.bt-credit a { color: var(--al-mute); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1020px) {
  .bt-lab .al-stage { grid-template-columns: 1fr; }
  .bt-lab .al-space { aspect-ratio: 4 / 3; min-height: 380px; max-height: 80vh; }
  .bt-lab .bt-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.2rem; row-gap: .7rem; align-items: start; }
  .bt-top { grid-row: span 2; }
  .bt-msg { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bt-lab .al-space { aspect-ratio: 1 / 1; min-height: 0; }
  .bt-lab .bt-aside { grid-template-columns: 1fr; }
  .bt-top { grid-row: auto; }
  .bt-sliders { grid-template-columns: 1fr; }
  .bt-pct { font-size: 2.1rem; }
}

/* ---------- 課程頁的延伸段落 ---------- */
.hw-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 50% 38%, #1b2f5c, #070b17); font-size: 2rem; }
.hw-safety { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
.hw-safety li { position: relative; padding: 1rem 1.2rem 1rem 3.1rem; background: #fff; border: 1px solid #f0c9b8; border-radius: 14px; font-size: .98rem; line-height: 1.65; box-shadow: var(--shadow-sm); }
.hw-safety li::before { content: "\26A0"; position: absolute; left: 1.05rem; top: .95rem; font-size: 1.2rem; color: var(--sunset); }
.hw-safety li .zh { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; }
.hw-sources { margin: 0 0 2.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.hw-sources .sub-head { margin-top: 0; }
.hw-sources > .muted { margin: .2rem 0 .8rem; font-size: .9rem; }
.hw-sources ol { margin: 0; padding-left: 1.3em; display: grid; gap: .55rem; }
.hw-sources li { font-size: .92rem; line-height: 1.55; }
.hw-sources li > span { display: block; }
.hw-sources li .zh { display: inline; margin-left: .4rem; color: var(--ink-soft); font-size: .88rem; }
.hw-sources a { font-weight: 700; font-size: .86rem; color: var(--brand-dk); overflow-wrap: anywhere; }
.hw-progress { font-weight: 700; color: var(--brand-dk); }
@media (max-width: 760px) { .hw-safety { grid-template-columns: 1fr; } }
.bt-lab .al-hint { left: auto; right: 1rem; text-align: right; }
.bt-narrow .bt-cut { display: none; }

/* ---------- 第二課：發電機 ---------- */
@media (min-width: 1021px) { .gn-lab .al-space { min-height: 620px; } }
.gn-aside { gap: .9rem; }
.gn-drives { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gn-drives button { font-size: .7rem; }
.gn-crank { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: .55rem; padding: .7rem 1rem; border: 0; border-radius: 999px; background: var(--al-sun); color: #1b1405; font-family: var(--sans); font-weight: 800; font-size: .92rem; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 10px 26px -12px rgba(255,211,110,.9); }
.gn-crank small { font-family: var(--zh); font-weight: 600; font-size: .8rem; opacity: .8; }
.gn-crank.on { transform: scale(.97); background: #ffe39a; box-shadow: 0 0 0 4px rgba(255,211,110,.25); }
.gn-crank[hidden] { display: none; }
.gn-drive-msg { margin-top: .6rem; min-height: 6.5em; }
.gn-scope { position: relative; height: 132px; border-radius: 12px; border: 1px solid var(--al-line); background: #02040c; overflow: hidden; }
.gn-scope-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gn-aside > * { min-width: 0; }
.gn-nums { margin-top: .6rem; }
.gn-nums dd { font-size: .9rem; }
.gn-real { margin-top: .6rem; font-size: .76rem; }
.gn-real b { font-family: var(--sans); font-size: .9rem; color: var(--al-sun); }
.gn-speed-row { flex: 1 1 260px; margin: 0 0 0 .6rem; }
.gn-speed-row output { margin-left: .3rem; font-weight: 800; color: #fff; text-transform: none; letter-spacing: 0; }
.al-lab.gn-lb { font-family: var(--serif); font-size: .9rem; font-weight: 700; padding: .05rem .45rem; color: #fff; }
.al-lab.gn-lb-n { background: rgba(224,71,76,.85); border-color: rgba(255,160,160,.6); }
.al-lab.gn-lb-s { background: rgba(63,127,224,.85); border-color: rgba(160,200,255,.6); }
.al-lab.gn-lb-coil { color: #ffc89a; border-color: rgba(200,116,58,.55); }
.al-lg-magnet i { border: 0; background: linear-gradient(90deg, #e0474c 0 50%, #3f7fe0 50%); border-radius: 4px; }
.al-lg-coil i { border-color: #c8743a; }
@media (max-width: 1020px) {
  .gn-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .gn-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gn-top { grid-row: auto; }
}
@media (max-width: 640px) {
  .gn-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .gn-drive-msg { min-height: 0; }
  .gn-speed-row { margin: .6rem 0 0; flex-basis: 100%; }
}

/* 台灣發電結構長條圖 */
.hw-mix { margin-top: 1.4rem; padding: 1.3rem 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.hw-mix-bar { display: flex; height: 54px; border-radius: 12px; overflow: hidden; }
.hw-mix-seg { display: grid; place-items: center; min-width: 0; overflow: hidden; color: #fff; font-weight: 800; font-size: .95rem; white-space: nowrap; }
.hw-mix-seg.hw-mix-other, .hw-mix-seg.hw-mix-nuclear { font-size: 0; }
.hw-mix-gas { background: #e08a3c; }
.hw-mix-coal { background: #4b4f5c; }
.hw-mix-renew { background: #3aa77a; }
.hw-mix-other { background: #9aa3b4; }
.hw-mix-nuclear { background: #8a5ad6; }
.hw-mix-key { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1rem; }
.hw-mix-key li { display: grid; grid-template-columns: 14px auto; column-gap: .55rem; align-items: baseline; font-size: .92rem; line-height: 1.45; }
.hw-mix-key i { grid-row: span 3; width: 14px; height: 14px; border-radius: 4px; margin-top: .2rem; }
.hw-mix-key b { font-family: var(--serif); font-size: 1.3rem; }
.hw-mix-key .zh { color: var(--ink-soft); font-size: .88rem; }
.hw-mix-note { margin: 1rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--ink-soft); }
.hw-mix-note .zh { display: block; }
.hw-plant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-nospin { margin: auto 0 0; font-size: .82rem; font-weight: 800; color: var(--gold-dk); }
@media (max-width: 1020px) { .hw-plant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hw-plant-grid { grid-template-columns: 1fr; } .hw-mix { padding: 1rem; } .hw-mix-seg { font-size: .78rem; } }

/* ---------- 第三課：太陽能電池 ---------- */
@media (min-width: 1021px) { .sl-lab .al-space { min-height: 640px; } }
.sl-aside { gap: .9rem; }
.sl-weather { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-lights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl-lights button { font-size: .7rem; }
.sl-k2 { margin-top: .7rem !important; }
.sl-msg { margin-top: .6rem; min-height: 6.2em; }
.sl-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); }
.sl-seg { flex-basis: 0; transition: flex-grow .4s; }
.sl-b-elec, .sl-k-elec { background: #58e1ff; }
.sl-b-heat, .sl-k-heat { background: #ff8a2a; }
.sl-b-thru, .sl-k-thru { background: #8a3a3a; }
.sl-b-refl, .sl-k-refl { background: #9aa3b4; }
.sl-keys { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; font-size: .74rem; color: var(--al-text); }
.sl-keys li { display: grid; grid-template-columns: 10px 1fr auto; column-gap: .4rem; align-items: baseline; line-height: 1.25; }
.sl-keys i { width: 10px; height: 10px; border-radius: 3px; grid-row: span 2; align-self: center; }
.sl-keys .zh { grid-column: 2; color: var(--al-mute); font-size: .68rem; }
.sl-keys b { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; color: #fff; }
.sl-nums { grid-template-columns: 1fr 1.6fr; margin-top: .6rem; }
.sl-reset { margin-top: .5rem; 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; }
.sl-reset:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.sl-fact { margin-top: .6rem; font-size: .76rem; }
.al-lab.sl-lb-n { color: #bcd2ff; border-color: rgba(61,111,214,.6); }
.al-lab.sl-lb-p { color: #e3c8f2; border-color: rgba(138,90,168,.6); }
.al-lab.sl-lb-h { color: #ff8fb8; border-color: rgba(255,143,184,.5); }
.al-lg-ph i { border: 0; background: radial-gradient(circle, #fff 0 25%, #ffd36e 30%, rgba(255,211,110,0) 70%); }
.al-lg-heat i { border: 0; background: radial-gradient(circle, #ffb36a, #ff8a2a 55%, rgba(255,138,42,0) 72%); }
@media (max-width: 1020px) {
  .sl-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .sl-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sl-top { grid-row: auto; }
}
@media (max-width: 640px) {
  .sl-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .sl-msg { min-height: 0; }
}
.sl-aside > * { min-width: 0; }

/* ---------- 第四課：風機 ---------- */
@media (min-width: 1021px) { .wt-lab .al-space { min-height: 640px; } }
.wt-lab .al-space { background: linear-gradient(180deg, #13284d 0%, #0d1a33 60%); }
.wt-aside { gap: .9rem; }
.wt-aside > * { min-width: 0; }
.wt-big { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .5rem; flex-wrap: wrap; }
.wt-p { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.wt-state { font-size: .9rem; font-weight: 800; color: var(--al-sun); line-height: 1.15; }
.wt-state small { display: block; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: var(--al-mute); }
.wt-state[data-r="storm"] { color: #ff8a7a; }
.wt-state[data-r="calm"] { color: var(--al-mute); }
.wt-msg { margin-top: .6rem; min-height: 6.2em; }
.wt-curve { position: relative; height: 150px; border-radius: 12px; border: 1px solid var(--al-line); background: #02040c; overflow: hidden; }
.wt-curve-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wt-curve-note { margin: .4rem 0 0; font-size: .68rem; line-height: 1.45; color: #7f90b0; }
.wt-x8 { margin-top: .6rem; font-size: .78rem; }
.wt-x8 b { font-family: var(--sans); color: var(--al-sun); }
.wt-winds { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.wt-winds button { flex-direction: row; gap: .4rem; padding: .4rem .7rem; font-size: .74rem; }
.wt-winds button small { display: inline; margin-left: .2rem; }
.wt-ws-row { margin-top: .8rem; }
.wt-ws-row > span { text-transform: none; letter-spacing: .02em; }
.wt-ws-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.al-lab.wt-cmp { font-family: var(--serif); font-weight: 700; padding: .02rem .4rem; color: #cfe0ff; background: rgba(6,10,22,.4); }
@media (max-width: 1020px) {
  .wt-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .wt-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wt-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .wt-msg { min-height: 0; }
  .wt-winds { grid-template-columns: 1fr 1fr; width: 100%; }
}

/* 數字卡（第四課起：台灣的離岸風電） */
.hw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.hw-fact { padding: 1.2rem 1.25rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.hw-fact-n { display: block; font-family: var(--serif); font-size: 2.3rem; line-height: 1; color: var(--brand-dk); }
.hw-fact-u { display: block; margin-top: .3rem; font-size: .76rem; font-weight: 800; letter-spacing: .06em; color: var(--gold-dk); }
.hw-fact p { margin: .6rem 0 0; font-size: .92rem; line-height: 1.6; }
.hw-fact p .zh { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .88rem; }
.al-lg-wind i { border: 0; height: 4px; margin-top: .55rem; border-radius: 2px; background: linear-gradient(90deg, rgba(207,239,255,0), #cfefff); }

/* ---------- 第五課：網路封包 ---------- */
@media (min-width: 1021px) { .ip-lab .al-space { min-height: 620px; } }
.ip-aside { gap: .9rem; }
.ip-aside > * { min-width: 0; }
.ip-send { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ip-status { margin: .7rem 0 0; font-size: .95rem; font-weight: 800; color: #fff; line-height: 1.25; }
.ip-status small { display: block; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: var(--al-mute); }
.ip-status.ok { color: #7cf29a; }
.ip-k2 { margin-top: .8rem !important; }
.ip-slots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .25rem; min-height: 30px; }
.ip-slot { position: relative; display: grid; place-items: center; height: 30px; border-radius: 6px; border: 1px dashed rgba(160,180,230,.35); color: var(--al-mute); font-size: .78rem; font-weight: 800; transition: background .25s, color .25s, transform .25s; }
.ip-slot.on { border: 0; background: var(--c); color: #0b1220; transform: translateY(-2px); }
.ip-slot.on::after { content: attr(data-order); position: absolute; right: 2px; top: 1px; font-size: .5rem; font-weight: 700; opacity: .7; }
.ip-is-done .ip-slot.on { box-shadow: 0 0 0 2px #7cf29a; }
.ip-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .7rem; }
.ip-msg { min-height: 6.4em; }
.ip-toggles { margin-left: .4rem; }
.al-lab.ip-region { font-family: var(--serif); font-size: .82rem; color: #cfe0ff; background: rgba(6,10,22,.35); border-color: transparent; }
.al-lab.ip-lb-dc { color: #ffe3a3; border-color: rgba(255,211,110,.4); }
.al-lab.ip-lb-station { color: #cfe4ff; border-color: rgba(90,160,240,.5); }
.al-lab.ip-lb-lost { color: #fff; background: #d8382e; border-color: #ff8a7a; }
.al-lg-pkt i { border: 0; border-radius: 4px; background: linear-gradient(135deg, #58e1ff 0 33%, #ffd36e 33% 66%, #7cf29a 66%); }
.al-lg-req i { border: 0; background: #ffd36e; }
.al-lg-cable i { border: 0; height: 5px; margin-top: .5rem; border-radius: 3px; background: #2a6fb0; }
@media (max-width: 1020px) {
  .ip-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .ip-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ip-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .ip-msg { min-height: 0; }
  .ip-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ip-toggles { margin-left: 0; }
}

/* ---------- 第六課：手機訊號 ---------- */
@media (min-width: 1021px) { .cs-lab .al-space { min-height: 620px; } }
.cs-lab .al-space { background: linear-gradient(180deg, #16305a 0%, #0e1a33 70%); }
.cs-aside { gap: .9rem; }
.cs-aside > * { min-width: 0; }
.cs-phone { display: flex; align-items: flex-end; gap: .8rem; }
.cs-bars { display: inline-flex; align-items: flex-end; gap: 4px; height: 40px; }
.cs-bars i { display: block; width: 10px; border-radius: 2px; background: rgba(255,255,255,.14); transition: background .25s; }
.cs-bars i:nth-child(1) { height: 25%; } .cs-bars i:nth-child(2) { height: 50%; } .cs-bars i:nth-child(3) { height: 75%; } .cs-bars i:nth-child(4) { height: 100%; }
.cs-bars[data-b="4"] i { background: #3ad17a; }
.cs-bars[data-b="3"] i:nth-child(-n+3) { background: #a6e05a; }
.cs-bars[data-b="2"] i:nth-child(-n+2) { background: #ffd36e; }
.cs-bars[data-b="1"] i:nth-child(1) { background: #ff8a3a; }
.cs-bars-t { font-family: var(--serif); font-size: 1.8rem; line-height: 1; color: #fff; }
.cs-bars-t small { display: block; font-family: var(--zh); font-size: .85rem; font-weight: 600; color: var(--al-mute); margin-top: .2rem; }
.cs-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .8rem; }
.cs-nums dd small { display: inline; margin-left: .3rem; font-family: var(--zh); font-weight: 600; font-size: .72rem; color: var(--al-mute); }
.cs-los.bad { color: #ff8a7a; }
.cs-k2 { margin-top: .8rem !important; }
.cs-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-msg { min-height: 6.4em; }
.cs-pos-row { flex: 1 1 260px; margin: 0 0 0 .6rem; }
.cs-pos-row > span { text-transform: none; letter-spacing: .02em; }
.cs-pos-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.al-lab.cs-you { color: #fff; }
.cs-mini { margin-left: .3rem; letter-spacing: -1px; font-size: .8rem; }
.cs-mini.b4 { color: #3ad17a; } .cs-mini.b3 { color: #a6e05a; } .cs-mini.b2 { color: #ffd36e; } .cs-mini.b1 { color: #ff8a3a; } .cs-mini.b0 { color: #ff6b5e; }
.al-lg-cov i { border: 0; border-radius: 4px; background: linear-gradient(90deg, #3ad17a, #ffd36e, #d8382e); }
.al-lg-link i { border: 0; height: 3px; margin-top: .55rem; border-radius: 2px; background: repeating-linear-gradient(90deg, #3ad17a 0 6px, transparent 6px 9px); }
.al-lg-ring i { border-color: #4fd1c5; }
@media (max-width: 1020px) {
  .cs-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .cs-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cs-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .cs-msg { min-height: 0; }
  .cs-pos-row { margin: .6rem 0 0; flex-basis: 100%; }
}

/* ---------- 第七課：GPS ---------- */
@media (min-width: 1021px) { .gp-lab .al-space { min-height: 640px; } }
.gp-lab .al-space { background: radial-gradient(80% 70% at 50% 45%, rgba(40,70,140,.25), transparent 70%), #050a18; }
.gp-aside { gap: .9rem; }
.gp-aside > * { min-width: 0; }
.gp-sats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp-sats button i { font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; }
.gp-where { margin: .8rem 0 .55rem; font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.25; }
.gp-where small { display: block; font-family: var(--zh); font-weight: 600; font-size: .85rem; color: var(--al-mute); }
.gp-where.ok { color: #7cf29a; }
.gp-where.bad { color: #ff8a7a; }
.gp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-variant-numeric: tabular-nums; }
.gp-list li { display: grid; grid-template-columns: 12px minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: .45rem; align-items: center; font-size: .84rem; color: #fff; }
.gp-list li i { width: 12px; height: 12px; border-radius: 50%; }
.gp-list li span { text-align: right; }
.gp-list .gp-head { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--al-mute); align-items: end; }
.gp-list .gp-head b { font-weight: 700; }
.gp-list .gp-head small { display: block; font-family: var(--zh); letter-spacing: 0; text-transform: none; font-size: .62rem; }
.gp-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .8rem; }
.gp-nums dd small { display: inline; margin-left: .3rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: #7cf29a; }
.gp-msg { min-height: 6.4em; }
.gp-err-row { flex: 1 1 280px; margin: 0 0 0 .6rem; }
.gp-err-row > span { text-transform: none; letter-spacing: .02em; }
.gp-err-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.gp-err-row output small { font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.al-lab.gp-lb-you { color: #ffd0cc; border-color: rgba(255,74,74,.6); }
.al-lab.gp-lb-dot { color: #cfe4ff; border-color: rgba(61,139,255,.8); }
.al-lab.gp-lb-q { padding: .05rem .45rem; font-weight: 800; }
.al-lab.gp-lb-sat { color: #fff; }
.al-lg-gcircle i { border: 0; height: 4px; margin-top: .5rem; border-radius: 2px; background: linear-gradient(90deg, #4fd1ff 0 25%, #ff7ad9 25% 50%, #9cf25a 50% 75%, #ffb02e 75%); }
.al-lg-gsat i { border: 0; border-radius: 3px; background: linear-gradient(90deg, #ffb02e 0 33%, #f2f4f8 33% 66%, #4a505c 66%); }
.al-lg-gdot i { border: 2px solid #8cc2ff; background: #3d8bff; }
.al-lg-gpin i { border: 0; background: #ff4a4a; }
@media (max-width: 1020px) {
  .gp-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .gp-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gp-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .gp-msg { min-height: 0; }
  .gp-err-row { margin: .6rem 0 0; flex-basis: 100%; }
}
/* 六張數字卡：桌機排成 3 × 2，不要 5 + 1 */
@media (min-width: 1021px) { .hw-facts:has(> .hw-fact:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 第八課：記憶體 ---------- */
@media (min-width: 1021px) { .mb-lab .al-space { min-height: 660px; } }
.mb-lab .al-space { background: radial-gradient(75% 65% at 50% 45%, rgba(60,90,150,.22), transparent 70%), #0b1326; transition: filter .4s; }
.mb-off .al-space { filter: brightness(.7) saturate(.7); }
.mb-aside { gap: .9rem; }
.mb-aside > * { min-width: 0; }
.mb-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mb-k2 { display: block; margin-top: .8rem !important; }
.mb-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .35rem; }
.mb-text { min-width: 0; padding: .5rem .65rem; border-radius: 10px; border: 1px solid var(--al-line); background: rgba(255,255,255,.06); color: #fff; font: 700 1rem var(--sans); }
.mb-text:focus { outline: 2px solid var(--al-sun); outline-offset: 1px; }
.mb-form button { padding: .35rem .6rem; border-radius: 10px; border: 1px solid var(--al-line); background: rgba(255,255,255,.05); color: #fff; font: 800 .8rem var(--sans); cursor: pointer; line-height: 1.15; }
.mb-form button small { display: block; font-family: var(--zh); font-weight: 600; font-size: .66rem; color: var(--al-mute); }
.mb-form .mb-save { border-color: var(--al-sun); background: rgba(255,211,110,.14); }
.mb-form button:disabled { opacity: .4; cursor: not-allowed; }
.mb-bytes { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .1rem; max-height: 15.5rem; overflow-y: auto; font-variant-numeric: tabular-nums; }
.mb-bytes li { display: grid; grid-template-columns: 1.6rem 2rem 2.4rem minmax(0, 1fr); gap: .4rem; align-items: center; font-size: .82rem; color: #fff; }
.mb-bytes .mb-a { color: var(--al-mute); font-size: .72rem; }
.mb-bytes b { font-family: var(--zh), var(--sans); }
.mb-bytes .mb-d { text-align: right; color: #cfe0ff; }
.mb-bits { display: inline-flex; gap: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mb-bits i { font-style: normal; width: 1.05em; text-align: center; border-radius: 3px; color: #6f86b0; background: rgba(255,255,255,.04); }
.mb-bits i.one { color: #0b1326; background: #58e1ff; font-weight: 800; }
.mb-bytes .mb-head { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--al-mute); align-items: end; }
.mb-bytes .mb-head b { font-family: var(--sans); font-weight: 700; }
.mb-bytes .mb-head small { display: block; font-family: var(--zh); letter-spacing: 0; text-transform: none; font-size: .6rem; }
.mb-bytes .mb-head .mb-bits { display: block; font-family: var(--sans); }
.mb-bytes .mb-empty { display: block; color: var(--al-mute); font-size: .85rem; }
.mb-bytes .mb-empty small { display: block; font-family: var(--zh); }
.mb-backrow { display: flex; align-items: baseline; gap: .6rem; margin: .7rem 0 0; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--al-mute); }
.mb-back { font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #fff; font-family: var(--zh), var(--sans); overflow-wrap: anywhere; }
.mb-back small { margin-left: .3rem; font-size: .72rem; font-weight: 700; }
.mb-back.ok small { color: #7cf29a; } .mb-back.bad small { color: #ff8a7a; }
.mb-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .8rem; }
.mb-nums dd small { display: inline; margin-left: .3rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.mb-nums dd.bad { color: #ff8a7a; }
.mb-msg { min-height: 6.4em; }
.mb-toggles { margin-left: .4rem; }
.al-lab.mb-lb-place { color: #ffd36e; border-color: rgba(255,211,110,.4); font-variant-numeric: tabular-nums; padding: .05rem .4rem; }
.al-lab.mb-lb-addr { color: #9fb2d6; border-color: transparent; background: transparent; padding: 0 .2rem; font-size: .72rem; }
.al-lab.mb-lb-char { color: #fff; font-family: var(--zh), var(--sans); font-weight: 800; padding: .05rem .45rem; }
.al-lab.mb-lb-char small { display: inline; margin-left: .25rem; font-size: .58rem; }
.bt-narrow .al-lab.mb-lb-place { font-size: .55rem; padding: 0 .2rem; }
.bt-narrow .al-lab.mb-lb-addr { font-size: .55rem; }
.al-lg-mone i { border: 0; border-radius: 3px; background: #58e1ff; }
.al-lg-mzero i { border: 1px solid rgba(207,228,255,.5); border-radius: 3px; background: transparent; }
.al-lg-mline i { border: 0; height: 3px; margin-top: .55rem; background: #ffd36e; }
.al-lg-mlid i { border: 0; border-radius: 3px; background: #8a93a6; }
@media (max-width: 1020px) {
  .mb-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .mb-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mb-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .mb-msg { min-height: 0; }
  .mb-toggles { margin-left: 0; }
}
.mb-back small.mb-z { margin-left: .3rem; color: var(--al-mute); }

/* ---------- 第九課：天空為什麼是藍的 ---------- */
@media (min-width: 1021px) { .bs-lab .al-space { min-height: 640px; } }
.bs-lab .al-space { background: #04070f; }
.bs-aside { gap: .9rem; }
.bs-aside > * { min-width: 0; }
.bs-viewbox { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--al-line); background: #000; }
.bs-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bs-when { position: absolute; right: .5rem; bottom: .35rem; font-size: .72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); text-align: right; line-height: 1.2; }
.bs-when small { display: block; font-family: var(--zh); font-weight: 600; font-size: .66rem; }
.bs-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .8rem; }
.bs-nums dd small { display: inline; margin-left: .2rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.bs-k2 { margin-top: .8rem !important; }
.bs-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bs-bars li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 2.6rem; gap: .5rem; align-items: center; font-size: .78rem; color: #fff; }
.bs-bars li small { margin-left: .25rem; font-family: var(--zh); color: var(--al-mute); }
.bs-bars li i { position: relative; height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.bs-bars li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); border-radius: 5px; transition: width .2s; }
.bs-bars li b { text-align: right; font-variant-numeric: tabular-nums; }
.bs-msg { min-height: 7.6em; }
.bs-elev-row { flex: 1 1 260px; margin: 0 0 0 .6rem; }
.bs-elev-row > span { text-transform: none; letter-spacing: .02em; }
.bs-elev-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.bs-elev::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ff8a3a, #ffd36e 25%, #8cc4ff 60%, #3d8bff); }
.al-lab.bs-lb-you { color: #fff; }
.al-lab.bs-lb-path { color: #ffe3a3; border-color: rgba(255,211,110,.5); }
.al-lg-bsblue i { border: 0; border-radius: 50%; width: 10px; height: 10px; margin: .35rem 4px 0; background: #2f6bff; box-shadow: 0 0 8px 2px rgba(80,140,255,.6); }
.al-lg-bsred i { border: 0; border-radius: 50%; width: 10px; height: 10px; margin: .35rem 4px 0; background: #ff3a2a; box-shadow: 0 0 8px 2px rgba(255,80,60,.6); }
.al-lg-bspath i { border: 0; height: 3px; margin-top: .55rem; background: repeating-linear-gradient(90deg, #ffd36e 0 6px, transparent 6px 9px); }
.al-lg-bsair i { border: 0; border-radius: 4px; background: linear-gradient(180deg, rgba(111,182,255,.15), rgba(111,182,255,.6)); }
@media (max-width: 1020px) {
  .bs-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .bs-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bs-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .bs-msg { min-height: 0; }
  .bs-elev-row { margin: .6rem 0 0; flex-basis: 100%; }
}

/* ---------- 第十課：彩虹 ---------- */
@media (min-width: 1021px) { .rb-lab .al-space { min-height: 640px; } }
.rb-lab .al-space { background: #3d4d63; }
.rb-lab.rb-v-drop .al-space { background: #0b1326; }
.rb-aside { gap: .9rem; }
.rb-aside > * { min-width: 0; }
.rb-views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-k0 { margin-top: .8rem !important; }
.rb-angles { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-variant-numeric: tabular-nums; }
.rb-angles li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 3.4rem 5.6rem; gap: .5rem; align-items: center; font-size: .82rem; color: #fff; }
.rb-angles li i { width: 12px; height: 12px; border-radius: 50%; }
.rb-angles li small { margin-left: .25rem; font-family: var(--zh); color: var(--al-mute); }
.rb-angles li b { text-align: right; }
.rb-angles li em { font-style: normal; text-align: right; font-size: .72rem; color: var(--al-mute); }
.rb-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .8rem; }
.rb-nums dd small { display: inline; margin-left: .25rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.rb-nums dd.bad { color: #ff8a7a; }
.rb-msg { min-height: 7.6em; }
.rb-sun-row, .rb-b-row { flex: 1 1 260px; margin: 0 0 0 .6rem; }
.rb-sun-row > span, .rb-b-row > span { text-transform: none; letter-spacing: .02em; }
.rb-sun-row output, .rb-b-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.rb-v-sky .rb-b-row, .rb-v-drop .rb-sun-row { display: none; }
.al-lab.rb-lb-you { color: #fff; }
.al-lab.rb-lb-ang { color: #fff; font-weight: 800; border-color: rgba(255,255,255,.45); }
.al-lab.rb-lb-peak { color: #ffe3a3; border-color: rgba(255,211,110,.55); }
.al-lg-rbow i { border: 0; border-radius: 4px; background: linear-gradient(90deg, #ff3b2e, #ff9a2e, #ffe03a, #3ad17a, #3d7bff, #9b5cff); }
.al-lg-rsun i { border: 0; height: 3px; margin-top: .55rem; background: #ffe28a; }
.al-lg-rcone i { border: 0; height: 3px; margin-top: .55rem; background: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 9px); }
.al-lg-ranti i { border: 0; border-radius: 50%; width: 10px; height: 10px; margin: .35rem 4px 0; background: #ffd36e; }
@media (max-width: 1020px) {
  .rb-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .rb-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rb-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .rb-msg { min-height: 0; }
  .rb-sun-row, .rb-b-row { margin: .6rem 0 0; flex-basis: 100%; }
}

/* ---------- 第十一課：聲音 ---------- */
@media (min-width: 1021px) { .sn-lab .al-space { min-height: 540px; } }
.sn-lab .al-space { background: #0d1730; }
.sn-aside { gap: .9rem; }
.sn-aside > * { min-width: 0; }
.sn-big { display: flex; align-items: baseline; gap: .4rem; margin: .2rem 0 0; color: #fff; }
.sn-big b { font-family: var(--serif); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sn-big span { font-weight: 800; color: var(--al-mute); }
.sn-big em { margin-left: auto; font-style: normal; font-weight: 800; color: #ffd36e; }
.sn-big em small { margin-left: .3rem; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.sn-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .8rem; }
.sn-nums dd small { display: inline; margin-left: .25rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.sn-k2 { margin-top: 1rem !important; }
.sn-sec-row { margin: 0; }
.sn-sec-row > span { text-transform: none; letter-spacing: .02em; }
.sn-sec-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.sn-thunder { display: flex; align-items: baseline; gap: .6rem; margin: .4rem 0 0; color: #fff; }
.sn-thunder b { font-family: var(--serif); font-size: 1.9rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sn-thunder span { font-weight: 800; font-size: .85rem; }
.sn-thunder small { display: block; margin-top: .2rem; font-weight: 600; font-size: .72rem; color: var(--al-mute); line-height: 1.4; }
.sn-msg { min-height: 7.6em; }
.sn-f-row, .sn-a-row { flex: 1 1 220px; margin: 0 0 0 .6rem; }
.sn-f-row > span, .sn-a-row > span { text-transform: none; letter-spacing: .02em; }
.sn-f-row output, .sn-a-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.sn-a-row output small { margin-left: .2rem; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.al-lab.sn-lb-spot { color: #ffe3a3; border-color: rgba(255,211,110,.55); }
.al-lg-snsq i { border: 0; border-radius: 50%; background: #ff9a4a; }
.al-lg-snsp i { border: 0; border-radius: 50%; background: #2b4a8a; }
.al-lg-snspot i { border: 0; border-radius: 50%; background: #ffd36e; box-shadow: 0 0 8px 2px rgba(255,211,110,.5); }
.al-lg-snfront i { border: 0; border-radius: 3px; background: rgba(159,212,255,.45); }
@media (max-width: 1020px) {
  .sn-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .sn-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sn-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .sn-msg { min-height: 0; }
  .sn-f-row, .sn-a-row { margin: .6rem 0 0; flex-basis: 100%; }
}

/* ---------- 第十二課：相機 ---------- */
@media (min-width: 1021px) { .cm-lab .al-space { min-height: 600px; } }
.cm-lab .al-space { background: #111a2e; }
.cm-aside { gap: .9rem; }
.cm-aside > * { min-width: 0; }
.cm-photobox { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 6px solid #e9edf5; box-shadow: 0 6px 18px -8px rgba(0,0,0,.7); background: #000; }
.cm-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cm-pix-row { margin: .7rem 0 0; }
.cm-pix-row > span { text-transform: none; letter-spacing: .02em; }
.cm-pix-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.cm-count { margin: .35rem 0 0; font-size: 1.05rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.cm-count small { margin-left: .3rem; font-size: .72rem; font-weight: 600; color: var(--al-mute); }
.cm-count em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--al-mute); margin-top: .1rem; }
.cm-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .8rem; }
.cm-nums dd small { display: inline; margin-left: .25rem; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.cm-focus.ok { color: #7cf29a; } .cm-focus.bad { color: #ff8a7a; }
.cm-msg { min-height: 7.6em; }
.cm-s-row, .cm-ap-row { flex: 1 1 220px; margin: 0 0 0 .6rem; }
.cm-s-row > span, .cm-ap-row > span { text-transform: none; letter-spacing: .02em; }
.cm-s-row output, .cm-ap-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.al-lab.cm-lb-x { color: #ffe3a3; border-color: rgba(255,211,110,.5); }
.al-lg-cmred i { border: 0; height: 3px; margin-top: .55rem; background: #ff5a4a; }
.al-lg-cmgreen i { border: 0; height: 3px; margin-top: .55rem; background: #5ed36a; }
.al-lg-cmbayer i { border: 0; border-radius: 2px; background: conic-gradient(#ff5a4a 0 25%, #5ed36a 0 50%, #4a8bff 0 75%, #5ed36a 0); }
.al-lg-cmstop i { border: 3px solid #1b2333; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px #6f86c0; }
@media (max-width: 1020px) {
  .cm-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .cm-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cm-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .cm-msg { min-height: 0; }
  .cm-s-row, .cm-ap-row { margin: .6rem 0 0; flex-basis: 100%; }
}

/* ---------- 第十三課：飛機 ---------- */
@media (min-width: 1021px) { .aw-lab .al-space { min-height: 600px; } }
.aw-lab .al-space { background: linear-gradient(180deg, #13284e 0%, #0e1a33 70%); }
.aw-aside { gap: .9rem; }
.aw-aside > * { min-width: 0; }
.aw-status { margin: .2rem 0 .8rem; font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; color: #fff; }
.aw-status small { display: block; font-family: var(--zh); font-size: .85rem; color: var(--al-mute); margin-top: .2rem; }
.aw-status.ok { color: #7cf29a; } .aw-status.bad { color: #ff8a7a; }
.aw-meter-k { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--al-mute); margin-bottom: .35rem; }
.aw-bar { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,.08); overflow: hidden; }
.aw-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: #ffd36e; border-radius: 7px; transition: width .15s; }
.aw-bar.ok i { background: #3ad17a; }
.aw-bar b { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #ff5a4a; }
.aw-meter-s { display: flex; justify-content: space-between; margin-top: .25rem; font-size: .66rem; color: var(--al-mute); }
.aw-meter-s em { font-style: normal; }
.aw-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .8rem; }
.aw-smoke { margin-top: .9rem; width: 100%; padding: .55rem .8rem; border-radius: 12px; border: 1px solid #ffd36e; background: rgba(255,211,110,.12); color: #fff; font: 800 .85rem var(--sans); cursor: pointer; }
.aw-smoke small { margin-left: .4rem; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.aw-smoke:hover { background: rgba(255,211,110,.22); }
.aw-msg { min-height: 7.6em; }
.aw-a-row, .aw-v-row { flex: 1 1 220px; margin: 0 0 0 .6rem; }
.aw-a-row > span, .aw-v-row > span { text-transform: none; letter-spacing: .02em; }
.aw-a-row output, .aw-v-row output { margin-left: .3rem; font-weight: 800; color: #fff; }
.al-lab.aw-lb-fast { color: #ffd0a8; border-color: rgba(255,154,60,.5); }
.al-lab.aw-lb-lift { color: #a8f5c4; border-color: rgba(58,209,122,.6); }
.al-lab.aw-lb-weight { color: #ffb3aa; border-color: rgba(255,90,74,.6); }
.al-lab.aw-lb-thrust { color: #b9dcff; border-color: rgba(88,180,255,.6); }
.al-lab.aw-lb-smoke { color: #1b1405; background: #ffe066; border-color: #ffe066; }
.al-lab.aw-lb-smoke small { color: #3a2a06; }
.al-lg-awfast i { border: 0; border-radius: 50%; background: #ff9a3c; }
.al-lg-awslow i { border: 0; border-radius: 50%; background: #2f6bff; }
.al-lg-awlift i { border: 0; height: 4px; margin-top: .5rem; background: #3ad17a; }
.al-lg-awsmoke i { border: 0; border-radius: 50%; background: #ffe066; }
@media (max-width: 1020px) {
  .aw-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .aw-lab .bt-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .aw-lab .bt-aside { grid-template-columns: minmax(0, 1fr); }
  .aw-msg { min-height: 0; }
  .aw-a-row, .aw-v-row { margin: .6rem 0 0; flex-basis: 100%; }
}