/*
 * 地理 Geography（/resources/classes/geography/）專屬樣式。
 * 共用的版面在 astro.css（.astro-lab、.al-*、.ph-card、.cc-card、.myth、.trick、.act）；這裡的 class 前綴一律 gg-。
 * 只載在本系列的頁面（build.py 的 _geo_head()）。中文一律系統字（var(--zh)），不載中文網頁字型。
 */

/* ── 3D 模型：可以攤平的地球儀 ───────────────────────────────────────── */
.gg-lab .al-stage { grid-template-columns: minmax(0, 1fr) 360px; }
.gg-lab .al-space { min-height: 560px; background: radial-gradient(60% 55% at 50% 45%, rgba(80,140,255,.12), transparent 70%); }
.gg-lab .al-hint { left: auto; right: 1rem; text-align: right; }
.al-lab.gg-lab { font-size: .7rem; }
.al-lab.gg-lab i { font-style: normal; font-family: var(--zh); font-weight: 600; margin-left: .25rem; color: #b9c8e6; }
.al-lab.gg-lab-tw { color: #ffd0d0; border-color: rgba(255,120,120,.55); }
.al-lab.gg-lab-eq { color: #ffc9a8; border-color: rgba(255,157,107,.45); background: rgba(40,18,6,.6); }
.gg-aside { display: flex; flex-direction: column; gap: .6rem; }
.gg-aside > * { min-width: 0; }
.gg-aside .al-sky-k { margin-bottom: 0; }
.gg-pinfo[hidden] { display: none; }
.gg-pname { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; color: #fff; }
.gg-pname .zh { display: block; margin-top: .15rem; font-family: var(--zh); font-size: 1rem; font-weight: 600; color: var(--al-sun); }
.gg-pnote { margin: .45rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--al-text); }
.gg-pnote .zh { display: block; margin-top: .2rem; color: var(--al-mute); }
.gg-props { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.gg-props li { display: grid; grid-template-columns: 1.5rem 5.6rem minmax(0, 1fr); gap: .1rem .4rem; align-items: baseline; padding: .34rem .5rem; border-radius: 9px; background: rgba(255,255,255,.04); font-size: .76rem; line-height: 1.4; }
.gg-props li::before { font-weight: 800; font-size: .9rem; text-align: center; }
.gg-props li.is-yes::before { content: "\2713"; color: #7ee0aa; }
.gg-props li.is-no::before { content: "\2717"; color: #ff9d8a; }
.gg-props li.is-part::before { content: "\25D0"; color: #ffd36e; }
.gg-props li.is-yes { background: rgba(126,224,170,.1); }
.gg-props b { font-weight: 800; color: #fff; }
.gg-props b .zh { display: block; font-family: var(--zh); font-weight: 600; font-size: .72rem; color: var(--al-mute); }
.gg-props span.gg-pv .zh { display: block; color: var(--al-mute); }
.gg-read { margin-top: .2rem; padding-top: .65rem; border-top: 1px solid var(--al-line); display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: .3rem .8rem; align-items: center; }
.gg-read-k { grid-column: 1 / -1; margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--al-sun); }
.gg-facts { margin: 0; display: grid; gap: .3rem; }
.gg-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.gg-facts dt { font-size: .7rem; font-weight: 700; color: var(--al-mute); line-height: 1.3; }
.gg-facts dd { margin: 0; font-size: 1.05rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.gg-facts dd small { display: block; font-size: .68rem; font-weight: 700; color: var(--al-mute); }
.gg-ell { width: 120px; height: 104px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--al-line); }
.gg-ell-ref { fill: none; stroke: #9fb0cf; stroke-width: 1.2; stroke-dasharray: 3 3; }
.gg-ell-shape { fill: rgba(111,224,255,.35); stroke: #6fe0ff; stroke-width: 1.6; stroke-linejoin: round; }
.gg-shape-note { grid-column: 1 / -1; margin: 0; min-height: 3.1em; font-size: .76rem; line-height: 1.5; color: var(--al-text); }
.gg-shape-note .zh { display: block; color: var(--al-mute); }
.gg-shape-note span[hidden] { display: none; }
.gg-slide { grid-column: 1 / -1; display: grid; gap: .15rem; font-size: .7rem; font-weight: 700; color: var(--al-mute); }
.gg-slide input, .gg-flatrow input { width: 100%; accent-color: #ffd36e; }
.gg-flatrow { flex: 1 1 260px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 700; color: var(--al-mute); }
.gg-projs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; margin-top: .8rem; }
.gg-projs button { padding: .5rem .3rem; border-radius: 12px; border: 1px solid var(--al-line); background: rgba(255,255,255,.03); color: var(--al-text); font-family: var(--sans); font-size: .8rem; cursor: pointer; transition: background .15s, border-color .15s; }
.gg-projs button b { display: block; font-weight: 800; }
.gg-projs button small { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.gg-projs button:hover { background: rgba(255,255,255,.08); }
.gg-projs 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; }
.gg-lab .al-toggles { margin-top: .8rem; }
.gg-peel[aria-pressed="true"] .al-play-i { width: 11px; height: 13px; border: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.al-lg-land i { border-color: #5d8f52; background: #8fbf7a; }
.al-lg-sea i { border-color: #3a66a8; background: #1f4c8a; }
.al-lg-circle i { border-color: #ffd2a8; background: rgba(255,138,61,.6); border-radius: 50%; }
.al-lg-sel i { border-color: #fff; background: rgba(111,224,255,.7); border-radius: 50%; }
.al-lg-eq i { border-color: #ff9d6b; background: #ff9d6b; height: 3px; border-radius: 2px; }
.al-lg-tw i { border-color: #fff; background: #ff4d4d; border-radius: 50%; width: 10px; height: 10px; margin: 0 4px; }
.gg-lab.al-nogl .al-sky { display: flex; }
.gg-lab.al-nogl .al-controls { display: block; }
.gg-lab.al-nogl .al-space { min-height: 150px; aspect-ratio: auto; border-right: 0; border-bottom: 1px solid var(--al-line); }
.gg-lab.al-nogl .gg-flatrow, .gg-lab.al-nogl .gg-peel, .gg-lab.al-nogl .al-toggles { display: none; }
@media (max-width: 1000px) {
  .gg-lab .al-stage { grid-template-columns: minmax(0, 1fr); }
  .gg-lab .al-space { aspect-ratio: 16 / 10; min-height: 340px; max-height: 80vh; border-right: 0; border-bottom: 1px solid var(--al-line); }
}
@media (max-width: 620px) {
  .gg-lab .al-space { aspect-ratio: 1 / 1; min-height: 0; max-height: 70vh; }
  .gg-lab .al-hint { display: none; }
  .gg-projs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-projs button:last-child { grid-column: 1 / -1; }
  .al-lab.gg-lab { font-size: .62rem; padding: .08rem .4rem; }
}

/* ── 拖著走 ─────────────────────────────────────────────────────────── */
.gg-drag { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: #0c1428; color: #e8edf7; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.gg-dg-map { position: relative; background: #16335f; display: grid; align-items: center; }
.gg-dg-cv { display: block; width: 100%; aspect-ratio: 1.4135; touch-action: pan-y; }
.gg-dg-cv.is-drag { cursor: grabbing !important; }
.gg-dg-hint { position: absolute; left: .7rem; top: .6rem; margin: 0; padding: .2rem .6rem; border-radius: 999px; background: rgba(6,10,22,.6); font-size: .72rem; font-weight: 700; color: #cfd8ee; pointer-events: none; }
.gg-dg-side { padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.gg-dg-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.gg-dg-pick button { padding: .42rem .2rem; border-radius: 11px; border: 1px solid rgba(160,180,230,.25); background: rgba(255,255,255,.04); color: #e8edf7; font-family: var(--sans); font-size: .78rem; font-weight: 800; cursor: pointer; }
.gg-dg-pick button small { display: block; font-family: var(--zh); font-weight: 600; color: #9fb0cf; }
.gg-dg-pick button i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; background: var(--c); }
.gg-dg-pick button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
.gg-dg-name { margin: 0; font-family: var(--serif); font-size: 1.35rem; color: #fff; }
.gg-dg-name .zh { font-family: var(--zh); font-size: 1rem; font-weight: 600; color: #ffd36e; margin-left: .3rem; }
.gg-dg-facts { margin: 0; display: grid; gap: .4rem; }
.gg-dg-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(160,180,230,.14); }
.gg-dg-facts dt { font-size: .72rem; font-weight: 700; line-height: 1.35; color: #9fb0cf; }
.gg-dg-facts dt .zh { display: block; }
.gg-dg-facts dd { margin: 0; font-size: 1.12rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.gg-dg-facts dd small { display: block; font-size: .64rem; font-weight: 700; color: #9fb0cf; white-space: normal; }
.gg-dg-facts .is-key dd { color: #ffd36e; font-size: 1.35rem; }
.gg-dg-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.gg-dg-msg { margin: 0; min-height: 5.2em; font-size: .84rem; line-height: 1.6; }
.gg-dg-msg .zh { display: block; color: #9fb0cf; }
.gg-dg-msg span[hidden] { display: none; }
@media (max-width: 900px) {
  .gg-drag { grid-template-columns: minmax(0, 1fr); }
  .gg-dg-msg { min-height: 0; }
}

/* ── 哪一張地圖適合？ ───────────────────────────────────────────────── */
.gg-fit { margin-top: 1.5rem; padding: 1.5rem 1.6rem 1.4rem; background: #0c1428; color: #e8edf7; border-radius: 20px; box-shadow: var(--shadow); max-width: 940px; }
.gg-ft-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline; }
.gg-ft-k { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffd36e; }
.gg-ft-sc { margin: 0; font-size: .82rem; color: #9fb0cf; }
.gg-ft-score { margin-left: .3rem; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.gg-ft-steps { display: flex; gap: .35rem; margin: .9rem 0 0; }
.gg-ft-steps i { flex: 1; height: 6px; border-radius: 3px; background: #2b3550; }
.gg-ft-steps i.is-first { background: #5fd39a; }
.gg-ft-steps i.is-later { background: #4a7bd6; }
.gg-ft-steps i.is-now { background: #ffd36e; }
.gg-ft-q { margin: 1.1rem 0 0; min-height: 4.6em; font-size: 1.12rem; line-height: 1.5; font-weight: 700; color: #fff; }
.gg-ft-q .zh { display: block; margin-top: .25rem; font-family: var(--zh); font-size: 1rem; font-weight: 600; color: #b9c8e6; }
.gg-ft-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.gg-ft-opt { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .7rem .5rem .8rem; border-radius: 16px; border: 1px solid rgba(160,180,230,.3); background: rgba(255,255,255,.05); color: #fff; font-family: var(--sans); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; min-width: 0; }
.gg-ft-opt:hover:not(:disabled) { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.gg-ft-opt:disabled { cursor: default; }
.gg-ft-opt canvas { width: 100%; aspect-ratio: 3 / 2; display: block; }
.gg-ft-lab { font-weight: 800; font-size: .88rem; text-align: center; line-height: 1.35; }
.gg-ft-lab .zh { display: block; font-family: var(--zh); font-weight: 600; color: #9fb0cf; }
.gg-ft-opt.is-right { background: rgba(47,158,99,.55); border-color: #7ee0aa; box-shadow: 0 0 0 2px #7ee0aa inset; }
.gg-ft-opt:disabled:not(.is-right) .gg-ft-lab, .gg-ft-opt:disabled:not(.is-right) canvas { opacity: .55; }
.gg-ft-opt.is-wrong { background: rgba(214,69,69,.22); border-color: #e08a8a; opacity: .6; }
.gg-ft-msg { margin: 1rem 0 .9rem; min-height: 5.4em; font-size: .93rem; line-height: 1.6; }
.gg-ft-msg .zh { display: block; color: #9fb0cf; }
.gg-ft-msg.is-right b { color: #7ee0aa; } .gg-ft-msg.is-wrong b { color: #ffb4a2; }
.gg-ft-foot { display: flex; justify-content: flex-end; min-height: 2.6rem; }
@media (max-width: 620px) {
  .gg-fit { padding: 1.2rem 1rem 1.1rem; }
  .gg-ft-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-ft-q { font-size: 1rem; min-height: 6.4em; }
}

/* ── 地圖英語（每課都有的共用版面） ─────────────────────────────────── */
.gg-me { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; counter-reset: ggme; max-width: 1040px; }
.gg-me li { counter-increment: ggme; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .8rem; align-items: start; padding: .95rem 1.1rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 14px; box-shadow: var(--shadow-sm); }
.gg-me .spk { grid-row: 1 / span 3; }
.gg-me-en { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.45; color: var(--ink); }
.gg-me-en::before { content: counter(ggme) ". "; color: var(--gold-dk); font-weight: 800; }
.gg-me-en b { color: var(--brand-dk); }
.gg-me-zh { margin: 0; font-family: var(--zh); font-size: .96rem; line-height: 1.6; color: var(--ink-soft); }
.gg-me-use { margin: .2rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--gold-dk); font-weight: 700; }
.gg-me-use .zh { font-family: var(--zh); font-weight: 600; margin-left: .3rem; }
@media (max-width: 760px) { .gg-me { grid-template-columns: minmax(0, 1fr); } }

/* ── 卡片、課綱、延伸閱讀、出處（各系列一樣的版面，前綴換成 gg-） ───── */
.gg-btn { display: inline-flex; align-items: center; justify-content: 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: .86rem; line-height: 1.3; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.gg-btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); }
.gg-btn:disabled { opacity: .45; cursor: default; }
.gg-btn-gold { background: var(--gold); border-color: var(--gold); color: #1b1405; }
.gg-btn-gold:hover:not(:disabled) { background: var(--gold-dk); color: #fff; }
.gg-btn[hidden] { display: none; }
.gg-ico { background: radial-gradient(circle at 50% 40%, #fff8e3, #f1dfae); font-size: 2.2rem; }
.gg-lc-ico { background: radial-gradient(circle at 50% 38%, #1b2f5c, #070b17); }
.gg-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; color: #9fb0cf; cursor: pointer; }
.gg-check input { width: 18px; height: 18px; accent-color: #ffd36e; }
.gg-curric { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 900px; }
.gg-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); }
.gg-cur-k { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; font-size: .82rem; color: var(--ink-soft); }
.gg-cur-k b { font-size: 1rem; color: var(--brand-dk); font-variant-numeric: tabular-nums; }
.gg-cur-q { margin: .4rem 0 0; font-size: 1rem; line-height: 1.7; font-family: var(--zh); }
.gg-cur-n { margin: .5rem 0 0; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }
.gg-cur-n .zh { display: block; }
.gg-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; }
.gg-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); }
.gg-safety li::before { content: "\26A0"; position: absolute; left: 1.05rem; top: .95rem; font-size: 1.2rem; color: var(--sunset); }
.gg-safety li .zh { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; }
.gg-links { display: grid; gap: 1rem; margin-top: 1.4rem; max-width: 860px; }
.gg-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.gg-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); color: var(--ink); }
.gg-link-soon { border-style: dashed; background: linear-gradient(120deg, #fff, var(--cream)); }
.gg-link-ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 50% 38%, #1b2f5c, #070b17); font-size: 2rem; }
.gg-link-b { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gg-link-k { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.gg-link-b b { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.gg-link-zh { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.gg-link-n { margin-top: .4rem; font-size: .92rem; line-height: 1.6; }
.gg-link-n .zh { display: block; margin-top: .2rem; color: var(--ink-soft); }
.gg-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; }
.gg-link-soon .gg-link-go { color: var(--ink-soft); background: var(--cream); border: 1px solid var(--line); }
.gg-sources { margin: 0 0 2.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.gg-sources .sub-head { margin-top: 0; }
.gg-sources > .muted { margin: .2rem 0 .8rem; font-size: .9rem; }
.gg-sources ol { margin: 0; padding-left: 1.3em; display: grid; gap: .55rem; }
.gg-sources li { font-size: .92rem; line-height: 1.55; }
.gg-sources li > span { display: block; }
.gg-sources li .zh { display: inline; margin-left: .4rem; color: var(--ink-soft); font-size: .88rem; }
.gg-sources a { font-weight: 700; font-size: .86rem; color: var(--brand-dk); overflow-wrap: anywhere; }
.gg-progress { font-weight: 700; color: var(--brand-dk); }
.gg-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%, #1b2f5c, #070b17); box-shadow: 0 14px 30px -18px rgba(6,12,30,.9); }
@media (max-width: 560px) {
  .gg-link { flex-direction: column; }
  .gg-intro-ic { width: 80px; height: 80px; } .gg-intro-ic svg { width: 58px; height: 58px; }
}
/* ── 第二課：經緯度 ─────────────────────────────────────────────────── */
.gg-ll-lab .al-space-cv.gg-can-grab { cursor: pointer; }
.gg-ll-lab .al-space-cv.gg-grabbing { cursor: grabbing; }
.al-lab.gg-lab-pm { color: #ffc4ea; border-color: rgba(255,143,216,.5); }
.al-lab.gg-lab-pt { color: #06121f; background: #6fe0ff; border-color: #fff; font-size: .78rem; font-variant-numeric: tabular-nums; }
.gg-ll-addr { margin: 0; font-family: var(--serif); font-size: 1.95rem; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }
.gg-ll-dm { margin: 0; font-size: .95rem; font-weight: 700; color: var(--al-sun); font-variant-numeric: tabular-nums; }
.gg-ll-two { margin: .3rem 0 0; display: grid; gap: .45rem; }
.gg-ll-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: baseline; padding: .55rem .7rem; border-radius: 12px; background: rgba(255,255,255,.04); border-left: 4px solid #ffd36e; }
.gg-ll-rlon { border-left-color: #6fe0ff; }
.gg-ll-row dt { font-size: .86rem; color: var(--al-text); }
.gg-ll-row dt b { font-weight: 800; color: #fff; margin-right: .25rem; }
.gg-ll-row dt small { display: block; font-size: .7rem; color: var(--al-mute); }
.gg-ll-row dd { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gg-ll-row p { grid-column: 1 / -1; margin: 0; font-size: .74rem; color: var(--al-mute); }
.gg-ll-row p span { display: none; }
.gg-ll-row p[data-side="a"] span[data-s="a"], .gg-ll-row p[data-side="b"] span[data-s="b"], .gg-ll-row p[data-side="mid"] span[data-s="mid"] { display: inline; }
.gg-ll-s1 input { accent-color: #ffd36e; } .gg-ll-s2 input { accent-color: #6fe0ff; }
.gg-ll-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.gg-ll-spots button, .gg-dd-presets button { padding: .42rem .2rem; border-radius: 11px; border: 1px solid var(--al-line, rgba(160,180,230,.25)); background: rgba(255,255,255,.03); color: #e8edf7; font-family: var(--sans); font-size: .78rem; cursor: pointer; }
.gg-ll-spots button b, .gg-dd-presets button b { display: block; font-weight: 800; }
.gg-ll-spots button small, .gg-dd-presets button small { display: block; font-family: var(--zh); font-weight: 600; color: #9fb0cf; }
.gg-ll-spots button:hover, .gg-dd-presets button:hover { background: rgba(255,255,255,.09); }
.gg-dd-presets button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
.gg-ll-note { margin: 0; min-height: 4.6em; font-size: .8rem; line-height: 1.55; color: var(--al-text); }
.gg-ll-note .zh { display: block; color: var(--al-mute); }
.gg-ll-note span[hidden] { display: none; }
.al-lg-par i { border-color: #ffd36e; background: #ffd36e; height: 3px; border-radius: 2px; }
.al-lg-mer i { border-color: #6fe0ff; background: #6fe0ff; height: 3px; border-radius: 2px; }
.al-lg-pm i { border-color: #ff8fd8; background: #ff8fd8; height: 3px; border-radius: 2px; }
.al-lg-latang i { border-color: #ffd36e; background: rgba(255,211,110,.45); }
.al-lg-lonang i { border-color: #6fe0ff; background: rgba(111,224,255,.45); }
.gg-lab.al-nogl .gg-ll-spots { display: none; }

/* 找出這個地方 */
.gg-find { max-width: 1040px; }
.gg-fd-q { margin: 1.1rem 0 0; display: grid; gap: .1rem; }
.gg-fd-lead { font-size: .8rem; font-weight: 700; color: #9fb0cf; }
.gg-fd-coord { font-family: var(--serif); font-size: 2rem; line-height: 1.2; color: #ffd36e; font-variant-numeric: tabular-nums; }
.gg-fd-say-en { font-size: .95rem; font-weight: 700; color: #fff; min-height: 1.4em; }
.gg-fd-q .zh { font-family: var(--zh); font-size: .9rem; color: #b9c8e6; min-height: 1.4em; }
.gg-fd-map { margin-top: .9rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(160,180,230,.25); }
.gg-fd-cv { display: block; width: 100%; aspect-ratio: 1.94; cursor: crosshair; touch-action: manipulation; }
.gg-fd-cv.is-done { cursor: default; }
.gg-find .gg-ft-msg { min-height: 4.4em; }
@media (max-width: 620px) { .gg-fd-coord { font-size: 1.5rem; } .gg-fd-cv { aspect-ratio: 1.75; } }

/* 一度有多長？ */
.gg-degree { grid-template-columns: minmax(0, 1fr) 320px; }
.gg-dd-fig { background: #0a1122; display: grid; align-items: center; }
.gg-dd-cv { display: block; width: 100%; aspect-ratio: 16 / 9; }
.gg-dd-slide { grid-column: auto; font-size: .78rem; color: #9fb0cf; }
.gg-dd-slide b { color: #fff; font-size: 1rem; }
.gg-dd-slide input { width: 100%; accent-color: #ffd36e; }
.gg-dd-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.gg-dd-presets button { font-size: .68rem; padding: .35rem .1rem; }
@media (max-width: 900px) { .gg-degree { grid-template-columns: minmax(0, 1fr); } .gg-dd-cv { aspect-ratio: 16 / 10; } }

/* ── 第三課：等高線 ─────────────────────────────────────────────────── */
.gg-ct-lab .al-space { background: radial-gradient(70% 60% at 50% 50%, rgba(80,140,255,.12), transparent 70%); }
.gg-ct-big { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.gg-ct-big span { font-size: .78rem; font-weight: 700; color: var(--al-mute); }
.gg-ct-big b { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: #7fc4ff; font-variant-numeric: tabular-nums; }
.gg-ct-big b small { font-size: 1rem; color: var(--al-mute); }
.gg-ct-water { accent-color: #4fb7ff !important; }
.gg-ct-ints, .gg-ct-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.gg-ct-views { grid-template-columns: repeat(2, minmax(0, auto)); }
.gg-ct-ints button, .gg-ct-views button, .gg-pf-pre button { padding: .4rem .5rem; border-radius: 11px; border: 1px solid rgba(160,180,230,.25); background: rgba(255,255,255,.03); color: #e8edf7; font-family: var(--sans); font-size: .76rem; cursor: pointer; }
.gg-ct-ints button b, .gg-ct-views button b, .gg-pf-pre button b { display: block; font-weight: 800; }
.gg-ct-ints button small, .gg-ct-views button small, .gg-pf-pre button small { display: block; font-family: var(--zh); font-weight: 600; color: #9fb0cf; }
.gg-ct-ints button[aria-pressed="true"], .gg-ct-views button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
.gg-ct-pick { padding-top: .5rem; border-top: 1px solid var(--al-line); display: grid; gap: .3rem; }
.gg-ct-note { margin: 0; min-height: 4.4em; font-size: .8rem; line-height: 1.55; color: var(--al-text); }
.gg-ct-note .zh { display: block; color: var(--al-mute); }
.gg-ct-note span[hidden] { display: none; }
.al-lab.gg-lab b { font-weight: 800; color: #fff; margin-left: .25rem; }
.al-lab.gg-lab-top { color: #fff; border-color: rgba(255,255,255,.6); }
.al-lab.gg-lab-sad { color: #ffe3a3; border-color: rgba(255,211,110,.5); }
.al-lab.gg-lab-val { color: #bfe6ff; border-color: rgba(79,183,255,.5); }
.al-lg-water i { border-color: #4fb7ff; background: rgba(63,143,224,.6); }
.al-lg-gold i { border-color: #ffd36e; background: #ffd36e; height: 3px; border-radius: 2px; }
.al-lg-white i { border-color: #fff; background: #fff; height: 3px; border-radius: 2px; }
.al-lg-pick i { border-color: #fff; background: #ff4d8a; border-radius: 50%; }
.gg-lab.al-nogl .gg-ct-play, .gg-lab.al-nogl .gg-ct-views, .gg-lab.al-nogl .gg-ct-pick { display: none; }

/* 哪一條路比較陡？ */
.gg-steep { max-width: 1040px; }
.gg-st-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; margin-top: .9rem; align-items: start; }
.gg-st-map { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; }
.gg-st-side { display: grid; gap: .8rem; }
.gg-st-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gg-st-opt { flex-direction: row; justify-content: center; }
.gg-st-dot { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; border: 2px solid #fff; flex: none; }
.gg-st-prof { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; background: rgba(255,255,255,.04); }
@media (max-width: 860px) { .gg-st-body { grid-template-columns: minmax(0, 1fr); } }

/* 從等高線到剖面 */
.gg-profile { grid-template-columns: minmax(0, 1fr) 360px; }
.gg-pf-left { background: #0a1122; display: grid; place-items: center; padding: .6rem; }
.gg-pf-map { display: block; width: 100%; max-width: 620px; aspect-ratio: 1; touch-action: pan-y; }
.gg-pf-k { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffd36e; }
.gg-pf-prof { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; background: rgba(255,255,255,.04); }
.gg-pf-pre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
@media (max-width: 900px) { .gg-profile { grid-template-columns: minmax(0, 1fr); } }

/* 3D 面板最下面的資料說明（三課共用；之前漏了這一條，字會變成內文大小） */
.gg-credit { margin: 0; padding: 0 1.3rem 1.1rem; font-size: .74rem; line-height: 1.6; color: #7f90b0; }

/* ── 第四課：地圖怎麼看 ─────────────────────────────────────────────── */
.gg-mv-lab .al-space-cv { cursor: ew-resize; }
.gg-mv-north { position: absolute; left: 1rem; top: 1rem; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.88); box-shadow: 0 4px 14px rgba(0,0,0,.35); display: grid; place-items: center; pointer-events: none; }
.gg-mv-north i { display: block; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 30px solid #2b2118; position: relative; transform-origin: 50% 60%; }
.gg-mv-north i b { position: absolute; left: -5px; top: 9px; font-style: normal; font-size: .7rem; font-weight: 800; color: #fff; }
.gg-mv-bar { position: absolute; left: 1rem; bottom: 2.4rem; padding: .3rem .6rem .45rem; border-radius: 8px; background: rgba(255,255,255,.9); pointer-events: none; opacity: 0; transition: opacity .2s; }
.gg-mv-bar i { display: block; height: 5px; background: linear-gradient(90deg, #2b2118 50%, #fff 50%); border: 1px solid #2b2118; }
.gg-mv-bar b { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 800; color: #2b2118; text-align: right; }
.al-lab.gg-sym { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem .1rem .2rem; background: rgba(255,255,255,.92); color: #2b2118; border-color: rgba(43,33,24,.35); font-size: .68rem; transition: opacity .2s, transform .1s; }
.al-lab.gg-sym img { width: 22px; height: 22px; display: block; }
.al-lab.gg-sym i { font-style: normal; font-family: var(--zh); font-weight: 600; margin-left: .25rem; color: #6b5a48; }
.al-lab.gg-sym.is-hot { background: #ffd36e; box-shadow: 0 0 0 3px rgba(255,211,110,.6); z-index: 2; }
.gg-mv-note { margin: 0; min-height: 5.2em; font-size: .82rem; line-height: 1.55; color: var(--al-text); }
.gg-mv-note .zh { display: block; color: var(--al-mute); }
.gg-mv-note span[hidden] { display: none; }
.gg-mv-views, .gg-ms-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.gg-mv-views button, .gg-ms-views button { padding: .4rem .3rem; border-radius: 11px; border: 1px solid rgba(160,180,230,.25); background: rgba(255,255,255,.03); color: #e8edf7; font-family: var(--sans); font-size: .72rem; cursor: pointer; }
.gg-mv-views button b, .gg-ms-views button b { display: block; font-weight: 800; }
.gg-mv-views button small, .gg-ms-views button small { display: block; font-family: var(--zh); font-weight: 600; color: #9fb0cf; }
.gg-mv-views button[aria-pressed="true"], .gg-ms-views button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
.gg-read-k small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--al-mute); }
.gg-mv-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
.gg-mv-key { display: flex; align-items: center; gap: .4rem; padding: .25rem .35rem; border-radius: 9px; border: 1px solid rgba(160,180,230,.18); background: rgba(255,255,255,.92); color: #2b2118; font-family: var(--sans); font-size: .72rem; font-weight: 700; text-align: left; cursor: pointer; }
.gg-mv-key img { width: 24px; height: 24px; flex: none; }
.gg-mv-key small { display: block; font-family: var(--zh); font-weight: 600; color: #6b5a48; }
.gg-mv-key.is-hot { background: #ffd36e; }
.gg-lab.al-nogl .gg-mv-play, .gg-lab.al-nogl .gg-flatrow, .gg-lab.al-nogl .gg-mv-views { display: none; }
/* 量一量 */
.gg-measure { grid-template-columns: minmax(0, 1fr) 360px; }
.gg-ms-cv { display: block; width: 100%; max-width: 640px; aspect-ratio: 1; touch-action: pan-y; border-radius: 10px; }
.gg-ms-views button { font-size: .68rem; }
@media (max-width: 900px) { .gg-measure { grid-template-columns: minmax(0, 1fr); } }
/* 照著地圖找 */
.gg-legend { max-width: 1040px; }
.gg-lg-map { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; }
.gg-lg-opts { display: grid; gap: .5rem; }
.gg-lg-opt { flex-direction: row; justify-content: flex-start; gap: .7rem; padding: .6rem .8rem; }
.gg-lg-opt img { width: 30px; height: 30px; flex: none; background: #fff; border-radius: 8px; padding: 2px; }
.gg-lg-opt .gg-ft-lab { text-align: left; }
.gg-lg-d { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #ffd36e; color: #1b1405; font-size: .8rem; }

/* ── 第五課：時區 ───────────────────────────────────────────────────── */
.gg-tz-big { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.gg-tz-big b { font-family: var(--serif); font-size: 2.3rem; line-height: 1; color: #ffd36e; font-variant-numeric: tabular-nums; }
.gg-tz-big span { font-size: .8rem; font-weight: 700; color: var(--al-mute); }
.gg-tz-cities { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.gg-tz-cities li { display: grid; grid-template-columns: minmax(0, 1fr) 1.4rem 4.6rem 4.6rem 2.6rem; align-items: center; gap: .3rem; padding: .3rem .45rem; border-radius: 9px; background: rgba(255,211,110,.08); font-size: .76rem; }
.gg-tz-cities li.is-night { background: rgba(80,100,160,.16); }
.gg-tz-cities li[data-city="taipei"] { box-shadow: 0 0 0 1px #ff8a8a inset; }
.gg-tz-n { font-weight: 800; color: #fff; line-height: 1.2; }
.gg-tz-n small { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.gg-tz-t { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.gg-tz-d { color: var(--al-mute); font-size: .7rem; text-align: right; }
.gg-tz-x { color: #ffd36e; font-weight: 700; font-size: .7rem; text-align: right; }
.gg-tz-note { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--al-mute); }
.gg-tz-note .zh { display: block; }
.al-lab.gg-tz-lab b { font-variant-numeric: tabular-nums; }
.al-lab.gg-tz-lab.is-night { background: rgba(20,30,70,.85); }
.al-lab.gg-tz-sun { color: #ffe3a3; border-color: rgba(255,211,110,.6); background: rgba(40,28,6,.75); }
.al-lab.gg-tz-dl { color: #ffb4b4; border-color: rgba(255,90,90,.6); }
.al-lg-term i { border-color: #ffd36e; background: #ffd36e; height: 3px; border-radius: 2px; }
.al-lg-dl i { border-color: #ff5a5a; background: #ff5a5a; height: 3px; border-radius: 2px; }
.al-lg-band i { border-color: #ffd36e; background: linear-gradient(90deg, rgba(255,211,110,.5) 50%, rgba(111,224,255,.4) 50%); }
.al-lg-city i { border-color: #fff; background: #fff; border-radius: 50%; width: 10px; height: 10px; margin: 0 4px; }
.gg-lab.al-nogl .gg-tz-play, .gg-lab.al-nogl .gg-tz-seasons { display: none; }
@media (max-width: 620px) { .gg-tz-cities li { grid-template-columns: minmax(0, 1fr) 1.3rem 4.3rem 4.2rem 2.4rem; font-size: .7rem; } }
/* 那裡幾點？ */
.gg-ck-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; align-items: stretch; margin-top: 1rem; }
.gg-ck-box { padding: .8rem 1rem; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(160,180,230,.25); display: grid; gap: .25rem; }
.gg-ck-k { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ffd36e; }
.gg-ck-box b { font-family: var(--serif); font-size: 1.35rem; color: #fff; }
.gg-ck-box b .zh { display: block; font-family: var(--zh); font-size: .95rem; font-weight: 600; color: #b9c8e6; }
.gg-ck-arrow { align-self: center; font-size: 1.6rem; color: #ffd36e; }
.gg-ck-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
.gg-ck-opt { padding: .8rem .6rem; }
@media (max-width: 620px) { .gg-ck-pair { grid-template-columns: minmax(0, 1fr); } .gg-ck-arrow { transform: rotate(90deg); justify-self: center; } }
/* 打電話前先算一算 */
.gg-call { grid-template-columns: minmax(0, 1fr) 340px; }
.gg-cl-clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.4rem; background: #0a1122; align-items: start; }
.gg-cl-clocks figure { margin: 0; display: grid; gap: .5rem; justify-items: center; text-align: center; color: #e8edf7; }
.gg-cl-clocks canvas { width: min(100%, 220px); aspect-ratio: 1; }
.gg-cl-clocks figcaption b { display: block; font-size: 1rem; }
.gg-cl-clocks figcaption b .zh { font-family: var(--zh); font-weight: 600; color: #ffd36e; margin-left: .3rem; }
.gg-cl-clocks figcaption span { font-size: .86rem; color: #cfd8ee; }
.gg-cl-clocks figcaption span .zh { display: block; color: #9fb0cf; }
.gg-cl-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.gg-cl-cities button { padding: .4rem .3rem; border-radius: 11px; border: 1px solid rgba(160,180,230,.25); background: rgba(255,255,255,.03); color: #e8edf7; font-family: var(--sans); font-size: .74rem; cursor: pointer; }
.gg-cl-cities button b { display: block; font-weight: 800; }
.gg-cl-cities button small { display: block; font-family: var(--zh); color: #9fb0cf; }
.gg-cl-cities button[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); box-shadow: 0 0 0 1px #ffd36e inset; }
@media (max-width: 900px) { .gg-call { grid-template-columns: minmax(0, 1fr); } }

/* ── 第六課：大洲、大洋（geo-continents.js、bars2d.js、count2d.js；前綴 gg-cn- / gg-br-） ── */
.gg-cn-count { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gg-cn-count p { margin: 0; padding: .6rem .7rem; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(160,180,230,.22); display: grid; gap: .2rem; }
.gg-cn-count b { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: #ffd36e; }
.gg-cn-count span { font-size: .74rem; font-weight: 700; color: #e8edf7; line-height: 1.35; }
.gg-cn-count .zh { display: block; font-family: var(--zh); font-weight: 600; color: var(--al-mute); }
.gg-cn-pick { min-height: 8.6rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(255,211,110,.07); border: 1px solid rgba(255,211,110,.25); }
.gg-cn-pick p { margin: 0; }
.gg-cn-pk { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ffd36e; }
.gg-cn-pn { margin-top: .3rem !important; font-family: var(--serif); font-size: 1.35rem; color: #fff; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.gg-cn-pn i { width: 14px; height: 14px; border-radius: 4px; align-self: center; box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset; }
.gg-cn-pn .zh { font-family: var(--zh); font-size: 1rem; font-weight: 600; color: #b9c8e6; }
.gg-cn-pa { margin-top: .35rem !important; font-size: .8rem; color: #e8edf7; }
.gg-cn-pa .zh, .gg-cn-pnote .zh { display: block; font-family: var(--zh); color: var(--al-mute); }
.gg-cn-pnote { margin-top: .45rem !important; font-size: .76rem; line-height: 1.5; color: #ffe3a3; }
.gg-cn-clear { justify-self: start; font-size: .76rem; padding: .35rem .8rem; }
.gg-cn-rowk { margin: .7rem 0 .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--al-mute); }
.gg-cn-rowk:first-child { margin-top: 0; }
.gg-ct-ints.gg-cn-schemes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al-lab.gg-cn-tag { font-weight: 800; }
.al-lab.gg-cn-tag-o { color: #cfe6ff; background: rgba(8,30,70,.72); border-color: rgba(111,180,255,.45); font-style: italic; }
.al-lab.gg-cn-tag.is-sel { color: #2b2118; background: #ffd36e; border-color: #ffd36e; }
.al-lab.gg-cn-tag.is-sel i { color: #5c4320; }
.al-lg-cont i { border: 0; background: linear-gradient(90deg, #e8a33d 0 25%, #7a6fd6 0 50%, #d9734e 0 75%, #4fa36a 0); }
.al-lg-ocean i { border: 0; background: linear-gradient(90deg, #1f5fa8 0 33%, #2d7fc4 0 66%, #1a6d8f 0); }
.al-lg-gray i { border: 0; background: #78808c; }
.gg-lab.al-nogl .gg-cn-pick, .gg-lab.al-nogl .gg-cn-clear { display: none; }
@media (max-width: 620px) { .gg-ct-ints.gg-cn-schemes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gg-bars { display: block; padding: 1.2rem 1.3rem 1.1rem; }
.gg-ct-ints.gg-br-tabs { grid-template-columns: repeat(2, minmax(0, 12rem)); margin-bottom: .9rem; }
.gg-br-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.gg-br-list button { width: 100%; display: grid; grid-template-columns: 11rem minmax(0, 1fr) 6.2rem; align-items: center; gap: .7rem; padding: .4rem .55rem; border-radius: 11px; border: 1px solid transparent; background: rgba(255,255,255,.03); color: #e8edf7; font-family: var(--sans); text-align: left; cursor: pointer; }
.gg-br-list button:hover, .gg-br-list button[aria-pressed="true"] { border-color: rgba(255,211,110,.6); background: rgba(255,211,110,.08); }
.gg-br-n { font-weight: 800; font-size: .84rem; line-height: 1.2; }
.gg-br-n small, .gg-br-v small { display: block; font-family: var(--zh); font-weight: 600; font-size: .72rem; color: #9fb0cf; }
.gg-br-bar { height: 18px; border-radius: 9px; background: rgba(255,255,255,.06); overflow: hidden; }
.gg-br-bar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 9px; transform-origin: left; animation: gg-br-grow .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gg-br-grow { from { transform: scaleX(0); } }
.gg-br-v { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; font-size: .95rem; }
.gg-br-v small { font-family: var(--sans); font-size: .62rem; }
.gg-br-out { margin-top: .9rem; min-height: 3.4em; }
.gg-br-out b { color: #ffd36e; }
.gg-br-src { margin: .6rem 0 0; font-size: .74rem; line-height: 1.55; color: #9fb0cf; }
.gg-br-src .zh { display: block; }
@media (max-width: 620px) {
  .gg-br-list button { grid-template-columns: minmax(0, 1fr) 4.6rem; }
  .gg-br-bar { grid-column: 1 / -1; grid-row: 2; }
  .gg-ct-ints.gg-br-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gg-cn-scheme { margin: .9rem 0 0; padding: .55rem .8rem; border-radius: 11px; background: rgba(255,211,110,.1); border-left: 3px solid #ffd36e; font-size: .84rem; font-weight: 700; color: #fff; }
.gg-cn-scheme:empty { display: none; }
.gg-cn-scheme .zh { display: block; font-weight: 600; color: #b9c8e6; }
.gg-cn-mapw { margin-top: .7rem; max-width: 520px; border-radius: 12px; overflow: hidden; }
.gg-cn-mapw[hidden] { display: none; }
.gg-cn-map { display: block; width: 100%; aspect-ratio: 2 / 1; }
.gg-count .gg-ft-lab i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.gg-br-list[hidden] { display: none; }
.gg-br-unit { margin: 0 0 .5rem; font-size: .74rem; color: #9fb0cf; }
.gg-br-unit .zh { margin-left: .4rem; }