/* =========================================================
   書法 · Chinese Calligraphy — 課程頁專屬樣式
   只載在 /resources/classes/calligraphy/ 底下（build.py 的 _cal_head）。
   3D 面板、迷思、口訣、課堂活動、文化卡等共用樣式在 astro.css；這裡只放本系列多出來的，前綴一律 cg-。
   ========================================================= */

/* ---------- 3D 面板（第一課：書桌上的文房四寶） ---------- */
.cg-lab .al-stage { grid-template-columns: minmax(0, 1fr) 350px; }
.cg-lab .al-space { min-height: 640px; background: radial-gradient(70% 60% at 50% 45%, rgba(150,110,60,.16), transparent 70%); }
.cg-lab .al-hint { left: auto; right: 1rem; text-align: right; }

.cg-cams { position: absolute; left: .8rem; top: .8rem; display: inline-flex; padding: 3px; border-radius: 14px; background: rgba(6,10,22,.72); border: 1px solid var(--al-line); z-index: 2; }
.cg-cams button { border: 0; background: transparent; color: var(--al-mute); font-family: var(--sans); font-weight: 800; font-size: .78rem; line-height: 1.15; padding: .38rem .75rem; border-radius: 11px; cursor: pointer; text-align: center; }
.cg-cams button small { display: block; font-family: var(--zh); font-weight: 600; font-size: .7rem; }
.cg-cams button[aria-pressed="true"] { background: #22345f; color: #fff; }
.cg-cams button[aria-pressed="true"] small { color: var(--al-sun); }
.cg-lab:not(.cg-writing) .cg-cams { display: none; }

.cg-aside { display: flex; flex-direction: column; gap: .75rem; }
.cg-aside > * { min-width: 0; }
.cg-aside .al-sky-k { margin-bottom: 0; }
.cg-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.cg-focus button { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .2rem .4rem; 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: .72rem; line-height: 1.2; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
.cg-focus button i { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: .15rem; border-radius: 50%; background: #f3ead6; color: #151311; font-style: normal; font-family: var(--zh); font-weight: 700; font-size: 1rem; line-height: 1; }
.cg-focus button small { display: block; font-family: var(--zh); font-weight: 600; font-size: .7rem; color: var(--al-mute); }
.cg-focus button:hover { background: rgba(255,255,255,.07); }
.cg-focus 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; }
.cg-focus button[aria-pressed="true"] i { background: var(--al-sun); }

.cg-panel[hidden] { display: none; }
.cg-panel { border-top: 1px solid var(--al-line); padding-top: .75rem; }
.cg-panel-h { margin: 0 0 .35rem; font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; color: #fff; }
.cg-panel-h .zh { display: block; margin-top: .1rem; font-size: .88rem; font-weight: 600; color: var(--al-sun); }
.cg-panel-t { margin: 0 0 .75rem; font-size: .83rem; line-height: 1.6; color: var(--al-text); }
.cg-panel-t .zh { display: block; margin-top: .25rem; color: var(--al-mute); }
.cg-k2 { margin-top: .4rem !important; margin-bottom: .45rem !important; display: flex; justify-content: space-between; align-items: baseline; }
.cg-k2 b { font-size: .9rem; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }

.cg-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin: 0 0 .7rem; }
.cg-seg button { padding: .42rem .2rem; border-radius: 11px; 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: .76rem; line-height: 1.2; cursor: pointer; }
.cg-seg button small { display: block; font-family: var(--zh); font-weight: 600; font-size: .68rem; color: var(--al-mute); }
.cg-seg button[aria-pressed="true"] { border-color: var(--al-sun); background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px var(--al-sun) inset; }

.cg-nums { margin: 0 0 .7rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .6rem; }
.cg-nums dt { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--al-mute); line-height: 1.25; }
.cg-nums dd { margin: .15rem 0 0; font-size: .95rem; font-weight: 800; color: #fff; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cg-nums dd small { display: block; font-family: var(--zh); font-weight: 600; font-size: .74rem; color: var(--al-mute); }

.cg-virtues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.cg-virtue { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .2rem .4rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); cursor: pointer; font-family: var(--sans); }
.cg-virtue b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f3ead6; color: #151311; font-family: var(--zh); font-size: 1.15rem; }
.cg-virtue span { font-weight: 800; font-size: .72rem; }
.cg-virtue[aria-pressed="true"] { border-color: var(--al-sun); background: rgba(255,211,110,.12); }
.cg-virtue[aria-pressed="true"] b { background: var(--al-sun); }
.cg-virtue-t { min-height: 3.2em; margin: .5rem 0 .7rem; font-size: .8rem; line-height: 1.5; color: var(--al-mute); }
.cg-virtue-t b { color: var(--al-sun); }
.cg-virtue-t .zh { display: block; }

.cg-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.cg-btn-d { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,211,110,.45); background: transparent; color: var(--al-sun); font-family: var(--sans); font-weight: 800; font-size: .82rem; cursor: pointer; transition: background .2s; }
.cg-btn-d:hover { background: rgba(255,211,110,.12); }
.cg-btn-d[aria-pressed="true"] { background: var(--al-sun); color: #1b1405; }
.cg-note-d { margin: .6rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--al-mute); }

