/*
 * 美術 Art（/resources/classes/art/）專屬樣式。
 * 共用的版面在 astro.css（.astro-lab、.al-*、.ph-card、.cc-card、.myth、.trick、.act）；這裡的 class 前綴一律 ar-。
 * 只載在本系列的頁面（build.py 的 _art_head()）。中文一律系統字（var(--zh)），不載中文網頁字型。
 * 色覺差異：顏色旁邊一定有字（名稱、字母、數值）；對錯與狀態用文字和記號（●○▲▼✓）表示，不靠紅綠分辨。
 */

/* ── 3D 模型：暗房裡的三盞燈／三片顏料 ─────────────────────────────── */
.ar-lab .al-stage { grid-template-columns: minmax(0, 1fr) 372px; }
.ar-lab .al-space { min-height: 620px; background: #04060b; }
.ar-lab[data-mode="paint"] .al-space { background: #151923; }
.ar-lab .al-space-cv { touch-action: pan-y; }
.ar-lab .al-hint { left: auto; right: 1rem; text-align: right; }
.ar-mode { position: absolute; top: .8rem; left: .8rem; z-index: 3; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(8,12,24,.82); border: 1px solid rgba(160,180,230,.35); }
.ar-mode button { padding: .5rem 1rem; border: 0; border-radius: 999px; background: transparent; color: #cfd8ee; font-family: var(--sans); font-weight: 800; font-size: .88rem; cursor: pointer; }
.ar-mode button[aria-pressed="true"] { background: #ffd36e; color: #1b1405; }
.ar-mode button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.al-lab.ar-lb { font-size: .76rem; font-weight: 700; line-height: 1.25; padding: .12rem .5rem; color: #fff; background: rgba(8,12,24,.86); border-color: rgba(255,255,255,.55); white-space: nowrap; }
.al-lab.ar-lb b { margin-right: .25rem; color: #ffd36e; font-weight: 800; }
.al-lab.ar-lb .zh { margin-left: .2rem; font-family: var(--zh); font-weight: 600; color: #cfd8ee; }
.al-lab.ar-lb[hidden] { display: none; }
.ar-narrow .al-lab.ar-lb { font-size: .64rem; padding: .05rem .32rem; }
.ar-narrow .al-lab.ar-lb .zh { display: none; }
.ar-narrow .al-lab.ar-lb-one .ar-lb-nm, .ar-narrow .al-lab.ar-lb-lamp .ar-lb-nm { display: none; }
.ar-narrow .al-lab.ar-lb-one b, .ar-narrow .al-lab.ar-lb-lamp b { margin-right: 0; }
.ar-narrow .al-lab.ar-lb:not(.ar-lb-one):not(.ar-lb-lamp) b { display: none; }

.ar-aside { display: flex; flex-direction: column; gap: .5rem; }
.ar-aside > * { min-width: 0; }
.ar-aside .al-sky-k { margin: .35rem 0 0; }
.ar-rule { margin: 0; padding: .55rem .75rem; border-radius: 12px; background: rgba(255,211,110,.12); border: 1px solid rgba(255,211,110,.4); font-size: .9rem; font-weight: 800; line-height: 1.45; color: #ffe3a3; }
.ar-rule .zh { display: block; font-family: var(--zh); font-weight: 700; color: #f1dfae; }
.ar-srcs { display: grid; gap: .35rem; }
.ar-src { display: grid; grid-template-columns: 30px minmax(0, 1fr) 4.2em; grid-template-areas: "chip name val" "chip slide slide"; align-items: center; gap: .1rem .55rem; padding: .4rem .55rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); }
.ar-chip { grid-area: chip; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); font-weight: 800; font-size: .9rem; font-family: var(--sans); }
.ar-src-n { grid-area: name; display: flex; align-items: center; gap: .45rem; cursor: pointer; min-width: 0; }
.ar-src-n input { width: 18px; height: 18px; accent-color: #ffd36e; flex: none; }
.ar-src-n b { font-size: .86rem; font-weight: 800; color: #fff; }
.ar-src-n > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ar-src-n small { font-family: var(--zh); font-size: .78rem; font-weight: 600; color: var(--al-mute); }
.ar-src input[type="range"] { grid-area: slide; width: 100%; accent-color: #ffd36e; }
.ar-src-v { grid-area: val; text-align: right; font-size: .82rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-src.is-off { opacity: .62; }
.ar-src.is-off .ar-src-v { font-size: .68rem; color: var(--al-mute); }
.ar-mixes { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ar-mixes li, .ar-probe { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: 12px; border: 1px dashed var(--al-line); }
.ar-mixes li.is-there { border-style: solid; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }
.ar-sw { flex: none; display: grid; place-items: center; width: 46px; height: 34px; border-radius: 8px; border: 2px solid rgba(255,255,255,.8); font-size: .68rem; font-weight: 800; letter-spacing: .02em; font-family: var(--sans); }
.ar-mx-b { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ar-mx-n, .ar-pr-n { font-size: .92rem; font-weight: 800; color: #fff; }
.ar-mx-n .zh, .ar-pr-n .zh { margin-left: .25rem; font-family: var(--zh); font-weight: 700; color: #ffe3a3; }
.ar-mx-v, .ar-pr-v { font-size: .74rem; color: var(--al-text); font-variant-numeric: tabular-nums; }
.ar-mx-s { margin-left: auto; font-size: 1.05rem; line-height: 1; color: var(--al-mute); }
.ar-mixes li.is-there .ar-mx-s { color: #fff; }
.ar-mx-key { margin: 0; font-size: .68rem; line-height: 1.5; color: var(--al-mute); }
.ar-ctl { flex-wrap: wrap; gap: .7rem 1.4rem; align-items: center; }
.ar-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ar-presets-k { margin-right: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--al-sun); }
.ar-presets button { padding: .42rem .8rem; border-radius: 11px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font-family: var(--sans); font-size: .74rem; line-height: 1.25; cursor: pointer; }
.ar-presets button:hover { border-color: var(--al-sun); }
.ar-presets button b { display: block; font-weight: 800; }
.ar-presets button small { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.ar-check { display: flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 700; color: var(--al-text); cursor: pointer; }
.ar-check input { width: 18px; height: 18px; accent-color: #ffd36e; }
.ar-check[hidden] { display: none; }
.ar-msg { margin: 0; padding-top: .5rem; border-top: 1px solid var(--al-line); min-height: 8.5em; font-size: .82rem; line-height: 1.6; color: var(--al-text); }
.ar-msg .zh { display: block; margin-top: .25rem; color: var(--al-mute); }
.al-lg-arspot i { border-color: #fff; background: rgba(255,255,255,.25); }
.al-lg-armix i { border-color: #ffd36e; background: rgba(255,211,110,.35); }
.al-lg-arprobe i { border: 3px double #fff; background: #000; }
.ar-note { margin: 0 1.3rem 1rem; padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid rgba(255,211,110,.45); background: rgba(255,211,110,.07); color: var(--al-text); font-size: .86rem; line-height: 1.65; }
.ar-note-h { margin: 0 0 .4rem; font-weight: 800; font-size: .95rem; color: #ffe3a3; }
.ar-note-h .zh { margin-left: .4rem; font-family: var(--zh); }
.ar-note ul { margin: 0; padding-left: 1.2em; display: grid; gap: .45rem; }
.ar-note li .zh, .ar-note-end .zh { display: block; color: var(--al-mute); }
.ar-note-end { margin: .7rem 0 0; font-weight: 700; color: #fff; }
.ar-credit { margin: 0; padding: 0 1.3rem 1.1rem; font-size: .74rem; line-height: 1.6; color: #7f90b0; }
.ar-lab.al-nogl .al-sky { display: flex; }
.ar-lab.al-nogl .al-controls { display: block; }
.ar-lab.al-nogl .al-toggles, .ar-lab.al-nogl .ar-objrow { display: none; }
.al-lab.ar-lb-lamp { background: rgba(8,12,24,.7); border-color: rgba(255,255,255,.3); font-size: .7rem; }
.ar-lab.al-nogl .al-space { min-height: 150px; aspect-ratio: auto; border-right: 0; border-bottom: 1px solid var(--al-line); }
.ar-lab.al-nogl .ar-mode { position: static; margin: .8rem; }
@media (max-width: 1000px) {
  .ar-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .ar-lab .al-space { aspect-ratio: 16 / 10; min-height: 320px; max-height: 80vh; border-right: 0; border-bottom: 1px solid var(--al-line); }
  .ar-msg { min-height: 6em; }
}
@media (max-width: 620px) {
  .ar-lab .al-space { aspect-ratio: 1 / 1; min-height: 0; max-height: 72vh; }
  .ar-lab .al-hint { display: none; }
  .ar-mode button { padding: .42rem .75rem; font-size: .8rem; }
  .ar-msg { min-height: 9em; }
  .ar-note { margin: 0 .8rem 1rem; padding: .9rem; }
}

/* ── 卡片與課程卡小圖 ─────────────────────────────────────────────────── */
.ar-ico { background: radial-gradient(circle at 50% 40%, #fff8e3, #f1dfae); font-size: 2.2rem; }
.ar-lc-ico { background: #05070d; }

/* ── 共用的按鈕與小字說明 ────────────────────────────────────────────── */
.ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1.15rem; border-radius: 999px; border: 1px solid rgba(160,180,230,.45); background: rgba(255,255,255,.06); color: #e8edf7; font-family: var(--sans); font-weight: 800; font-size: .88rem; line-height: 1.3; cursor: pointer; transition: background .2s, transform .2s; }
.ar-btn:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255,255,255,.14); }
.ar-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ar-btn-gold { background: #ffd36e; border-color: #ffd36e; color: #1b1405; }
.ar-btn-gold:hover:not(:disabled) { background: #ffe08f; }
.ar-btn[hidden] { display: none; }
.ar-fine { margin: 1rem 0 0; font-size: .8rem; line-height: 1.6; color: #9fb0cf; }
.ar-fine .zh { display: block; }
.ar-fine-out { color: var(--ink-soft); max-width: 900px; }

/* ── 調出這個顏色 ────────────────────────────────────────────────────── */
.ar-match { margin-top: 1.5rem; padding: 1.5rem 1.6rem 1.4rem; background: #0c1428; color: #e8edf7; border-radius: 20px; box-shadow: var(--shadow); max-width: 900px; }
.ar-mt-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline; }
.ar-mt-k { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffd36e; }
.ar-mt-sc { margin: 0; font-size: .82rem; color: #9fb0cf; }
.ar-mt-score { margin-left: .3rem; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.ar-mt-steps { display: flex; gap: .35rem; margin: .9rem 0 0; }
.ar-mt-steps i { flex: 1; height: 6px; border-radius: 3px; background: #2b3550; }
.ar-mt-steps i.is-past { background: #6f86b8; }
.ar-mt-steps i.is-now { background: #ffd36e; height: 10px; margin-top: -2px; }
.ar-mt-mode { margin: 1rem 0 0; font-size: .95rem; line-height: 1.6; }
.ar-mt-mode b { color: #ffd36e; }
.ar-mt-mode .zh { display: block; color: #9fb0cf; }
.ar-mt-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ar-mt-sw { margin: 0; }
.ar-mt-box { height: 150px; border-radius: 16px; border: 3px solid #fff; background: #000; }
.ar-mt-mine .ar-mt-box { border-style: dashed; }
.ar-mt-sw figcaption { display: flex; flex-direction: column; gap: .1rem; margin-top: .5rem; font-size: .82rem; line-height: 1.4; color: #cfd8ee; }
.ar-mt-sw figcaption b { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #9fb0cf; }
.ar-mt-tname, .ar-mt-mname { font-size: 1.05rem; font-weight: 800; color: #fff; }
.ar-mt-tname .zh, .ar-mt-mname .zh { margin-left: .3rem; font-family: var(--zh); color: #ffe3a3; }
.ar-mt-tval, .ar-mt-mval { font-variant-numeric: tabular-nums; }
.ar-mt-sliders { display: grid; gap: .5rem; margin-top: 1.1rem; }
.ar-mt-sl { display: grid; grid-template-columns: 30px 9.5em minmax(0, 1fr) 3.2em 8.6em; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 12px; background: rgba(255,255,255,.05); }
.ar-mt-sl .ar-chip { grid-area: auto; }
.ar-mt-sn { font-size: .86rem; font-weight: 800; line-height: 1.25; }
.ar-mt-sn .zh { display: block; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: #9fb0cf; }
.ar-mt-sl input { width: 100%; accent-color: #ffd36e; }
.ar-mt-sl output { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.ar-mt-hint { font-size: .78rem; font-weight: 800; color: #ffe3a3; white-space: nowrap; }
.ar-mt-msg { margin: 1rem 0 .9rem; min-height: 3.6em; font-size: .95rem; line-height: 1.6; }
.ar-mt-msg .zh { display: block; color: #9fb0cf; }
.ar-mt-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }

/* ── 把螢幕放大看 ────────────────────────────────────────────────────── */
.ar-zoom { margin-top: 1.5rem; padding: 1.4rem 1.5rem; background: #0c1428; color: #e8edf7; border-radius: 20px; box-shadow: var(--shadow); max-width: 1000px; }
.ar-zm-colors { display: flex; flex-wrap: wrap; gap: .45rem; }
.ar-zm-c { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .45rem; border-radius: 999px; border: 1px solid rgba(160,180,230,.4); background: rgba(255,255,255,.05); color: #e8edf7; font-family: var(--sans); font-size: .84rem; cursor: pointer; }
.ar-zm-c i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; }
.ar-zm-c b { font-weight: 800; }
.ar-zm-c small { font-family: var(--zh); font-weight: 600; color: #9fb0cf; }
.ar-zm-c[aria-pressed="true"] { border-color: #ffd36e; box-shadow: 0 0 0 2px #ffd36e inset; background: rgba(255,211,110,.14); }
.ar-zm-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 1rem; align-items: start; }
.ar-zm-cv { display: block; width: 100%; height: auto; border-radius: 14px; border: 2px solid rgba(255,255,255,.7); background: #000; }
.ar-zm-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.ar-zm-name { margin: 0; font-size: 1.3rem; font-weight: 800; color: #fff; }
.ar-zm-name .zh { margin-left: .3rem; font-family: var(--zh); color: #ffe3a3; }
.ar-zm-name small { display: block; font-size: .8rem; font-weight: 700; color: #9fb0cf; font-variant-numeric: tabular-nums; }
.ar-zm-bars { display: grid; gap: .4rem; }
.ar-zm-bar { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) 3.2em; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 800; }
.ar-zm-track { height: 12px; border-radius: 6px; background: #1f2942; overflow: hidden; }
.ar-zm-track i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #fff 0 6px, #cfd8ee 6px 8px); }
.ar-zm-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.ar-zm-sl { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9fb0cf; }
.ar-zm-sl b { margin-left: .3rem; color: #fff; font-size: 1rem; }
.ar-zm-sl input { display: block; width: 100%; margin-top: .4rem; accent-color: #ffd36e; }
.ar-zm-msg { margin: 0; min-height: 5.6em; font-size: .92rem; line-height: 1.6; }
.ar-zm-msg .zh { display: block; color: #9fb0cf; }

/* ── 三套三原色 ──────────────────────────────────────────────────────── */
.ar-pms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.5rem; }
.ar-pm { padding: 1.2rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.ar-pm-k { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.ar-pm h3 { margin: .3rem 0 .8rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.ar-pm h3 .zh { display: block; font-family: var(--zh); font-size: .98rem; font-weight: 700; color: var(--ink-soft); }
.ar-pm-sws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ar-pm-sw { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
.ar-pm-sw i { display: block; width: 100%; height: 56px; border-radius: 12px; border: 2px solid #10131c; }
.ar-pm-sw b { font-size: 1.05rem; font-weight: 800; }
.ar-pm-sw small { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.ar-pm-w, .ar-pm-n { margin: .9rem 0 0; font-size: .92rem; line-height: 1.6; }
.ar-pm-w b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ar-pm-w .zh, .ar-pm-n .zh { display: block; margin-top: .2rem; color: var(--ink-soft); }
.ar-points { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; max-width: 900px; }
.ar-points li { padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 14px; font-size: .98rem; line-height: 1.65; box-shadow: var(--shadow-sm); }
.ar-points li .zh { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; }

@media (max-width: 860px) {
  .ar-zm-grid { grid-template-columns: 1fr; }
  .ar-pms { grid-template-columns: 1fr; }
  .ar-mt-sl { grid-template-columns: 30px minmax(0, 1fr) 3.2em; grid-template-areas: "chip name out" "slide slide slide" "hint hint hint"; }
  .ar-mt-sl .ar-chip { grid-area: chip; } .ar-mt-sn { grid-area: name; } .ar-mt-sl input { grid-area: slide; } .ar-mt-sl output { grid-area: out; } .ar-mt-hint { grid-area: hint; min-height: 1.2em; }
}
@media (max-width: 560px) {
  .ar-match, .ar-zoom { padding: 1.1rem; }
  .ar-mt-box { height: 110px; }
  .ar-mt-foot { justify-content: stretch; } .ar-mt-foot .ar-btn { flex: 1 1 auto; }
}

/* ── 第二課：色相環與同一張圖（SVG，沒有 3D） ─────────────────────────── */
.ar-wlab { padding: 1.3rem 1.4rem 0; }
.ar-wh-top { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: stretch; }
.ar-wh-pick, .ar-wh-schemes { display: flex; flex-wrap: wrap; gap: .4rem; }
.ar-wh-pick button, .ar-wh-schemes button { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: center; text-align: left; padding: .5rem .9rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: var(--al-text); font-family: var(--sans); font-size: .86rem; line-height: 1.3; cursor: pointer; }
.ar-wh-pick button { grid-template-columns: 1fr; }
.ar-wh-schemes button i { grid-row: span 2; font-style: normal; font-size: 1.15rem; color: #ffd36e; }
.ar-wh-pick button b, .ar-wh-schemes button b { font-weight: 800; color: #fff; }
.ar-wh-pick button small, .ar-wh-schemes button small { font-family: var(--zh); font-weight: 600; font-size: .78rem; color: var(--al-mute); }
.ar-wh-pick button[aria-pressed="true"], .ar-wh-schemes button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
.ar-wh-pick button:focus-visible, .ar-wh-schemes button:focus-visible, .ar-wh-w:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ar-wh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 340px; gap: 1.4rem; margin-top: 1.2rem; align-items: start; }
.ar-wh-wheelbox, .ar-wh-picbox { margin: 0; min-width: 0; }
.ar-wh-svg { display: block; width: 100%; max-width: 430px; margin: 0 auto; height: auto; overflow: visible; }
.ar-wh-w { stroke: #05070d; stroke-width: 1.5; cursor: pointer; transition: transform .15s; transform-origin: 0 0; }
.ar-wh-w:hover { transform: scale(1.03); }
.ar-wh-w.is-in { stroke: #fff; stroke-width: 3; }
.ar-wh-n { font: 800 10px var(--sans); pointer-events: none; }
.ar-wh-hub { font: 800 9px var(--sans); letter-spacing: .08em; fill: #9fb0cf; }
.ar-wh-link { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke; filter: drop-shadow(0 0 1.5px #000); pointer-events: none; }
.ar-wh-dot { fill: #05070d; stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.ar-wh-mk { font: 800 10px var(--sans); fill: #ffd36e; pointer-events: none; }
.ar-wh-arc { fill: none; stroke: #ffd36e; stroke-width: 3; stroke-linecap: round; }
.ar-wh-cool { stroke: #cfd8ee; stroke-dasharray: 2 5; }
.ar-wh-arct { font: 800 7px var(--sans); letter-spacing: .06em; fill: #e8edf7; paint-order: stroke; stroke: #0c1428; stroke-width: 3px; }
.ar-wh-turn { display: flex; justify-content: center; gap: .5rem; margin-top: .6rem; }
.ar-wh-turn .ar-btn { padding: .45rem .9rem; font-size: .8rem; }
.ar-wh-wnote, .ar-wh-picbox figcaption, .ar-wh-diffn { margin: .7rem 0 0; font-size: .78rem; line-height: 1.55; color: var(--al-mute); }
.ar-wh-wnote .zh, .ar-wh-picbox figcaption .zh, .ar-wh-diffn .zh { display: block; }
.ar-wh-pic { display: block; width: 100%; height: auto; border-radius: 14px; border: 2px solid rgba(255,255,255,.75); background: #fff; }
.ar-wh-side { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.ar-wh-side .al-sky-k { margin: 0; }
.ar-wh-chips li { border-style: solid; border-color: rgba(255,255,255,.4); }
.ar-wh-chips .ar-sw { font-size: .9rem; }
.ar-wh-role { font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #ffe3a3; }
.ar-wh-diff { display: grid; grid-template-columns: minmax(0, 1fr) 3em; gap: .3rem .6rem; align-items: center; margin-top: .3rem; font-size: .76rem; font-weight: 700; color: var(--al-text); }
.ar-wh-diff > span:first-child { grid-column: 1 / -1; }
.ar-wh-diff b { text-align: right; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.ar-wh-diffn { margin-top: 0; font-size: .7rem; }
.ar-wh-side .ar-msg { min-height: 7em; }
.ar-wh-foot { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--al-line); display: grid; gap: .7rem; }
.ar-wh-foot .al-sky-k { margin: 0; }
.ar-wh-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem .6rem; font-size: .78rem; font-weight: 700; color: var(--al-text); }
.ar-wh-list li { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ar-wh-list li span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.7); font-size: .72rem; font-weight: 800; }
.ar-wh-list li i { font-style: normal; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.ar-wlab .ar-note { margin: 1.2rem 0 1rem; }
.ar-wlab .ar-credit { padding: 0 0 1.1rem; }
@media (max-width: 1100px) {
  .ar-wh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-wh-side { grid-column: 1 / -1; }
  .ar-wh-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ar-wlab { padding: 1rem .9rem 0; }
  .ar-wh-grid { grid-template-columns: 1fr; }
  .ar-wh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-wh-pick button, .ar-wh-schemes button { flex: 1 1 100%; }
}

/* ── 哪一塊灰比較深？ ────────────────────────────────────────────────── */
.ar-gray { margin-top: 1.5rem; padding: 1.4rem 1.5rem; background: #0c1428; color: #e8edf7; border-radius: 20px; box-shadow: var(--shadow); max-width: 1000px; }
.ar-gy-stage { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,.7); }
.ar-gy-half { position: relative; display: grid; place-items: center; height: 260px; }
.ar-gy-sq { width: 96px; height: 96px; transition: transform .6s ease; }
.ar-gray.is-join .ar-gy-a .ar-gy-sq { transform: translateX(calc(50cqw - 48px)); }
.ar-gray.is-join .ar-gy-b .ar-gy-sq { transform: translateX(calc(-50cqw + 48px)); }
.ar-gy-half { container-type: inline-size; }
.ar-gy-tag { position: absolute; left: .6rem; top: .6rem; padding: .2rem .55rem; border-radius: 8px; background: rgba(8,12,24,.86); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.4; }
.ar-gy-tag b { color: #ffe3a3; }
.ar-gy-tag .zh { font-family: var(--zh); }
.ar-gy-read { margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .86rem; font-variant-numeric: tabular-nums; }
.ar-gy-read b { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #9fb0cf; }
.ar-gy-eq { align-self: flex-end; font-weight: 800; color: #ffe3a3; }
.ar-gy-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.ar-gy-ctl .ar-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.ar-gy-sl { flex: 1 1 220px; }
.ar-gy-msg { margin-top: 1rem; min-height: 4.2em; }

/* ── 這是哪一個？ ────────────────────────────────────────────────────── */
.ar-pk-ask { margin: 1.1rem 0 0; font-size: 1.15rem; font-weight: 800; line-height: 1.5; }
.ar-pk-ask .zh { display: block; font-family: var(--zh); font-size: 1rem; font-weight: 600; color: #9fb0cf; }
.ar-pk-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.ar-pk-opt { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .8rem .5rem; border-radius: 16px; border: 1px solid rgba(160,180,230,.35); background: rgba(255,255,255,.05); color: #fff; font-family: var(--sans); cursor: pointer; }
.ar-pk-opt:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.ar-pk-opt i { width: 100%; height: 54px; border-radius: 10px; border: 2px solid #fff; }
.ar-pk-opt b { font-size: .92rem; font-weight: 800; }
.ar-pk-opt .zh { font-family: var(--zh); font-size: .86rem; color: #9fb0cf; }
.ar-pk-mk { min-height: 1.3em; font-size: .76rem; font-weight: 800; color: #ffe3a3; }
.ar-pk-opt.is-right { border: 3px solid #fff; background: rgba(255,255,255,.16); }
.ar-pk-opt.is-wrong { opacity: .6; border-style: dashed; }
.ar-pk-opt:disabled { cursor: default; }

/* ── 兩個色相環，對面的顏色不一樣 ────────────────────────────────────── */
.ar-tw-wrap { margin-top: 1.5rem; max-width: 900px; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.ar-tw { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ar-tw th, .ar-tw td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ar-tw thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream); }
.ar-tw tbody tr:last-child th, .ar-tw tbody tr:last-child td { border-bottom: 0; }
.ar-tw-sw { display: inline-flex; align-items: center; gap: .55rem; }
.ar-tw-sw i { width: 44px; height: 30px; border-radius: 8px; border: 2px solid #10131c; }
.ar-tw-sw b { font-weight: 800; }
.ar-tw-sw small { font-family: var(--zh); font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 640px) {
  .ar-gy-half { height: 190px; } .ar-gy-sq { width: 72px; height: 72px; }
  .ar-gray.is-join .ar-gy-a .ar-gy-sq { transform: translateX(calc(50cqw - 36px)); }
  .ar-gray.is-join .ar-gy-b .ar-gy-sq { transform: translateX(calc(-50cqw + 36px)); }
  .ar-gray { padding: 1.1rem; }
  .ar-pk-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-tw th, .ar-tw td { padding: .6rem .6rem; } .ar-tw-sw i { width: 30px; height: 24px; }
}

/* ── 第三課：桌上一顆球和一盞燈 ──────────────────────────────────────── */
.ar-ball .al-space { background: #0c0e13; }
.ar-bl-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-bl-modes button { padding: .42rem .3rem; }
.ar-bl-modes button[aria-pressed="true"], .ar-bl-stepbtns button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
.ar-bl-steps { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .78rem; font-weight: 700; color: var(--al-text); }
.ar-bl-steps[hidden] { display: none; }
.ar-bl-stepbtns { display: inline-flex; gap: .3rem; }
.ar-bl-stepbtns button { width: 2.4rem; padding: .3rem 0; border-radius: 9px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: #fff; font-family: var(--sans); font-weight: 800; cursor: pointer; }
.ar-bl-sl { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--al-mute); }
.ar-bl-sl b { margin-left: .3rem; color: #fff; font-variant-numeric: tabular-nums; }
.ar-bl-sl input { display: block; width: 100%; margin-top: .3rem; accent-color: #ffd36e; }
.ar-bl-range { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--al-text); }
.ar-bl-range .zh { display: block; color: var(--al-mute); }
.ar-lb-num { display: inline-grid; place-items: center; min-width: 1.25em; height: 1.25em; margin-right: .25rem; border-radius: 50%; background: #ffd36e; color: #10131c; font-style: normal; font-weight: 800; font-size: .9em; }
.ar-narrow .al-lab.ar-lb-zone { padding: .05rem .1rem; }
.ar-narrow .al-lab.ar-lb-zone .ar-lb-nm { display: none; }
.ar-narrow .al-lab.ar-lb-zone .ar-lb-num { margin-right: 0; }
.ar-bl-key { display: none; margin: 0; padding-left: 1.6em; columns: 2; column-gap: 1rem; font-size: .8rem; font-weight: 700; line-height: 1.7; color: var(--al-text); }
.ar-bl-key .zh { font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.ar-ball.ar-narrow .ar-bl-key { display: block; }
.al-lg-arlamp i { border-color: #ffd36e; background: #fff3c4; }
.al-lg-array i { border: 0; border-top: 3px dashed #ffd36e; border-radius: 0; height: 0; margin-top: 8px; }

/* ── 燈在哪裡？／由亮排到暗 ──────────────────────────────────────────── */
.ar-lp-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 1.2rem; margin-top: 1.1rem; align-items: center; }
.ar-lp-cv { display: block; width: 100%; height: auto; border-radius: 14px; border: 2px solid rgba(255,255,255,.7); background: #1a1a1a; }
.ar-lp-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ar-lp-opt { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; text-align: left; padding: .7rem .8rem; border-radius: 14px; border: 1px solid rgba(160,180,230,.35); background: rgba(255,255,255,.05); color: #fff; font-family: var(--sans); cursor: pointer; }
.ar-lp-opt:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.ar-lp-opt i { grid-row: span 3; font-style: normal; font-size: 1.7rem; line-height: 1; color: #ffd36e; }
.ar-lp-opt b { font-size: .92rem; font-weight: 800; }
.ar-lp-opt .zh { font-family: var(--zh); font-size: .84rem; color: #9fb0cf; }
.ar-lp-opt.is-right { border: 3px solid #fff; background: rgba(255,255,255,.16); }
.ar-lp-opt.is-wrong { opacity: .6; border-style: dashed; }
.ar-lp-opt:disabled { cursor: default; }
.ar-so-ends { display: flex; justify-content: space-between; margin: 1rem 0 .4rem; font-size: .76rem; font-weight: 800; letter-spacing: .04em; color: #ffe3a3; }
.ar-so-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; padding: .8rem; border-radius: 14px; background: #6b6f78; }
.ar-so-sq { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .3rem; border-radius: 12px; border: 3px solid transparent; background: transparent; color: #fff; font-family: var(--sans); cursor: pointer; }
.ar-so-sq i { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; }
.ar-so-sq.is-pick { border: 3px dashed #fff; background: rgba(0,0,0,.25); }
.ar-so-sq:focus-visible { outline: 3px solid #ffd36e; outline-offset: 2px; }
.ar-so-pos { font-size: .72rem; font-weight: 800; color: #10131c; background: #ffd36e; border-radius: 999px; padding: 0 .5rem; }
.ar-so-l { min-height: 1.2em; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ar-so-sq:disabled { cursor: default; }
@media (max-width: 760px) { .ar-lp-grid { grid-template-columns: 1fr; } .ar-lp-cv { max-width: 360px; margin: 0 auto; } }
@media (max-width: 560px) { .ar-so-row { gap: .3rem; padding: .5rem; } .ar-so-sq { padding: .15rem; } }

/* ── 第四課：同一條線的五種畫法＋畫板 ────────────────────────────────── */
.ar-llab { padding: 1.3rem 1.4rem 0; }
.ar-ln-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
.ar-ln-col { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.ar-ln-col .al-sky-k { margin: 0; }
.ar-ln-kinds { display: flex; flex-wrap: wrap; gap: .35rem; }
.ar-ln-kinds button { padding: .4rem .7rem; border-radius: 11px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: var(--al-text); font-family: var(--sans); font-size: .8rem; line-height: 1.25; cursor: pointer; text-align: left; }
.ar-ln-kinds button b { display: block; font-weight: 800; color: #fff; }
.ar-ln-kinds button small { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.ar-ln-kinds button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
.ar-ln-kinds button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ar-ln-cv { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; border-radius: 14px; border: 2px solid rgba(255,255,255,.75); background: #fbf8f0; }
.ar-ln-padcv { touch-action: none; cursor: crosshair; }
.ar-ln-read { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.ar-ln-read div { padding: .4rem .5rem; border-radius: 10px; border: 1px solid var(--al-line); }
.ar-ln-read dt { font-size: .66rem; font-weight: 700; letter-spacing: .03em; color: var(--al-mute); }
.ar-ln-read dd { margin: 0; font-size: 1rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ar-ln-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.ar-ln-btns .ar-btn { padding: .45rem .9rem; font-size: .8rem; }
.ar-llab .ar-msg { border-top: 0; padding-top: 0; min-height: 5.2em; }
.ar-llab .ar-note { margin: 1.2rem 0 1rem; }
.ar-llab .ar-credit { padding: 0 0 1.1rem; }
.ar-lc-ico .arline-svg { display: block; }
@media (max-width: 900px) { .ar-ln-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ar-llab { padding: 1rem .9rem 0; } .ar-ln-read { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 這條線是怎麼畫的？／幾何的形狀，還是自然的形狀？ ─────────────────── */
.ar-hw-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ar-hw-opt { grid-template-columns: 1fr; }
.ar-sh-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1.4rem; margin-top: 1.1rem; align-items: center; }
.ar-sh-box { margin: 0; }
.ar-sh-fig { aspect-ratio: 1; border-radius: 14px; border: 2px solid rgba(255,255,255,.75); background: #fbf8f0; padding: 10%; }
.ar-sh-fig svg { display: block; width: 100%; height: 100%; }
.ar-sh-name { margin-top: .5rem; text-align: center; font-size: 1.05rem; font-weight: 800; color: #fff; }
.ar-sh-name .zh { margin-left: .3rem; font-family: var(--zh); color: #ffe3a3; }
.ar-sh-opts { display: grid; gap: .7rem; }
@media (max-width: 760px) { .ar-hw-grid { grid-template-columns: 1fr; } .ar-sh-grid { grid-template-columns: 1fr; } .ar-sh-box { max-width: 220px; margin: 0 auto; } }

/* ── 第五課：走廊與畫家的窗戶 ────────────────────────────────────────── */
.ar-hall .al-space { position: relative; aspect-ratio: 4 / 3; min-height: 0; height: auto; align-self: start; background: #0c0e13; }
.ar-hall .al-space-cv { touch-action: none; cursor: grab; }
.ar-hl-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ar-hl-guide { stroke: #ffd36e; stroke-width: 1.4; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.ar-hl-horizon { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px #000); }
.ar-hl-vp { fill: #ffd36e; stroke: #10131c; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ar-hl-cross { stroke: #10131c; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ar-hl-t { font: 700 6.4px var(--sans); fill: #fff; paint-order: stroke; stroke: #10131c; stroke-width: 1.8px; stroke-linejoin: round; }
.ar-hall.ar-narrow .ar-hl-t { font-size: 11px; stroke-width: 2.6px; }
.ar-hall[data-mode="drawing"] .ar-hl-horizon { stroke: #10131c; filter: none; }
.ar-hall[data-mode="drawing"] .ar-hl-guide { stroke: #b07a00; }
.ar-hl-facts { margin: .2rem 0 0; padding-top: .55rem; border-top: 1px solid var(--al-line); display: grid; gap: .4rem; }
.ar-hl-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.ar-hl-facts dt { font-size: .7rem; font-weight: 700; color: var(--al-mute); }
.ar-hl-facts dd { margin: 0; font-size: 1rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.ar-hl-facts dd small { display: block; font-size: .64rem; font-weight: 700; color: var(--al-mute); }
.ar-hl-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ar-hall .al-space { aspect-ratio: 4 / 3; min-height: 0; max-height: none; } }
@media (max-width: 620px) { .ar-hall .al-space { aspect-ratio: 4 / 3; max-height: none; } .ar-hall .al-hint { display: block; font-size: .64rem; } }

/* ── 消失點在哪裡？／哪一根比較高？ ──────────────────────────────────── */
.ar-pv-svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 14px; border: 2px solid rgba(255,255,255,.75); background: #fbf8f0; }
.ar-vp-svg { max-width: 640px; margin: .8rem 0 0; cursor: crosshair; touch-action: manipulation; }
.ar-pv-paper { fill: #fbf8f0; }
.ar-pv-line { stroke: #16181d; stroke-width: 1.3; stroke-linecap: round; }
.ar-pv-guide { stroke: #b07a00; stroke-width: 1.3; stroke-dasharray: 6 5; }
.ar-pv-horizon { stroke: #16181d; stroke-width: 1.2; stroke-dasharray: 2 5; }
.ar-pv-vp { fill: #ffd36e; stroke: #16181d; stroke-width: 1.5; }
.ar-pv-cross { stroke: #16181d; stroke-width: 2.2; fill: none; }
.ar-pv-ring { fill: none; stroke: #16181d; stroke-width: 1.6; stroke-dasharray: 3 3; }
.ar-pv-t { font: 800 10px var(--sans); fill: #16181d; paint-order: stroke; stroke: #fbf8f0; stroke-width: 3px; }
.ar-vp-name { margin: 1rem 0 0; font-size: 1.05rem; font-weight: 800; }
.ar-vp-name .zh { margin-left: .3rem; font-family: var(--zh); color: #ffe3a3; }
.ar-vp-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .8rem; }
.ar-vp-nudge .ar-btn { padding: .45rem .8rem; }
.ar-vp-nudge .ar-btn-gold { margin-left: .6rem; }
.ar-btn:disabled { opacity: .45; cursor: default; }
.ar-po-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.ar-po-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.ar-po-post { fill: #d9a520; stroke: #16181d; stroke-width: 1.2; }
.ar-po-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-postsq .ar-check { color: #e8edf7; }
@media (max-width: 760px) { .ar-po-grid { grid-template-columns: 1fr; } }

/* ── 第六課：五棵樹、四種線索 ────────────────────────────────────────── */
.ar-dlab { padding: 1.3rem 1.4rem 0; }
.ar-dp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
.ar-dp-pic { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 14px; border: 2px solid rgba(255,255,255,.75); background: #cfe0f2; }
.ar-dp-3d { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 2px solid rgba(160,180,230,.4); background: #0c0e13; }
.ar-dp-cv { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.ar-dp-3d .al-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ar-dp-3d .al-nogl-msg { display: none; position: absolute; inset: 0; margin: 0; padding: 1.2rem; font-size: .86rem; line-height: 1.6; color: var(--al-text); }
.ar-dlab.al-nogl .ar-dp-3d .al-nogl-msg { display: block; }
.ar-dlab.al-nogl .ar-dp-cv, .ar-dlab.al-nogl .ar-dp-views { display: none; }
.ar-dp-count { min-height: 3.2em; }
.ar-dp-ctl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--al-line); align-items: start; }
.ar-dp-cues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ar-dp-cue { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); cursor: pointer; }
.ar-dp-cue input { flex: none; width: 20px; height: 20px; margin-top: .15rem; accent-color: #ffd36e; }
.ar-dp-cue-b { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ar-dp-cue-b b { font-size: .95rem; font-weight: 800; color: #fff; }
.ar-dp-cue-b small { font-family: var(--zh); font-size: .86rem; font-weight: 700; color: #ffe3a3; }
.ar-dp-cue-b em { margin-top: .2rem; font-style: normal; font-size: .74rem; color: var(--al-mute); }
.ar-dp-cue-b em .zh { display: block; }
.ar-dp-cue:has(input:checked) { border-color: #ffd36e; background: rgba(255,211,110,.1); }
.ar-dp-side { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.ar-dp-table { width: 100%; border-collapse: collapse; font-size: .8rem; color: var(--al-text); font-variant-numeric: tabular-nums; }
.ar-dp-table th, .ar-dp-table td { padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--al-line); }
.ar-dp-table tbody td { white-space: nowrap; }
.ar-dp-table thead th { font-size: .66rem; font-weight: 700; color: var(--al-mute); }
.ar-dp-n { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #10131c; border: 1.5px solid #fff; color: #fff; font-weight: 800; font-size: .8rem; }
.ar-dp-sw { display: inline-block; width: 26px; height: 14px; margin-right: .4rem; border-radius: 3px; border: 1.5px solid #fff; vertical-align: -2px; }
.ar-dlab .ar-msg { border-top: 0; padding-top: 0; min-height: 5.6em; }
.ar-dlab .ar-note { margin: 1.2rem 0 1rem; }
.ar-dlab .ar-credit { padding: 0 0 1.1rem; }
.ar-fr-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
.ar-ag-rows { display: grid; gap: .6rem; }
.ar-ag-ends { display: flex; justify-content: space-between; margin: 0; font-size: .72rem; font-weight: 800; color: #ffe3a3; }
.ar-ag-row { display: grid; grid-template-columns: auto 5.4em minmax(0, 1fr) 5em; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 12px; background: rgba(255,255,255,.05); }
.ar-ag-nm { font-size: .86rem; font-weight: 800; }
.ar-ag-nm .zh { display: block; font-family: var(--zh); font-weight: 600; font-size: .8rem; color: #9fb0cf; }
.ar-ag-row input { width: 100%; accent-color: #ffd36e; }
.ar-ag-row output { text-align: right; font-weight: 800; font-size: .84rem; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ar-dp-grid, .ar-dp-ctl { grid-template-columns: 1fr; } .ar-fr-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ar-dlab { padding: 1rem .9rem 0; } .ar-dp-cues { grid-template-columns: 1fr; } .ar-ag-row { grid-template-columns: auto minmax(0, 1fr) 5em; } .ar-ag-row input { grid-column: 1 / -1; } }

/* ── 第七課：畫框、視覺重心、三分線、裁切 ───────────────────────────── */
.ar-flab { padding: 1.3rem 1.4rem 0; }
.ar-fm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.ar-fm-svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; background: #f1f1f1; outline: 10px solid #3a3226; box-shadow: 0 0 0 12px #c9a646; margin: 12px; width: calc(100% - 24px); touch-action: none; }
.ar-fm-it { cursor: grab; }
.ar-fm-it.is-drag { cursor: grabbing; }
.ar-fm-it:focus { outline: none; }
.ar-fm-it:focus-visible > :first-child { stroke: #ffd36e; stroke-width: 8; }
.ar-fm-empty { float: right; color: var(--al-mute); font-weight: 700; letter-spacing: 0; text-transform: none; }
.ar-fm-beamw[hidden] { display: none; }
.ar-fm-beam { display: block; width: 100%; height: auto; }
.ar-fm-read { min-height: 3.2em; }
.ar-fm-checks { display: grid; gap: .45rem; }
.ar-fm-table td .zh { display: block; font-family: var(--zh); color: var(--al-mute); font-size: .74rem; }
.ar-fm-table tbody td { white-space: nowrap; vertical-align: top; }
.ar-fm-table { display: block; overflow-x: auto; }
.ar-flab .ar-msg { border-top: 0; padding-top: 0; min-height: 6.4em; }
.ar-flab .ar-note { margin: 1.2rem 0 1rem; }
.ar-flab .ar-credit { padding: 0 0 1.1rem; }
.ar-bl-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ar-bl-fig { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.ar-bl-fig figcaption { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .9rem; color: #fff; }
.ar-bl-svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; background: #f1f1f1; border: 6px solid #3a3226; }
.ar-bl-read { margin: 0; min-height: 1.4em; font-size: .86rem; font-weight: 800; color: #ffe3a3; }
.ar-bl-read .zh { display: inline; margin-left: .4rem; font-family: var(--zh); color: #f1dfae; }
.ar-bl-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
.ar-cr-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.ar-cr-fig { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.ar-cr-fig figcaption { font-weight: 800; font-size: .86rem; color: #fff; }
.ar-cr-over { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; touch-action: none; }
.ar-cr-box { cursor: move; }
.ar-cr-view { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; border: 6px solid #3a3226; background: #d4e5f3; }
.ar-cr-ctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .6rem 1rem; align-items: end; margin-top: .9rem; }
.ar-cr-sl { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 800; color: var(--al-text); }
.ar-cr-sl .zh { font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.ar-cr-sl input { width: 100%; accent-color: #ffd36e; }
.ar-cr-read { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ar-fm-grid, .ar-cr-grid { grid-template-columns: 1fr; } .ar-cr-ctl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ar-flab { padding: 1rem .9rem 0; } .ar-bl-pics, .ar-bl-opts { grid-template-columns: 1fr; } .ar-bl-pics { grid-template-columns: 1fr 1fr; gap: .5rem; } .ar-cr-ctl { grid-template-columns: 1fr; } }

/* ── 第八課：頭像與比例線 ────────────────────────────────────────────── */
.ar-face .al-space { aspect-ratio: 4 / 3.4; }
.ar-fc-lb { font-size: .74rem; padding: .15rem .45rem; border-radius: 8px; background: rgba(16,19,28,.86); border: 1px solid #c9a646; color: #ffe3a3; white-space: nowrap; }
.ar-fc-lb .zh { font-family: var(--zh); color: #f1dfae; }
.ar-fc-lb.is-eye { border-width: 2px; border-color: #ffd36e; color: #fff; font-weight: 800; }
.ar-fc-table td .zh { display: block; font-family: var(--zh); font-size: .74rem; color: var(--al-mute); }
.ar-fc-table tr.is-eye td { font-weight: 800; color: #ffe3a3; }
.ar-face .ar-presets { margin-bottom: .2rem; }
.ar-ey-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.2rem; margin-top: 1rem; align-items: start; }
.ar-ey-svg { display: block; width: 100%; height: auto; border-radius: 12px; background: #e9e6df; touch-action: none; cursor: ns-resize; }
.ar-ey-side { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.ar-ey-sl { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 800; color: var(--al-text); }
.ar-ey-sl .zh { font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.ar-ey-sl input { width: 100%; accent-color: #ffd36e; }
.ar-ey-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--al-mute); }
.ar-fp-cv { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; border-radius: 12px; touch-action: none; }
.ar-fp-ctl { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-top: .8rem; }
@media (max-width: 760px) { .ar-ey-grid { grid-template-columns: 1fr; } .ar-ey-svg { max-width: 320px; margin: 0 auto; } }

/* ── 第九課：色粉＋黏著劑 ─────────────────────────────────────────── */
.ar-plab { padding: 1.3rem 1.4rem 0; }
.ar-pg-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.ar-pg-cv { display: block; width: 100%; height: auto; aspect-ratio: 800 / 480; border-radius: 14px; }
.ar-pg-cover { margin: 0; font-size: .84rem; color: var(--al-text); }
.ar-pg-cover .zh { display: block; color: var(--al-mute); font-family: var(--zh); }
.ar-pg-card { padding: .7rem .85rem; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--al-line); font-size: .86rem; line-height: 1.55; color: var(--al-text); min-height: 6.5em; }
.ar-pg-card p { margin: 0 0 .3rem; }
.ar-pg-card .zh { display: block; font-family: var(--zh); color: #c9d2e6; }
.ar-pg-ck { font-weight: 800; color: #ffe3a3; }
.ar-pg-ck b { color: #ffb4a8; margin-left: .3rem; }
.ar-pg-pigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.ar-pg-pigs button { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; text-align: left; padding: .45rem .6rem; border-radius: 11px; border: 1px solid var(--al-line); background: rgba(255,255,255,.04); color: var(--al-text); font-family: var(--sans); cursor: pointer; }
.ar-pg-pigs button[aria-pressed="true"] { border: 2px solid #ffd36e; background: rgba(255,211,110,.12); }
.ar-pg-dot { grid-row: span 3; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; }
.ar-pg-pigs b { font-size: .84rem; font-weight: 800; color: #fff; }
.ar-pg-pigs small { font-family: var(--zh); font-size: .78rem; color: #ffe3a3; }
.ar-pg-pigs em { font-style: normal; font-size: .68rem; color: var(--al-mute); }
.ar-plab .ar-msg { border-top: 0; padding-top: 0; min-height: 5.6em; }
.ar-plab .ar-note { margin: 1.2rem 0 1rem; }
.ar-plab .ar-credit { padding: 0 0 1.1rem; }
.ar-or-card { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; background: rgba(255,255,255,.06); }
.ar-or-sw { flex: none; width: 74px; height: 74px; border-radius: 14px; border: 3px solid #fff; }
.ar-or-b { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ar-or-b b { font-size: 1.05rem; color: #fff; }
.ar-or-b > .zh { font-family: var(--zh); color: #ffe3a3; font-weight: 700; }
.ar-or-clue { font-size: .9rem; line-height: 1.55; color: var(--al-text); }
.ar-or-clue .zh { display: block; font-family: var(--zh); color: #c9d2e6; }
.ar-or-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
@media (max-width: 900px) { .ar-pg-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ar-plab { padding: 1rem .9rem 0; } .ar-or-opts { grid-template-columns: 1fr; } }

/* ── 第十課：一顆蘋果，三種畫法 ───────────────────────────────────── */
.ar-mlab { padding: 1.3rem 1.4rem 0; }
.ar-md-top { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; }
.ar-md-top .al-sky-k { margin: 0; }
.ar-md-ctl { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ar-md-sl input { width: 160px; accent-color: #ffd36e; }
.ar-md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ar-md-fig { margin: 0; display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border-radius: 14px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); transition: border-color .3s, background .3s; }
.ar-mlab[data-focus="watercolor"] .ar-md-fig[data-m="watercolor"], .ar-mlab[data-focus="oil"] .ar-md-fig[data-m="oil"], .ar-mlab[data-focus="ink"] .ar-md-fig[data-m="ink"] { border: 2px solid #ffd36e; background: rgba(255,211,110,.08); }
.ar-md-name { font-weight: 800; font-size: .95rem; color: #fff; }
.ar-md-name .zh { font-family: var(--zh); color: #ffe3a3; }
.ar-md-cv { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.ar-md-cap { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--al-text); min-height: 7.5em; }
.ar-md-cap b { color: #fff; }
.ar-md-cap .zh { display: block; font-family: var(--zh); color: #c9d2e6; }
.ar-md-why { display: block; margin-top: .3rem; color: var(--al-mute); }
.ar-mlab .ar-msg { min-height: 4em; }
.ar-mlab .ar-note { margin: 1.2rem 0 1rem; }
.ar-mlab .ar-credit { padding: 0 0 1.1rem; }
.ar-wc-cv { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 280 / 200; border-radius: 10px; border: 3px solid #fff; }
.ar-nx-cv { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; border-radius: 10px; }
@media (max-width: 900px) { .ar-md-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }
@media (max-width: 560px) { .ar-mlab { padding: 1rem .9rem 0; } .ar-md-sl input { width: 110px; } }

/* ── 課綱、安全提醒、延伸閱讀、出處、系列首頁（寫法照音樂系列） ───────── */
.ar-curric { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 900px; }
.ar-cur { padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 14px; box-shadow: var(--shadow-sm); }
.ar-cur-k { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; font-size: .82rem; color: var(--ink-soft); }
.ar-cur-k b { font-size: 1rem; color: var(--brand-dk); font-variant-numeric: tabular-nums; }
.ar-cur-q { margin: .4rem 0 0; font-size: 1rem; line-height: 1.7; font-family: var(--zh); }
.ar-cur-n { margin: .5rem 0 0; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }
.ar-cur-n .zh { display: block; }
.ar-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; }
.ar-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); }
.ar-safety li::before { content: "\26A0"; position: absolute; left: 1.05rem; top: .95rem; font-size: 1.2rem; color: var(--sunset); }
.ar-safety li .zh { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; }
.ar-links { display: grid; gap: 1rem; margin-top: 1.4rem; max-width: 860px; }
.ar-link { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.2rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .25s, box-shadow .25s, border-color .25s; }
a.ar-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); color: var(--ink); }
.ar-link-soon { border-style: dashed; background: linear-gradient(120deg, #fff, var(--cream)); }
.ar-link-ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 50% 38%, #fff8e3, #f1dfae); font-size: 2rem; }
.ar-link-b { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ar-link-k { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.ar-link-b b { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.ar-link-zh { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.ar-link-n { margin-top: .4rem; font-size: .92rem; line-height: 1.6; }
.ar-link-n .zh { display: block; margin-top: .2rem; color: var(--ink-soft); }
.ar-link-go { align-self: flex-start; margin-top: .6rem; font-weight: 800; font-size: .82rem; color: var(--brand-dk); background: var(--brand-lt); border-radius: 999px; padding: .38rem .85rem; }
.ar-link-soon .ar-link-go { color: var(--ink-soft); background: var(--cream); border: 1px solid var(--line); }
.ar-sources { margin: 0 0 2.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.ar-sources .sub-head { margin-top: 0; }
.ar-sources > .muted { margin: .2rem 0 .8rem; font-size: .9rem; }
.ar-sources ol { margin: 0; padding-left: 1.3em; display: grid; gap: .55rem; }
.ar-sources li { font-size: .92rem; line-height: 1.55; }
.ar-sources li > span { display: block; }
.ar-sources li .zh { display: inline; margin-left: .4rem; color: var(--ink-soft); font-size: .88rem; }
.ar-sources a { font-weight: 700; font-size: .86rem; color: var(--brand-dk); overflow-wrap: anywhere; }
.ar-progress { font-weight: 700; color: var(--brand-dk); }
.ar-intro-ic { float: right; margin: 0 0 .8rem 1.2rem; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 26px; background: radial-gradient(circle at 50% 38%, #fff8e3, #f1dfae); box-shadow: 0 14px 30px -18px rgba(6,12,30,.9); }
@media (max-width: 760px) { .ar-safety { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ar-link { flex-direction: column; }
  .ar-intro-ic { width: 80px; height: 80px; } .ar-intro-ic svg { width: 58px; height: 58px; }
}