.cg-grind-out { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .3rem; }
.cg-grind-out b { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.cg-grind-out span { font-size: .8rem; font-weight: 700; color: var(--al-mute); }
.cg-dark-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .45rem; align-items: center; margin-bottom: .8rem; font-size: .68rem; font-weight: 700; color: var(--al-mute); }
.cg-dark-row b { min-width: 2.6em; text-align: right; font-size: .9rem; color: #fff; font-variant-numeric: tabular-nums; }
.cg-dark-bar { height: 12px; border-radius: 999px; background: rgba(143,166,181,.35); overflow: hidden; border: 1px solid var(--al-line); }
.cg-dark-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4a5160, #050507); transition: width .3s; }

.cg-force { width: 100%; height: 124px; display: block; border-radius: 12px; background: rgba(2,4,12,.55); border: 1px solid var(--al-line); }
.cg-phase-k { margin: .6rem 0 .2rem; font-weight: 800; font-size: .9rem; color: var(--al-sun); }
.cg-phase-t { margin: 0 0 .7rem; min-height: 6.6em; font-size: .8rem; line-height: 1.55; color: var(--al-text); }
.cg-phase-t .zh { display: block; margin-top: .2rem; color: var(--al-mute); }

/* 3D 裡的標籤：英文一行、中文一行 */
.al-lab.cg-lb { text-align: center; line-height: 1.25; padding: .18rem .6rem; }
.al-lab.cg-lb small { display: block; font-family: var(--zh); font-weight: 600; font-size: .68rem; color: var(--al-mute); }
.al-lab.cg-lb-t { color: #1b1405; background: rgba(255,211,110,.94); border-color: #ffd36e; font-weight: 800; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
.al-lab.cg-lb-t small { color: #4a3608; font-size: .78rem; font-weight: 700; }
.al-lab.cg-lb-k { color: #ffe3a3; border-color: rgba(201,161,74,.7); }
.al-lab.cg-lb-ph { color: #052421; background: rgba(79,209,197,.92); border-color: #4fd1c5; }
.al-lab.cg-lb-ph small { color: #0d3a35; }
.al-lab[hidden] { display: none; }
.cg-narrow .al-lab.cg-lb { font-size: .62rem; padding: .1rem .45rem; }
.cg-narrow .al-lab.cg-lb small { font-size: .6rem; }

/* 圖例與出處 */
.al-lg-cgt i { border: 0; border-radius: 6px; background: #ffd36e; }
.al-lg-cgh i { border: 2px solid #dfe7f7; border-radius: 6px; background: rgba(6,10,22,.6); }
.al-lg-cgg i { border: 0; border-radius: 2px; height: 4px; margin-top: .6rem; background: #d6564a; }
.al-lg-cgf i { border: 0; border-radius: 3px; height: 12px; margin-top: .3rem; background: linear-gradient(180deg, #ffd36e, rgba(255,211,110,.15)); }
.cg-credit { margin: 0; padding: 0 1.3rem 1.1rem; font-size: .74rem; line-height: 1.6; color: #7f90b0; }
.cg-credit a { color: var(--al-mute); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1020px) {
  .cg-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .cg-lab .al-space { aspect-ratio: 4 / 3; min-height: 380px; max-height: 80vh; border-right: 0; border-bottom: 1px solid var(--al-line); }
  .cg-focus { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cg-lab .al-space { aspect-ratio: 1 / 1; min-height: 0; max-height: 78vh; }
  .cg-focus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg-cams button { font-size: .7rem; padding: .32rem .55rem; }
  .cg-lab .al-hint { display: none; }
}

/* ---------- 卡片的小圖示 ---------- */
.cg-ico { background: radial-gradient(circle at 50% 40%, #3a2a1c, #120c08); }
.cg-lc-ico { background: radial-gradient(circle at 50% 38%, #3a2a1c, #120c08); }

/* ---------- 一滴墨在不同的紙上 ---------- */
.cg-drops { margin-top: 1.4rem; padding: 1.3rem 1.4rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); }
.cg-drop-ctl { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.cg-seg-l { margin: 0; min-width: min(100%, 360px); }
.cg-seg-l button { border-color: var(--line); background: var(--cream); color: var(--ink); font-size: .86rem; padding: .5rem .3rem; }
.cg-seg-l button small { color: var(--ink-soft); font-size: .8rem; }
.cg-seg-l button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }
.cg-seg-l button[aria-pressed="true"] small { color: rgba(255,255,255,.88); }
.cg-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--brand-dk); font-family: var(--sans); font-weight: 800; font-size: .88rem; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.cg-btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.cg-btn-gold { background: var(--gold); border-color: var(--gold); color: #1b1405; }
.cg-btn-gold:hover { background: var(--gold-dk); color: #fff; }
.cg-pad-demoing .cg-btn-gold { background: var(--brand); border-color: var(--brand); color: #fff; }
.cg-drop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cg-drop { margin: 0; display: flex; flex-direction: column; }
.cg-drop-cv { width: 100%; aspect-ratio: 1; display: block; border-radius: 12px; box-shadow: 0 10px 22px -16px rgba(60,40,10,.7); border: 1px solid #e7dcc4; }
.cg-drop figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .5rem; margin-top: .6rem; }
.cg-drop-n b { display: block; font-size: .95rem; line-height: 1.25; }
.cg-drop-n .zh { display: block; font-size: .9rem; color: var(--gold-dk); font-weight: 600; }
.cg-drop-x { align-self: start; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--brand-dk); font-variant-numeric: tabular-nums; }
.cg-drop-t { grid-column: 1 / -1; margin-top: .35rem; font-size: .86rem; line-height: 1.55; }
.cg-drop-t .zh { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .84rem; }
.cg-drop-note { margin: 1rem 0 0; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 900px) { .cg-drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cg-drops { padding: 1rem .9rem; } .cg-drop-grid { gap: .8rem .7rem; } .cg-drop-x { font-size: 1.2rem; } }

/* ---------- 練字板 ---------- */
.cg-pad { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 1.6rem; margin-top: 1.4rem; align-items: start; }
.cg-pad-paper { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.cg-pad-cv { width: 100%; aspect-ratio: 1; display: block; border-radius: 8px; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cg-pad-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.cg-pad-tg { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 1rem 0; font-weight: 700; font-size: .92rem; }
.cg-pad-tg label { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.cg-pad-tg input { width: 18px; height: 18px; accent-color: var(--brand); }
.cg-pad-meter-w { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.cg-pad-meter { height: 12px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); overflow: hidden; }
.cg-pad-meter i { display: block; height: 100%; width: 32%; background: linear-gradient(90deg, #6a6a74, #151311); transition: width .08s; }
.cg-pad-mode { margin: .9rem 0 0; font-size: .92rem; font-weight: 700; color: var(--brand-dk); }
.cg-pad-mode .zh { display: block; font-weight: 600; color: var(--ink-soft); }
.cg-m-pen { display: none; }
.cg-pad-pen .cg-m-pen { display: inline; }
.cg-pad-pen .cg-m-mouse { display: none; }
.cg-pad-tips { margin: 1rem 0 0; padding-left: 1.3em; display: grid; gap: .5rem; font-size: .95rem; line-height: 1.55; }
.cg-pad-tips .zh { display: block; color: var(--ink-soft); font-size: .9rem; }
.cg-pad-msg { min-height: 1.4em; margin: .8rem 0 0; font-size: .95rem; font-weight: 700; color: var(--brand-dk); }
@media (max-width: 860px) { .cg-pad { grid-template-columns: minmax(0, 1fr); } .cg-pad-paper { max-width: 520px; width: 100%; margin: 0 auto; box-sizing: border-box; } }
@media (max-width: 480px) { .cg-pad-paper { padding: 8px; } .cg-btn { font-size: .82rem; padding: .5rem .9rem; } }

/* ---------- 課程頁的延伸段落 ---------- */
.cg-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; }
.cg-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); }
.cg-safety li::before { content: "\26A0"; position: absolute; left: 1.05rem; top: .95rem; font-size: 1.2rem; color: var(--sunset); }
.cg-safety li .zh { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; }
.cg-links { display: grid; gap: 1rem; margin-top: 1.4rem; max-width: 860px; }
.cg-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.cg-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); color: var(--ink); }
.cg-link-soon { border-style: dashed; background: linear-gradient(120deg, #fff, var(--cream)); }
.cg-link-ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 50% 38%, #3a2a1c, #120c08); font-size: 2rem; }
.cg-link-b { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cg-link-k { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.cg-link-b b { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.cg-link-zh { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.cg-link-n { margin-top: .4rem; font-size: .92rem; line-height: 1.6; }
.cg-link-n .zh { display: block; margin-top: .2rem; color: var(--ink-soft); }
.cg-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; }
.cg-link-soon .cg-link-go { color: var(--ink-soft); background: var(--cream); border: 1px solid var(--line); }
.cg-sources { margin: 0 0 2.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.cg-sources .sub-head { margin-top: 0; }
.cg-sources > .muted { margin: .2rem 0 .8rem; font-size: .9rem; }
.cg-sources ol { margin: 0; padding-left: 1.3em; display: grid; gap: .55rem; }
.cg-sources li { font-size: .92rem; line-height: 1.55; }
.cg-sources li > span { display: block; }
.cg-sources li .zh { display: inline; margin-left: .4rem; color: var(--ink-soft); font-size: .88rem; }
.cg-sources a { font-weight: 700; font-size: .86rem; color: var(--brand-dk); overflow-wrap: anywhere; }
.cg-progress { font-weight: 700; color: var(--brand-dk); }
.cg-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%, #3a2a1c, #120c08); box-shadow: 0 14px 30px -18px rgba(30,15,5,.9); }
@media (max-width: 760px) { .cg-safety { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cg-link { flex-direction: column; } .cg-intro-ic { width: 80px; height: 80px; } .cg-intro-ic svg { width: 58px; height: 58px; } }

/* ---------- 第二課：提按、中鋒與側鋒、寫「十」 ---------- */
.cg-press-lab:not(.cg-writing) .cg-cams { display: inline-flex; }   /* 第二課三個看法都能換角度（蓋過第一課「只有寫字時才顯示」） */
.cg-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cg-patterns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-hand-row { margin: .2rem 0 .7rem; }
.cg-hand-row > span { text-transform: none; letter-spacing: .02em; font-size: .74rem; }
.cg-handmode .cg-hand-row .al-age::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(255,211,110,.35); }
.cg-spread-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.cg-spread i { background: linear-gradient(90deg, #8a6a3a, #ffd36e); transition: width .1s; }
.al-lab.cg-lb-ph small { font-size: .66rem; }
.al-lg-cgp i { border: 0; border-radius: 6px; background: #4fd1c5; }
@media (max-width: 1020px) { .cg-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 執筆：五根手指 */
.cg-fingers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.cg-finger { position: relative; padding: 1.1rem 1.1rem 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.cg-finger-ch { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3a2a1c, #120c08); color: #f6f0e1; font-family: var(--zh); font-size: 2rem; font-weight: 700; box-shadow: 0 10px 22px -14px rgba(30,15,5,.9); }
.cg-finger-py { display: block; margin-top: .55rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--gold-dk); }
.cg-finger h3 { margin: .2rem 0 .4rem; font-size: 1.1rem; }
.cg-finger h3 .zh { display: block; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.cg-finger p { margin: 0; font-size: .9rem; line-height: 1.6; }
.cg-finger p .zh { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .86rem; }
.cg-checks { margin-top: 1.3rem; padding: 1.1rem 1.4rem; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); }
.cg-checks .sub-head { margin-top: 0; }
.cg-checks ul { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 1.2rem; }
.cg-checks li { position: relative; padding-left: 1.7rem; font-size: .95rem; line-height: 1.55; }
.cg-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--brand); }
.cg-checks li .zh { display: block; color: var(--ink-soft); font-size: .9rem; }
@media (max-width: 1020px) { .cg-fingers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cg-checks ul { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cg-fingers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cg-finger-ch { width: 52px; height: 52px; font-size: 1.6rem; } }

/* 練字板：提按曲線比較 */
.cg-pad-cmp { margin-top: 1.1rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cg-pad-cmp .sub-head { margin-top: 0; }
.cg-pad-curve { width: 100%; height: 130px; display: block; border-radius: 10px; }
.cg-pad-key { margin: .45rem 0 0; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.cg-pad-key i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 .35rem 0 0; }
.cg-key-m { background: #b8902f; }
.cg-key-u { background: #1f6f8b; margin-left: .8rem !important; }
.cg-pad-score { margin: .5rem 0 0; font-size: .92rem; line-height: 1.55; }
.cg-pad-score b { color: var(--brand-dk); font-size: 1.05rem; }
.cg-pad-score .zh { display: block; color: var(--ink-soft); }

/* ---------- 第三課：永字八法 ---------- */
.cg-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.cg-methods button { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .4rem .15rem .35rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font-family: var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.cg-methods button b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f3ead6; color: #151311; font-family: var(--zh); font-size: 1.05rem; }
.cg-methods button span { font-weight: 800; font-size: .62rem; line-height: 1.15; text-align: center; }
.cg-methods button small { font-family: var(--zh); font-size: .66rem; color: var(--al-mute); }
.cg-methods button:hover { background: rgba(255,255,255,.07); }
.cg-methods 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; }
.cg-methods button[aria-pressed="true"] b { background: var(--al-sun); }
.cg-whole { align-self: flex-start; }
.al-lab.cg-lb-m { color: #ffe3a3; border-color: rgba(201,161,74,.75); background: rgba(12,10,6,.72); }
.al-lab.cg-lb-m b { font-family: var(--zh); font-size: .9rem; color: #fff; }
.al-lab.cg-lb-m.on { color: #1b1405; background: var(--al-sun); border-color: var(--al-sun); }
.al-lab.cg-lb-m.on b, .al-lab.cg-lb-m.on small { color: #1b1405; }
.cg-ico .cg-mini { width: 72px; height: 72px; border-radius: 10px; display: block; }
@media (max-width: 1020px) { .cg-methods { grid-template-columns: repeat(8, minmax(0, 1fr)); } .cg-methods button span { display: none; } }
@media (max-width: 640px) { .cg-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cg-methods button span { display: block; } }

/* ---------- 第四課：筆順與結構 ---------- */
.cg-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-rules button b { width: 34px; height: 34px; font-size: 1.15rem; }
.cg-backseg { margin: 0; }
.cg-backseg button[data-back="1"][aria-pressed="true"] { border-color: #ff8a7a; background: rgba(214,72,60,.18); box-shadow: 0 0 0 1px #ff8a7a inset; }
.cg-backseg button[data-back="1"][aria-pressed="true"] small { color: #ffb3a8; }
.cg-rule { border-top: 1px solid var(--al-line); padding-top: .7rem; }
.cg-rule-k { margin: 0 0 .3rem; font-family: var(--zh); font-weight: 800; font-size: 1.15rem; color: var(--al-sun); line-height: 1.25; }
.cg-rule-k small { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: #fff; }
.cg-rule-t { margin: 0 0 .45rem; font-family: var(--zh); font-size: .8rem; line-height: 1.65; color: var(--al-mute); }
.cg-rule-ex { display: block; margin-top: .15rem; color: var(--al-text); font-weight: 700; }
.cg-rule-why { margin: 0; font-size: .83rem; line-height: 1.6; color: var(--al-text); }
.cg-rule-why .zh { display: block; margin-top: .25rem; color: var(--al-mute); }
.cg-grids { margin-bottom: .3rem; }
.cg-back-badge { position: absolute; left: 50%; top: 4.2rem; transform: translate(-50%, -8px); margin: 0; padding: .4rem .95rem; border-radius: 999px; background: rgba(214,72,60,.92); color: #fff; font-weight: 800; font-size: .82rem; text-align: center; line-height: 1.3; box-shadow: 0 10px 24px -12px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 2; white-space: nowrap; }
.cg-back-badge .zh { display: block; font-size: .76rem; font-weight: 700; color: #ffe1dc; }
.cg-backward .cg-back-badge { opacity: 1; transform: translate(-50%, 0); }
.al-lab.cg-lb-num { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: #1f6f8b; border: 2px solid #fff; color: #fff; font-size: .86rem; font-weight: 800; letter-spacing: 0; box-shadow: 0 6px 14px -6px rgba(0,0,0,.7); }
.al-lab.cg-lb-num.back { background: #d6483c; }
.cg-narrow .al-lab.cg-lb-num { width: 22px; height: 22px; padding: 0; font-size: .74rem; }
.al-lg-cgn i { border: 2px solid #fff; background: #1f6f8b; }
.al-lg-cgr i { border: 2px solid #fff; background: #d6483c; }
.al-lg-cga i { border: 0; border-radius: 0; height: 0; margin-top: .55rem; border-top: 3px dashed #ffd36e; }
@media (max-width: 1020px) { .cg-rules { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cg-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg-back-badge { top: auto; bottom: .7rem; font-size: .72rem; padding: .32rem .8rem; }
  .cg-back-badge .zh { font-size: .68rem; }
}

/* 猜下一筆 */
.cg-guess { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 1.6rem; margin-top: 1.4rem; align-items: start; }
.cg-guess-paper { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.cg-guess-cv { width: 100%; aspect-ratio: 1; display: block; border-radius: 8px; touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.cg-guess-char { margin: 0; font-family: var(--zh); font-size: 2.6rem; font-weight: 800; line-height: 1.1; color: var(--brand-dk); }
.cg-guess-char small { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.cg-guess-msg { min-height: 3.4em; margin: 1rem 0 0; padding: .85rem 1rem; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); font-size: 1rem; font-weight: 700; line-height: 1.55; color: var(--ink); }
.cg-guess-msg .zh { display: block; margin-top: .2rem; font-weight: 600; color: var(--ink-soft); }
.cg-guess-sc { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0; font-size: .86rem; font-weight: 700; color: var(--ink-soft); }
.cg-guess-sc .zh { display: block; font-weight: 600; }
.cg-guess-sc b { font-family: var(--serif); font-size: 1.7rem; color: var(--brand-dk); font-variant-numeric: tabular-nums; }
.cg-guess-note { margin: 1rem 0 0; font-size: .86rem; color: var(--ink-soft); }
.cg-guess-note .zh { display: block; }
@media (max-width: 860px) { .cg-guess { grid-template-columns: minmax(0, 1fr); } .cg-guess-paper { max-width: 440px; width: 100%; margin: 0 auto; box-sizing: border-box; } }
@media (max-width: 480px) { .cg-guess-paper { padding: 8px; } .cg-guess-char { font-size: 2.1rem; } }

/* 練字板：換範字 */
.cg-pad-chars { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.cg-pad-chars > span { margin-right: .3rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-dk); }
.cg-pad-chars button { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--zh); font-size: 1.4rem; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.cg-pad-chars button:hover { border-color: var(--gold); transform: translateY(-1px); }
.cg-pad-chars button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 第五課：漢字從哪裡來？甲骨文到篆書 ---------- */
.cg-oracle-lab .cg-modes button i { font-size: 1.05rem; }
.cg-chars6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.cg-chars6 button { height: 40px; border-radius: 10px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font-family: var(--zh); font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.cg-chars6 button:hover { background: rgba(255,255,255,.08); }
.cg-chars6 button[aria-pressed="true"] { background: #f3ead6; color: #151311; border-color: var(--al-sun); box-shadow: 0 0 0 1px var(--al-sun) inset; }
.cg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: .5rem; }
.cg-step-t { margin: .6rem 0 0; font-size: .83rem; line-height: 1.6; color: var(--al-text); min-height: 3.2em; }
.cg-step-t .zh { display: block; margin-top: .25rem; color: var(--al-mute); }
.cg-nums3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-oracle-lab:not([data-mode="shell"]) .cg-step-row { display: none; }
.cg-oracle-lab .cg-panel { border-top: 0; padding-top: 0; }
.cg-oracle-lab .cg-cams button { padding: .38rem .6rem; }

/* 卡片：演變小圖 */
.cg-evo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .4rem 0 1rem; }
.cg-evo figure { margin: 0; text-align: center; }
.cg-evo canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 8px; box-shadow: 0 6px 14px -10px rgba(40,25,10,.8); }
.cg-evo figcaption { margin-top: .25rem; font-family: var(--zh); font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.cg-ico svg[class=""], .cg-ico > svg { border-radius: 12px; }

/* 三千年滑桿 */
.cg-time { margin-top: 1.4rem; padding: 1.3rem 1.4rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.cg-time-main { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.cg-time-paper { padding: 10px; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; }
.cg-time-cv { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; }
.cg-time-cap { margin: .2rem 0 .6rem; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.cg-time-cap b { font-family: var(--zh); font-size: 2rem; margin-right: .5rem; color: var(--brand-dk); vertical-align: -.1em; }
.cg-time-cap small { display: block; margin-top: .3rem; font-size: .92rem; color: var(--gold-dk); font-weight: 700; }
.cg-time-note { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.65; min-height: 6.6em; }
.cg-time-note .zh { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .95rem; }
.cg-time-slider { display: block; margin: 1.3rem .4rem .2rem; }
.cg-time-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gold) var(--p, 20%), var(--cream) var(--p, 20%)); border: 1px solid var(--line); outline-offset: 6px; cursor: pointer; }
.cg-time-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); border: 4px solid #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.45); }
.cg-time-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); border: 4px solid #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.45); }
.cg-time-ticks { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.cg-time-ticks button { width: 100%; padding: .4rem .2rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-family: var(--sans); cursor: pointer; text-align: center; line-height: 1.25; }
.cg-time-ticks button b { display: block; font-family: var(--zh); font-size: 1rem; }
.cg-time-ticks button span { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.cg-time-ticks button small { display: block; font-family: var(--zh); font-size: .7rem; color: var(--gold-dk); font-weight: 700; }
.cg-time-ticks button[aria-pressed="true"] { background: var(--brand-lt); }
.cg-time-ticks button[aria-pressed="true"] b { color: var(--brand-dk); }
.cg-time-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.cg-time-mini { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 14px -10px rgba(40,25,10,.8); transition: transform .2s; }
.cg-time-mini:hover { transform: translateY(-2px); }
@media (max-width: 860px) { .cg-time-main { grid-template-columns: minmax(0, 1fr); } .cg-time-paper { max-width: 400px; width: 100%; margin: 0 auto; box-sizing: border-box; } .cg-time-note { min-height: 0; } }
@media (max-width: 560px) {
  .cg-time { padding: 1rem .8rem; }
  .cg-time-ticks button span { display: none; }
  .cg-time-ticks button small { font-size: .62rem; }
  .cg-time-strip { gap: .3rem; }
}

/* 這是哪個字？ */
.cg-which-q { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 800; line-height: 1.45; }
.cg-which-q .zh { display: block; font-weight: 700; color: var(--ink-soft); font-size: .98rem; }
.cg-which-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.cg-which-opts button { height: 72px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-family: var(--zh); font-size: 2.2rem; font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s, border-color .2s, background .2s; }
.cg-which-opts button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.cg-which-opts button.ok { background: #2f8f5b; border-color: #2f8f5b; color: #fff; }
.cg-which-opts button.no { background: #fbe4e1; border-color: #e4a39a; color: #b2493d; }
.cg-which-opts button:disabled:not(.ok):not(.no) { opacity: .55; }
.cg-which-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin-top: .9rem; }
.cg-which-strip[hidden] { display: none; }
.cg-which-strip figure { margin: 0; text-align: center; }
.cg-which-strip canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 8px; }
.cg-which-strip figcaption { font-family: var(--zh); font-size: .72rem; font-weight: 700; color: var(--ink-soft); margin-top: .15rem; }
.cg-which-end { display: block; margin-top: .5rem; color: var(--gold-dk); }
.cg-which-cv { width: 100%; aspect-ratio: 1; display: block; border-radius: 8px; }
@media (max-width: 480px) { .cg-which-opts button { height: 60px; font-size: 1.9rem; } }
.al-lg-cgo i { border: 0; border-radius: 40% 40% 46% 46%; background: #e3d4b0; }
.al-lg-cgb i { border: 0; border-radius: 4px; background: linear-gradient(135deg, #7d8c62, #4f5d3f); }
.al-lg-cgw i { border: 0; border-radius: 3px; background: #1f1f22; box-shadow: inset 0 0 0 5px #1f1f22, inset 0 0 0 7px #ece8dd; }

/* ---------- 第六課：隸書——為什麼是蠶頭燕尾？ ---------- */
.cg-clerical-lab .cg-panel { border-top: 0; padding-top: 0; }
.cg-clerical-lab .cg-modes button i { font-size: 1.05rem; }
.cg-clerical-lab .cg-cams button { padding: .38rem .55rem; }
.cg-clerical-lab .cg-chars6 { margin-bottom: .7rem; }
.cg-clerical-lab .cg-whole { margin-bottom: .6rem; }
.cg-clerical-lab .cg-force { margin-top: .2rem; }
.al-lab.cg-lb-seal { color: #dbe7f7; border-color: rgba(120,160,210,.8); background: rgba(40,62,92,.86); }
.al-lab.cg-lb-seal small { color: #b9cde6; }
.al-lg-cgs i { border: 0; border-radius: 3px; height: 6px; margin-top: .5rem; background: #5f7fa6; }
.al-lg-cgv i { border: 0; border-radius: 3px; height: 6px; margin-top: .5rem; background: #c4321f; }
.al-lg-cgm i { border: 0; border-radius: 3px; background: linear-gradient(90deg, #d8c38c 0 30%, #b99d5f 30% 36%, #d8c38c 36% 66%, #b99d5f 66% 72%, #d8c38c 72%); }

/* 隸變前後 */
.cg-wipe-cv { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.cg-wipe .cg-time-slider { margin: .8rem .2rem .2rem; }
.cg-wipe-ratio { display: flex; align-items: center; gap: .9rem; margin: 0 0 .8rem; padding: .8rem 1rem; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); }
.cg-wipe-ratio[hidden] { display: none; }
.cg-wipe-ratio span { display: flex; flex-direction: column; font-size: .82rem; font-weight: 700; color: var(--ink-soft); line-height: 1.3; }
.cg-wipe-ratio b { font-family: var(--serif); font-size: 1.8rem; color: var(--brand-dk); line-height: 1.1; }
.cg-wipe-ratio small { font-family: var(--zh); font-weight: 600; }
.cg-wipe-ratio i { font-style: normal; font-size: 1.4rem; color: var(--gold-dk); }
.cg-wipe .cg-time-note { min-height: 5.2em; }
@media (max-width: 860px) { .cg-wipe .cg-time-note { min-height: 0; } }
.cg-clerical-lab .cg-btns { margin-bottom: .7rem; }
.cg-clerical-lab .cg-btns .cg-whole { margin-bottom: 0; }

/* ---------- 第七課：楷書、行書、草書——同一個字，三種速度 ---------- */
.cg-modes4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cg-modes4 button { font-size: .66rem; }
.cg-chars3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-race { width: 100%; border-collapse: collapse; font-size: .8rem; color: var(--al-text); font-variant-numeric: tabular-nums; }
.cg-race thead th { padding: .2rem .2rem .35rem; font-weight: 700; font-size: .66rem; color: var(--al-mute); text-align: center; line-height: 1.2; }
.cg-race thead th b { display: block; font-family: var(--zh); font-size: .95rem; color: #fff; }
.cg-race tbody th { padding: .38rem .3rem .38rem 0; text-align: left; font-weight: 800; font-size: .74rem; line-height: 1.2; border-top: 1px solid var(--al-line); }
.cg-race tbody th small { display: block; font-family: var(--zh); font-weight: 600; font-size: .68rem; color: var(--al-mute); }
.cg-race tbody td { padding: .38rem .2rem; text-align: center; font-weight: 800; color: #fff; border-top: 1px solid var(--al-line); }
.cg-race-time td { font-size: .9rem; color: var(--al-mute) !important; }
.cg-race-time td.done { color: #fff !important; }
.cg-race-time td.win { color: #1b1405 !important; background: var(--al-sun); border-radius: 8px; }
.cg-speed-lab[data-mode="race"] [data-cam="tip"] { display: none; }
.cg-speed-lab .cg-race-msg { min-height: 4.6em; margin-top: 0; }
.al-lab.cg-lb-race { padding: .2rem .7rem; }
.al-lab.cg-lb-race b { margin-right: .3rem; }
.al-lab.cg-lb-race small { font-family: var(--sans); font-size: .78rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.cg-narrow .al-lab.cg-lb-race { font-size: .58rem; padding: .1rem .35rem; }
.cg-narrow .al-lab.cg-lb-race small { font-size: .62rem; }
.al-lg-cgth i { border: 0; border-radius: 3px; height: 5px; margin-top: .5rem; background: #d13a25; }
@media (max-width: 1020px) { .cg-race { max-width: 520px; } }

/* 法帖裡的字（真的拓本、摹本） */
.cg-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.4rem; align-items: start; }
.cg-sheet { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cg-sheet img { display: block; width: 100%; height: 230px; object-fit: cover; background: #1c1b18; }
.cg-sheet figcaption { padding: 1rem 1.2rem 1.1rem; }
.cg-sheet figcaption b { display: block; font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; }
.cg-sheet figcaption > .zh { display: block; font-weight: 700; color: var(--gold-dk); margin-bottom: .4rem; }
.cg-sheet figcaption p { margin: 0 0 .3rem; font-size: .92rem; line-height: 1.6; }
.cg-sheet figcaption p .zh, .cg-sheet figcaption p + p { color: var(--ink-soft); }
.cg-sheet-credit { display: block; margin-top: .6rem; font-size: .74rem; line-height: 1.5; color: var(--ink-soft); }
.cg-sheet-credit a { color: var(--brand-dk); }
@media (max-width: 900px) { .cg-sheets { grid-template-columns: 1fr; max-width: 520px; } .cg-sheet img { height: 260px; } }

/* 這是哪一種字體？ */
.cg-scripts-opts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.cg-scripts-opts button { height: auto; padding: .7rem .2rem .6rem; font-size: 1rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.cg-scripts-opts button b { font-family: var(--zh); font-size: 1.25rem; }
.cg-scripts-opts button span { font-family: var(--sans); font-size: .7rem; font-weight: 800; color: var(--ink-soft); }
.cg-scripts-opts button.ok span, .cg-scripts-opts button.ok b { color: #fff; }
@media (max-width: 480px) { .cg-scripts-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cg-scripts-opts button { height: auto; font-size: 1rem; } }

/* 練字板：字體按鈕、碼表 */
.cg-pad-scripts button { width: auto; min-width: 74px; height: 46px; padding: 0 .7rem; font-size: 1.05rem; line-height: 1.05; }
.cg-pad-scripts button small { display: block; font-family: var(--sans); font-size: .62rem; font-weight: 800; opacity: .8; }
.cg-pad-timer { margin-top: 1.1rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cg-pad-timer .sub-head { margin-top: 0; }
.cg-pad-time { margin: .2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; font-size: .88rem; line-height: 1.45; color: var(--ink); }
.cg-pad-time > span { display: block; }
.cg-pad-time i { display: block; font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dk); }
.cg-pad-time b { font-family: var(--serif); font-size: 1.5rem; color: var(--brand-dk); font-variant-numeric: tabular-nums; }
.cg-pad-time small { display: block; color: var(--ink-soft); font-family: var(--zh); font-size: .84rem; }
.cg-pad-brush b { color: #b8902f; }
@media (max-width: 640px) { .cg-speed-lab .al-space { aspect-ratio: 5 / 4; } }
.cg-sheet-tall { display: grid; grid-template-columns: 124px minmax(0, 1fr); }
.cg-sheet-tall img { width: 124px; height: 100%; min-height: 340px; object-fit: cover; object-position: center top; background: #c9a55a; }
.cg-ico:has(> canvas[data-cg-script]) { width: 132px; height: 132px; border-radius: 22px; }
.cg-ico canvas[data-cg-script] { width: 116px; height: 116px; }

/* ---------- 第八課：書聖王羲之——蘭亭序的故事 ---------- */
.cg-lanting-lab .al-space { background: none; }
.cg-lanting-lab .cg-panel { border-top: 0; padding-top: 0; }
.cg-modes2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-chars4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .6rem; }
.cg-float { margin: 0 0 .8rem; background: var(--al-sun); color: #1b1405; }
.cg-float:hover { background: #ffe19a; }
.cg-lanting-lab .cg-whole { margin-bottom: .7rem; }
.cg-lanting-lab .al-lab { background: rgba(12,18,30,.78); }
.cg-lanting-lab .al-lab.cg-lb-t { background: rgba(255,211,110,.96); }
.cg-lanting-lab .al-hint { color: #24364a; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.al-lg-cgsr i { border: 0; border-radius: 3px; height: 7px; margin-top: .45rem; background: #5fa9c9; }
.al-lg-cgcu i { border: 0; border-radius: 50% / 40%; background: #8a1f17; }
@media (max-width: 1020px) { .cg-modes2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 二十個「之」 */
.cg-z20s { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.cg-z20 { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cg-z20-im { display: block; width: 100%; aspect-ratio: 1; background-size: 500% 400%; background-repeat: no-repeat; }
.cg-z20 figcaption { padding: .45rem .6rem .55rem; font-family: var(--zh); font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.cg-z20 figcaption b { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .35rem; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--sans); font-size: .72rem; }
.cg-z20-x { border-color: var(--gold); }
.cg-z20-x figcaption b { background: var(--gold-dk); }
.cg-z20-credit { margin-top: .9rem; }
@media (max-width: 760px) { .cg-z20s { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; } .cg-z20 figcaption { font-size: .74rem; padding: .35rem .4rem .45rem; } .cg-z20 figcaption b { width: 1.2rem; height: 1.2rem; font-size: .62rem; margin-right: .2rem; } }
@media (max-width: 420px) { .cg-z20s { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 找出一樣的之 */
.cg-same-target { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background-size: 500% 400%; background-repeat: no-repeat; }
.cg-same-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.cg-same-opts button { aspect-ratio: 1; border-radius: 14px; border: 3px solid var(--line); background-size: 500% 400%; background-repeat: no-repeat; cursor: pointer; padding: 0; transition: transform .15s, border-color .2s; }
.cg-same-opts button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.cg-same-opts button.ok { border-color: #2f8f5b; box-shadow: 0 0 0 3px rgba(47,143,91,.3); }
.cg-same-opts button.no { border-color: #d6483c; opacity: .45; }
.cg-ico:has(> svg[viewBox="0 0 60 60"][width="96"]) { width: 112px; height: 112px; border-radius: 20px; }