/* The design follows the houses that sell quietly (Hermès, Cartier, Patek Philippe, Loro Piana, the Geneva private banks) and apple.com:
   white paper, very few things on each screen, wide margins, hairlines instead of boxes. Large type is ultra-thin PingFang
   (clear because it is large, quiet because it is thin); small type is regular.
   Colour has one meaning: anything that is Darwin is a low-saturation blue; anything Darwin is compared with is grey.
   設計照「安靜地賣東西」的品牌（Hermès、Cartier、Patek Philippe、Loro Piana、日內瓦私人銀行）與 apple.com：白紙、每一屏只放很少的東西、
   邊界寬、用細線不用框。大字一律用極細的蘋方（字大所以清楚，字細所以安靜）；小字用一般粗細。
   顏色只有一個意思：達爾文是低飽和度的藍；拿來和達爾文比較的，一律是灰。 */
:root {
  --paper: #FFFFFF; --ink: #1E2227; --ink2: #50565D; --mute: #6B7076; --faint: #8A8F95; --hair: #E4E6E8;
  --navy: #6084B8; --blue: #6084B8; --blue2: #A0B9DC; --blue-soft: #CDD8E9; --blue-mist: #E9EEF6;
  /* V7: the manager overruled V5-02's navy substitution -- "達爾文用 LOGO 藍！所有達爾文都是 LOGO 藍！" (Darwin uses the logo blue! ALL of Darwin is the logo blue!). V5-02 had
     moved --navy to a much darker, separately-computed shade (#10233D) to fight a colour-contrast problem; the manager saw that as "you changed it to dark grey" and rejected it
     outright. --navy is now simply an alias for --blue (both #6084B8, the logo's exact colour, from IR/darwin_golden_blue_centerline.svg) so every one of the ~38 call sites that
     read var(--navy)/C.navy (row labels, bar fills, line strokes, scatter dots, big numbers) renders the one true logo blue without rewriting each call site individually. The 2x
     thickness fix (V5-03) stays -- that was a separate, still-valid instruction and it is now the main thing carrying Darwin's visual weight against the grey comparisons.
     V7：管理人否決了 V5-02 把 navy 改深的做法——「你怎麼改成深灰？」——現在 --navy 就是 --blue 的別名，兩個都是 LOGO 的那個藍，不再有第二種更深的「達爾文藍」。粗細兩倍的修正保留。 */
  --g1: #3E4247; --g2: #6F7378; --g3: #9B9FA4; --g4: #C4C7CB; --g5: #E2E4E6;
  --display: "PingFang TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Helvetica Neue", "Noto Sans TC", Arial, sans-serif;
  --zh: "PingFang TC", "Noto Sans TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(78px, calc(env(safe-area-inset-left, 0px) + 74px));   /* S 11-03: a clear margin between the navigation and the text / 導航條與本文之間要有留白 */ padding-right: max(18px, env(safe-area-inset-right, 0px)); padding-top: 0; padding-bottom: 140px; }
.zh { display: none; font-family: var(--zh); font-weight: 400; }
body.show-zh .zh { display: block; }
body.show-zh span.zh { display: block; }   /* Chinese always sits on its own line, beneath the English / 中文永遠在英文下方另起一行 */
.gnav { position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 30; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.gin { max-width: 980px; height: 100%; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; }
.gb { display: inline-flex; align-items: center; min-height: 44px; }
.gb img { width: 22px; height: 22px; }
.lang { display: flex; gap: 0; }
.lang button, .lang label.lg { font: 400 13px/1 var(--sans); letter-spacing: 0; color: var(--ink2); background: none; border: 0; padding: 0 12px; min-height: 44px; cursor: pointer; transition: color .2s; }
.lang button:hover, .lang label.lg:hover { color: var(--ink); }
.lang button[aria-pressed="true"], .lang label.lg[aria-pressed="true"], #lgzh:checked ~ .gnav label[for="lgzh"], #lgen:checked ~ .gnav label[for="lgen"] { color: var(--ink); font-weight: 600; }
.lang label.lg { display: inline-flex; align-items: center; }
[hidden] { display: none !important; }
/* S 11-03: the page works with scripts switched off (iPhone, WhatsApp, LINE previews). Chinese is the default; the language switch is two radio buttons and CSS. / 預覽不跑程式也完整；中文是預設；語言切換只靠兩個 radio 與 CSS */
.lgin { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#lgen:checked ~ .wrap .zh, #lgen:checked ~ .wrap span.zh, #lgen:checked ~ .wrap .kv i { display: none !important; }
.f-en { display: none; } .f-zh { display: block; }
#lgen:checked ~ .wrap .f-en { display: block; } #lgen:checked ~ .wrap .f-zh { display: none; }
.fig > .pre svg { width: 100%; height: auto; max-width: 640px; display: block; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.eyebrow { font: 500 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--mute); }
/* cover: centred, one idea per screen */
.cover { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; gap: 26px; padding-top: 112px; padding-bottom: 64px; }
.cover img { width: 46px; height: 46px; }
.cover h1 { font: 200 clamp(31px, 7.8vw, 50px)/1.24 var(--display); letter-spacing: .005em; margin: 6px 0 0; max-width: 15em; text-wrap: balance; color: var(--ink); }
.cover .h1z { font: 200 clamp(22px, 5.6vw, 30px)/1.5 var(--zh); color: var(--ink2); margin-top: -12px; letter-spacing: .02em; }
.cover .formula { font: 400 clamp(15px, 4vw, 19px)/1.5 var(--sans); color: var(--blue); letter-spacing: .02em; margin-top: 2px; text-wrap: balance; max-width: 22em; }
.cover .formula-z { font: 400 clamp(15px, 4vw, 19px)/1.5 var(--zh); color: var(--blue); letter-spacing: .08em; margin-top: -18px; }
.lede { font: 400 clamp(15.5px, 4vw, 17px)/1.75 var(--sans); color: var(--ink2); margin: 4px 0 0; max-width: 31em; }
.lede.zh { font: 400 clamp(14.5px, 3.8vw, 15.5px)/1.85 var(--zh); margin-top: -10px; }
.names { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 34em; margin-top: 4px; }
.names .nrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(14px, 4vw, 26px); }   /* M03: six rows of two names, in the manager's order / 六行、每行兩個 */
.names span { font: 200 clamp(13px, 4vw, 26px)/1.3 var(--display); color: var(--ink); white-space: nowrap; }
.names sup { font: 500 11px/0 var(--sans); letter-spacing: .1em; color: var(--faint); margin-left: 3px; vertical-align: 1.1em; }
.names .zh { font: 400 12.5px/1.5 var(--zh); color: var(--mute); text-align: center; }
.names > div { display: grid; justify-items: center; }
@media (max-width: 340px) { .names span { font-size: 12px; } .names .nrow { column-gap: 8px; } .names sup { font-size: 9px; margin-left: 2px; } }   /* the smallest phones keep each pair on one line / 最小的手機也每對一行 */
.rule { width: 36px; height: 1px; background: var(--g4); margin: 8px auto; }
.trio { width: 100%; display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 26px; }
@media (min-width: 720px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .trio > div + div { border-left: 1px solid var(--hair); } .trio .v { font-size: clamp(36px, 6.2vw, 60px); } }   /* S 11-03: three columns share the width, so the number must shrink with it or a wide value like "−8.3%" bleeds across the divider into the next column / 三欄分走寬度，數字字級要跟著欄寬縮，不然「−8.3%」這種較寬的數字會越過分隔線 */
.trio > div { display: grid; gap: 8px; justify-items: center; text-align: center; padding-left: 12px; padding-right: 12px; }
.trio .v { font: 100 clamp(54px, 15vw, 72px)/1 var(--display); color: var(--navy); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.trio .k { font: 400 14.5px/1.5 var(--sans); color: var(--ink); max-width: 15em; }
.idxcap { max-width: 34em; margin: 22px auto 0; font: 400 14.5px/1.6 var(--sans); color: var(--mute); text-align: center; }
.idxcap.zh { font: 400 13.5px/1.7 var(--zh); margin-top: 4px; }
.trio .zh { font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
.triob { width: 100%; max-width: 220px; display: grid; gap: 7px; margin-top: 10px; }
.triob .tr { display: grid; grid-template-columns: 70px 1fr 48px; align-items: center; gap: 8px; }
.triob .tn { font: 400 12px/1.3 var(--sans); color: var(--mute); text-align: right; }
.triob .tr.me .tn { color: var(--navy); font-weight: 500; }
.triob .tn .zh { font-size: 12px; color: var(--mute); }
.triob .tb { height: 4px; border-radius: 2px; background: var(--g5); overflow: hidden; }
.triob .tb i { display: block; height: 100%; border-radius: 2px; }
.triob .tv { font: 400 12px/1 var(--sans); color: var(--mute); font-variant-numeric: lining-nums tabular-nums; text-align: left; white-space: nowrap; }
.triob .tr.me .tv { color: var(--navy); font-weight: 500; }
/* chapters: centred title pages */
.chap { padding-top: 176px; padding-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 16px; }
.chap .ct { font: 500 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--blue); }
@media (max-width: 520px) { .chap .ct { letter-spacing: .14em; font-size: 11.5px; } }
.chap > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.chap h2, .chap p, .chap .h2z { width: 100%; }
.chap .ct .zh { letter-spacing: .2em; text-transform: none; margin-top: 6px; font-size: 13px; }
.chap .rule { margin-bottom: 18px; }
.chap h2 { font: 200 clamp(30px, 7.6vw, 46px)/1.22 var(--display); margin: 0; letter-spacing: .005em; max-width: 14em; text-wrap: balance; }
.chap .h2z { font: 200 clamp(21px, 5.4vw, 27px)/1.5 var(--zh); color: var(--ink2); letter-spacing: .02em; margin-top: -6px; }
.chap p { font: 400 clamp(15.5px, 4vw, 17px)/1.75 var(--sans); color: var(--ink2); margin: 0; max-width: 30em; }
.chap p.zh { font: 400 clamp(14.5px, 3.8vw, 15.5px)/1.85 var(--zh); margin-top: -8px; }
/* sections: the question each part of a chapter answers; a hairline above, the number in blue / 節：每一段回答的問題；上方一條細線，編號用藍 */
.sect { padding-top: 120px; padding-bottom: 0; display: grid; gap: 8px; border-top: 0; }
.sect .sn { font: 500 12px/1 var(--sans); letter-spacing: .3em; color: var(--blue); padding-top: 20px; border-top: 1px solid var(--hair); }
.sect h3 { font: 200 clamp(22px, 5.6vw, 28px)/1.35 var(--display); margin: 6px 0 0; color: var(--navy); letter-spacing: .004em; }
.sect .zh { font: 200 clamp(18px, 4.6vw, 21px)/1.55 var(--zh); color: var(--ink2); }
.sect + .mod { padding-top: 56px; }
.duel { display: grid; gap: 12px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--hair); }
.duel:first-of-type { border-top: 0; }
.dq { font: 400 15.5px/1.45 var(--sans); color: var(--ink); }
.dq .zh { font-size: 14px; color: var(--ink2); margin-top: 2px; }
.last { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; text-align: center; }
.last li { font: 200 clamp(20px, 5.2vw, 26px)/1.4 var(--display); color: var(--navy); }
.last li .zh { font: 300 clamp(16px, 4.2vw, 19px)/1.6 var(--zh); color: var(--ink2); }
/* modules: left-aligned, like a private-bank report */
.mod { padding-top: 128px; padding-bottom: 0; display: grid; gap: 14px; min-width: 0; }
@media (min-width: 900px) { .mod { padding-top: 160px; padding-bottom: 0; } }
.mno { font: 500 12px/1 var(--sans); letter-spacing: .3em; color: var(--blue); }
.mt { font: 200 clamp(25px, 6.2vw, 34px)/1.34 var(--display); margin: 4px 0 0; letter-spacing: .004em; text-wrap: balance; color: var(--ink); max-width: 24em; }
.mtz { font: 200 clamp(20px, 5vw, 24px)/1.55 var(--zh); color: var(--ink2); letter-spacing: .01em; }
.ms { font: 400 clamp(15px, 3.9vw, 16px)/1.72 var(--sans); color: var(--ink2); margin: 4px 0 0; max-width: 35em; }
.ms.zh { font: 400 clamp(14px, 3.7vw, 15px)/1.85 var(--zh); margin-top: 0; }
.fig { width: 100%; min-width: 0; margin-top: 30px; }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.toc { padding-top: 72px; padding-bottom: 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; width: 100%; max-width: 30em; }
.toc li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--hair); padding-bottom: 12px; text-align: left; }
.toc a { font: 200 clamp(19px, 4.8vw, 23px)/1.35 var(--display); color: var(--ink); text-decoration: none; }
.toc a .zh { font-size: 14px; color: var(--mute); }
.toc .tn { font: 500 12px/1 var(--sans); letter-spacing: .14em; color: var(--blue); white-space: nowrap; }
.fw { display: none; font: 500 12px/1.5 var(--sans); letter-spacing: .04em; color: var(--blue); border: 1px dashed var(--blue-soft); border-radius: 4px; padding: 4px 9px; margin: 2px 0 6px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
body.framework .fw { display: block; }
.fwbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: rgba(232,237,242,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--navy); font: 500 12px/1.5 var(--sans); padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); text-align: center; border-top: 1px solid var(--blue-soft); }
body.framework .fwbar { display: block; }
/* E02: right-side chapter/section navigation rail (wide screens) and a top progress bar + chapter chip (narrow screens) / 寬螢幕右側章節導航，窄螢幕頂端進度條與章節徽章 */
.rail { position: fixed; top: 64px; left: 22px; width: 226px; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: none; display: none; flex-direction: column; gap: 14px; padding: 10px 8px 10px 6px; z-index: 15; }   /* S 11-03: padding so the circles are never clipped; starts below the 48 px bar / 內距讓圈圈不被切；從 48 px 頂欄之下開始 */
@media (max-height: 760px) { .rail { gap: 8px; } .rail .rc ul { gap: 2px; } }
.rail::-webkit-scrollbar { display: none; }
.rail.show { display: flex; }
.rail .rc { display: grid; gap: 5px; }
.rail .rc > a { font: 500 11.5px/1.35 var(--sans); letter-spacing: .02em; color: var(--faint); text-decoration: none; }
.rail .rc.cur > a { color: var(--navy); }
.rail .rc > a .zh { font-size: 10px; color: inherit; opacity: .8; }
.rail .rc ul { list-style: none; margin: 2px 0 0; padding: 0 0 0 10px; display: none; gap: 4px; border-left: 1px solid var(--hair); }
.rail .rc.cur ul { display: grid; }   /* only the chapter you are in shows its sections, so all eight chapters always fit / 只有目前這章展開小節，八章永遠放得下 */
.rail .rc ul li a { font: 400 11px/1.3 var(--sans); color: var(--faint); text-decoration: none; display: block; }
.rail .rc ul li a .zh { font-size: 9.5px; }
.rail .rc ul li.cur a { color: var(--blue); font-weight: 500; }
.pbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--hair); z-index: 21; }
.pbar i { display: block; height: 100%; background: var(--blue2); width: 0%; }
.chch { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); left: max(14px, env(safe-area-inset-left, 0px)); z-index: 20; font: 500 11px/1 var(--sans); letter-spacing: .1em; color: var(--mute);
        background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--hair); border-radius: 999px; padding: 9px 13px; }
.chch b { color: var(--navy); font-weight: 500; }
.adv { display: none; margin: 34px 0 0; padding: 2px 0 2px 18px; border-left: 1px solid var(--blue-soft); max-width: 44em; }
.adv p { font: 400 13px/1.7 var(--sans); color: var(--ink2); margin: 0; }
.adv p.zh { font: 400 12.5px/1.8 var(--zh); margin-top: 4px; }
.adv .tag { font: 500 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--blue); margin-right: 10px; }
@media (min-width: 900px) { .adv { display: block; } }
.note { font: 400 13px/1.65 var(--sans); color: var(--mute); margin: 18px 0 0; }
.note .zh { font-size: 12.5px; margin-top: 2px; }
/* rows: one item per row; on a phone the name sits above its bar, on a wide screen beside it */
.rows { display: grid; gap: 22px; padding-bottom: 14px; }   /* S 11-03 (X12): room for the value under the last bar, so a frame never cuts it / 最後一根柱子下的數字留空間，不被裁掉 */
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 720px) { .row { grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); align-items: center; column-gap: 28px; } }
.rl { font: 400 15px/1.35 var(--sans); color: var(--ink); min-width: 0; }
.rl sup { font: 500 11px/0 var(--sans); letter-spacing: .1em; color: var(--faint); margin-left: 3px; vertical-align: 0.75em; }
.rl .s { display: block; font: 400 12.5px/1.4 var(--sans); color: var(--mute); margin-top: 2px; }
.rl .zh { font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.row.me .rl { color: var(--navy); font-weight: 500; }
.rb { display: grid; gap: 5px; min-width: 0; }
.bar { position: relative; height: 24px; }
.bar .fill { position: absolute; top: 10px; height: 4px; border-radius: 2px; }
.bar .fill.me { top: 8px; height: 8px; border-radius: 3px; }   /* V5-03: Darwin's bar is twice the comparison bar's thickness, keyed to the bar's own me flag (not the row's -- asset_row() sets me per-bar only) / 達爾文的柱子是對照組的兩倍粗，跟著柱子自己的 me 標記，不跟著列（asset_row() 只在柱子上標 me） */
.bar .zero { position: absolute; top: 3px; bottom: 3px; width: 1px; background: var(--g4); }
.bar .val { position: absolute; top: 0; font: 300 18px/1.2 var(--display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.bar .val small { font: 400 12px/1 var(--sans); color: var(--mute); margin-left: 6px; letter-spacing: .02em; }
.bar.tall { height: 42px; }
.bar .val .vz { display: block; font: 400 12.5px/1.35 var(--zh); color: var(--mute); }
.forest { display: grid; gap: 9px; }
.fr { display: grid; gap: 3px; min-width: 0; }
.ft { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.fn { font: 400 13.5px/1.3 var(--sans); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn sup { font: 500 11px/0 var(--sans); letter-spacing: .1em; color: var(--faint); margin-left: 3px; vertical-align: 0.7em; }
.fv { font: 300 13.5px/1.3 var(--display); color: var(--g1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr .fz { font-size: 12px; color: var(--mute); }
.fb { position: relative; height: 4px; }
.fb .fill { position: absolute; top: 0; height: 3px; border-radius: 2px; }
.fb .zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--g4); }
.fr.me .fn, .fr.me .fv { color: var(--navy); font-weight: 500; }
.fr.me { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); }
.marks { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; font: 400 13.5px/1.5 var(--sans); color: var(--ink2); }
.marks li::marker { color: var(--navy); font-weight: 500; }
.marks .zh { font-size: 12.5px; color: var(--mute); }
.mixes { display: grid; gap: 18px; margin-top: 26px; }
.mix { display: grid; gap: 6px; }
.mk { font: 400 14px/1.4 var(--sans); color: var(--ink); }
.mk .zh { font-size: 13px; color: var(--ink2); }
.mb { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--hair); }
.mb span { display: block; height: 100%; }
.ml { font: 300 13px/1.5 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.ml .zh { font: 400 12.5px/1.6 var(--zh); color: var(--mute); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 400 13px/1.4 var(--sans); color: var(--ink2); margin: 0 0 20px; }
.legend > span { display: inline-grid; }
.legend .zh { padding-left: 26px; font-size: 12.5px; color: var(--mute); }
.legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: 3px; }
/* versus: two figures side by side, grey on the left, Darwin in blue on the right */
.vs { display: grid; border-top: 1px solid var(--g4); }
.vsr { display: grid; gap: 12px; padding-top: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--hair); }
.vsr .k { font: 400 14.5px/1.45 var(--sans); color: var(--ink); }
.vsr .k .zh { font-size: 13.5px; color: var(--ink2); }
.vsg { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vsg div { display: grid; gap: 6px; min-width: 0; }
.vsg small { font: 500 12px/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.vsg b { font: 100 clamp(40px, 11vw, 54px)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; color: var(--g2); }
.vsg small.zh { letter-spacing: .08em; text-transform: none; margin-top: -2px; }
.vsg .me small { color: var(--blue); }
.vsg .u { font: 400 12.5px/1.45 var(--sans); color: var(--mute); }
.vsg .u .zh { font-size: 12px; }
.pairs .vsg b { color: var(--navy); }
.pairs .vsr.hi .k { color: var(--navy); font-weight: 500; }
.vsg .me b { color: var(--navy); }
/* roster: names large enough to read, the symbol small at the top right, like a trademark sign */
.roster { display: grid; gap: 52px; }
.rg h3 { font: 500 12px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin: 0; }   /* M06: industry names are not Darwin, so grey / 產業名不是達爾文，用灰色 */
.rg .zh { font-size: 13.5px; color: var(--ink2); margin-top: 4px; }
.rgl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-top: 20px; }
@media (min-width: 720px) { .rgl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rn b { display: block; font: 200 clamp(20px, 5.4vw, 26px)/1.3 var(--display); text-wrap: balance; color: var(--ink); overflow-wrap: anywhere; }
.rn b sup { font: 500 11px/0 var(--sans); letter-spacing: .1em; color: var(--faint); margin-left: 3px; vertical-align: 1.1em; white-space: nowrap; }
.rn .zh { font-size: 13px; color: var(--mute); margin-top: 4px; }
.rn .d { font: 400 13px/1.5 var(--sans); color: var(--ink2); margin: 6px 0 0; }
.rn p.zh { font: 400 12.5px/1.6 var(--zh); color: var(--mute); margin: 2px 0 0; }
/* cards and lists */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--g4); }   /* V16: a card can never be wider than the screen / 卡片永遠不比螢幕寬 */
.card > * { min-width: 0; overflow-wrap: break-word; }
.card { padding: 30px 0 32px; display: grid; gap: 10px; border-bottom: 1px solid var(--hair); }
.card .cn { font: 500 12px/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--blue); }
.card h3 { font: 200 clamp(23px, 5.8vw, 28px)/1.35 var(--display); margin: 2px 0 0; }
.card .zh { font-size: 14.5px; color: var(--ink2); line-height: 1.8; }
.card p { font: 400 15.5px/1.72 var(--sans); color: var(--ink2); margin: 0; max-width: 34em; }
.bul { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--g4); }
.bul li { padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--hair); font: 400 15.5px/1.7 var(--sans); color: var(--ink); }
.bul li .zh { font-size: 14.5px; color: var(--ink2); margin-top: 6px; line-height: 1.85; }
/* closing: centred */
.close { padding-top: 200px; padding-bottom: 0; display: grid; justify-items: center; text-align: center; gap: 22px; }
.close h2 { font: 200 clamp(30px, 7.6vw, 46px)/1.24 var(--display); margin: 0; max-width: 14em; text-wrap: balance; }
.close .close-n { font: 300 clamp(17px, 4.4vw, 21px)/1.6 var(--sans); color: var(--blue); margin: 0; max-width: 30em; }   /* S 11-03 (S21): three numbers to remember at the end / 結尾留下三個記得住的數字 */
.close .close-n.zh { font-size: clamp(15px, 4vw, 18px); color: var(--ink2); margin-top: -12px; }
.close .h2z { font: 200 clamp(21px, 5.4vw, 27px)/1.5 var(--zh); color: var(--ink2); margin-top: -8px; }
.close p { font: 400 clamp(15.5px, 4vw, 17px)/1.75 var(--sans); color: var(--ink2); margin: 0; max-width: 30em; }
.close p.zh { font: 400 clamp(14.5px, 3.8vw, 15.5px)/1.85 var(--zh); margin-top: -8px; }
/* appendix for advisers */
.appx { padding-top: 200px; padding-bottom: 0; display: grid; gap: 18px; }
.appx h2 { font: 200 clamp(28px, 7vw, 38px)/1.25 var(--display); margin: 0; }
.appx .h2z { font: 200 21px/1.5 var(--zh); color: var(--ink2); }
.appx > p { font: 400 15px/1.75 var(--sans); color: var(--ink2); margin: 0; max-width: 40em; }
.appx > p.zh { font: 400 14px/1.85 var(--zh); }
.ax { border-top: 1px solid var(--hair); padding-top: 30px; padding-bottom: 30px; display: grid; gap: 12px; }
.ax h3 { font: 300 20px/1.35 var(--display); margin: 0; }
.ax .zh { font-size: 13.5px; color: var(--ink2); }
.kv div { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); gap: 2px; }
@media (min-width: 720px) { .kv div { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); column-gap: 22px; } }
.kv b { font: 500 13.5px/1.55 var(--sans); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.kv i { display: none; font: normal 400 13px/1.8 var(--zh); color: var(--ink2); }
@media (min-width: 700px) { .fig.pre > .pre { max-width: 640px; margin-left: auto; margin-right: auto; } }   /* V13: with scripts off, the phone-drawn charts sit centred on a wide screen / 不跑程式時，寬螢幕上置中 */
.facts { margin: 30px 0 6px; text-align: left; border-top: 1px solid var(--hair); }   /* AI02: facts at a glance, read first by people and by AI tools / 重點事實 */
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 720px) { .facts > div { grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 20px; } }
.facts dt { font: 500 12.5px/1.6 var(--sans); letter-spacing: .04em; color: var(--ink); }
.facts dd { margin: 0; font: 400 13.5px/1.7 var(--sans); color: var(--ink2); }
.facts .zh { display: block; font-family: var(--zh); }
.phonenote { font: 400 12.5px/1.6 var(--sans); color: var(--ink2); margin: 0 0 14px; } .phonenote .zh { display: block; font-family: var(--zh); }
.axg { font: 400 13px/1.8 var(--sans); color: var(--ink2); }
p.axg.zh { font-family: var(--zh); }
.kvh { font: 500 12px/1.5 var(--sans); letter-spacing: .06em; color: var(--ink); padding: 26px 0 6px; border-bottom: 1px solid var(--ink); }   /* A01: industry heading inside the one asset table / 資產總表裡的產業標題 */
.kvh .zh { display: block; font: 400 12.5px/1.6 var(--zh); letter-spacing: 0; color: var(--ink2); }
body.show-zh .kv i { display: block; }
.kv span { font: 400 13.5px/1.65 var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.ax ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font: 400 13.5px/1.65 var(--sans); color: var(--ink2); }
.foot { padding-top: 64px; padding-bottom: 0; font: 400 12.5px/1.75 var(--sans); color: var(--mute); display: grid; gap: 6px; border-top: 1px solid var(--hair); margin-top: 120px; text-align: center; justify-items: center; }
.foot img { width: 28px; height: 28px; margin-bottom: 12px; }
svg text { font-family: var(--sans); }

/* S 11-03 · apple.com mechanics: three type tiers (phone <= 734, tablet 735-1068, desktop >= 1069, large >= 1440), 17 px body on every screen, line length about 66 characters,
   headlines that grow with the screen, a wider column on desktop, smooth anchors. Colours, weights and structure unchanged.
   S 11-03 · 比照 apple.com：三段字級（手機 <= 734、平板 735-1068、桌面 >= 1069、大螢幕 >= 1440），內文各螢幕都是 17 px，每行約 66 字，標題隨螢幕放大，桌面欄位加寬，錨點平滑捲動。顏色、字重、結構不變。 */
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.ms, .lede, .chap p { font-size: 17px; line-height: 1.6; }
.ms.zh, .lede.zh, .chap p.zh { font-size: 15.5px; line-height: 1.8; }
.mt { font-size: 28px; }
.mtz { font-size: 21px; }
.adv p { font-size: 15px; } .adv p.zh { font-size: 14px; }
.note { font-size: 14.5px; }
.dq { font-size: 16.5px; }
.sect h3 { font-size: 26px; } .sect .zh { font-size: 19px; }
.chap h2 { font-size: clamp(24px, 7vw, 34px); } .chap .h2z { font-size: 23px; }
.cover h1 { font-size: 34px; } .cover .h1z { font-size: 23px; }
@media (min-width: 735px) {
  .ms, .lede, .chap p { font-size: 19px; line-height: 1.55; }
  .ms.zh, .lede.zh, .chap p.zh { font-size: 16.5px; }
  .mt { font-size: 40px; max-width: 22em; } .mtz { font-size: 26px; }
  .sect h3 { font-size: 34px; } .sect .zh { font-size: 22px; }
  .chap h2 { font-size: 54px; } .chap .h2z { font-size: 30px; }
  .cover h1 { font-size: 56px; } .cover .h1z { font-size: 30px; }
  .adv p { font-size: 15.5px; }
}
@media (min-width: 1069px) {
  .wrap { max-width: 880px; }
  .ms, .lede, .chap p { font-size: 21px; line-height: 1.5; max-width: 32em; }
  .ms.zh, .lede.zh, .chap p.zh { font-size: 17.5px; }
  .mt { font-size: 48px; line-height: 1.25; max-width: 21em; } .mtz { font-size: 29px; }
  .sect h3 { font-size: 40px; } .sect .zh { font-size: 24px; }
  .chap h2 { font-size: 68px; line-height: 1.15; max-width: 12em; } .chap .h2z { font-size: 34px; }
  .cover h1 { font-size: 72px; line-height: 1.15; max-width: 13em; } .cover .h1z { font-size: 34px; }
  .adv p { font-size: 16px; }
}
@media (min-width: 1440px) {
  .mt { font-size: 52px; } .chap h2 { font-size: 76px; } .cover h1 { font-size: 80px; }
}

/* S 11-03 · the left-hand navigation runs down the whole page on every screen (manager: 「全篇要有沿著左邊往下走的清楚導航條」).
   Wide screens: the rail on the left with a numbered marker and a connecting line for each chapter. Narrower screens (and phones): a slim "spine" in the left margin,
   one numbered marker per chapter at its true place in the whole page, a blue line filled up to where you are.
   S 11-03 · 左側導航貫穿全篇、每種螢幕都有：寬螢幕＝左側導航，每章一個編號圓點、中間一條連線；窄螢幕與手機＝左邊界的細脊柱，每章一個編號圓點放在它在全文裡真正的位置，藍線填到你現在讀到的地方。 */
.rail { padding-left: 0; }
.rail::before { content: ""; position: absolute; left: 16px; top: 20px; bottom: 20px; width: 1px; background: var(--hair); }
.rail .rc { position: relative; padding-left: 36px; }
.rail .rc .rn { position: absolute; left: 0; top: -2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 1.5px solid var(--g4); color: var(--mute); font: 500 10px/18px var(--sans); text-align: center; }
.rail .rc.done .rn { border-color: var(--blue); color: var(--blue); }
.rail .rc.cur .rn { background: var(--blue-mist); border: 2px solid var(--blue); color: var(--blue); font-weight: 700; line-height: 17px; }
.rail .rc.cur > a { font-weight: 600; }
.spine { position: fixed; left: max(4px, env(safe-area-inset-left, 0px)); top: 0; bottom: 0; width: 64px; z-index: 12; pointer-events: none; display: none; }
.spine.show { display: block; }
.spine .sline, .spine .sfill { position: absolute; left: 12px; width: 2px; border-radius: 1px; }
.spine .sline { top: 64px; background: var(--hair); }
.spine .sfill { top: 64px; height: 0; background: var(--blue); }
.spine .sm { position: absolute; left: 0; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #fff; border: 1.5px solid var(--g4); color: var(--mute); font: 500 11.5px/23px var(--sans); text-align: center; text-decoration: none; pointer-events: auto; }
.spine .sm.done { border-color: var(--blue); color: var(--blue); }
.spine .sm.cur { background: var(--blue-mist); border: 2px solid var(--blue); color: var(--blue); font-weight: 700; line-height: 22px; }
.pbar, .chch { display: none !important; }
/* S 11-03: a group of three or more bars gets a hairline above it and room between the bars, so each group reads as one unit / 三根以上柱子的一組：上方一條髮絲線、柱子之間留空，一組讀成一個單位 */
.row.grp { padding-top: 20px; margin-top: 12px; border-top: 1px solid var(--hair); }
.row.grp:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.row.grp .rb { gap: 12px; }
.spine .sl { position: absolute; left: 28px; writing-mode: vertical-rl; font: 500 12px/1.25 var(--sans); letter-spacing: .03em; color: var(--mute); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; }
.spine .sl.zc { left: 42px; display: none; font-family: var(--zh); font-weight: 400; letter-spacing: .1em; }
body.show-zh .spine .sl.zc { display: block; }
#lgen:checked ~ .spine .sl.zc { display: none !important; } #lgzh:checked ~ .spine .sl.zc { display: block; }   /* S 11-03: the static navigation follows the language radio with no script / 靜態導航不靠程式，跟著語言 radio */
.spine .sl.cur { color: var(--blue); font-weight: 700; }
.spine .sm.long { font-size: 10px; letter-spacing: -.04em; }
@media (min-width: 1069px) { .wrap { padding-left: 28px; } }
@media (max-width: 1068px) { .wrap { padding-right: max(22px, env(safe-area-inset-right, 0px)); } }
.subw { display: none; }
@media (min-width: 1069px) { .subn.hasw { display: none; } .subw { display: block; } }
p, li, .dq, .rn p { text-wrap: pretty; } .close p, .chap p, .cover p, .lede { text-wrap: balance; } .nb { white-space: nowrap; }
.struct { display: grid; gap: 0; margin-top: 8px; }
.st-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.st-box { min-width: 0; overflow-wrap: break-word; padding: 14px 6px 16px; background: var(--blue-mist); border: 1px solid var(--blue-soft); border-radius: 10px; text-align: center; }
.st-box h3 { font: 300 clamp(14.5px, 4.2vw, 24px)/1.25 var(--display); color: var(--navy); margin: 0; text-wrap: balance; }
.st-box p { font: 400 13.5px/1.6 var(--sans); color: var(--ink2); margin: 10px 0 0; }
.st-box .zh { font-size: 13px; color: var(--mute); margin-top: 4px; }
@media (max-width: 440px) { .st-box h3 { font-size: 13.5px; font-weight: 400; } } @media (max-width: 380px) { .st-box h3 { font-size: 12.5px; } .st-box h3 + .zh { font-size: 13px; } }
.st-box h3 + .zh { font: 300 clamp(15px, 4vw, 18px)/1.4 var(--zh); color: var(--navy); margin-top: 2px; }
.st-conn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 28px; }
.st-conn i { justify-self: center; width: 1px; background: var(--navy); }
.st-foot { margin-top: 22px; text-align: center; }
.st-foot p { font: 300 clamp(18px, 4.8vw, 24px)/1.4 var(--display); color: var(--navy); margin: 0; letter-spacing: .01em; }
.st-foot .zh { font: 300 clamp(15px, 4vw, 18px)/1.5 var(--zh); color: var(--navy); margin-top: 2px; }
.st-base { padding: 20px 18px 22px; background: var(--navy); border-radius: 10px; text-align: center; color: #fff; }
.st-base h3 { font: 300 clamp(19px, 5.2vw, 26px)/1.25 var(--display); color: #fff; margin: 0; }
.st-base p { font: 400 13.5px/1.6 var(--sans); color: #E4EAF3; margin: 10px auto 0; max-width: 34em; }
.st-base .zh { font-size: 13px; color: #CBD6E6; margin-top: 4px; }
.st-base h3 + .zh { font: 300 clamp(15px, 4vw, 18px)/1.4 var(--zh); color: #fff; margin-top: 2px; }
.story7 { list-style: none; margin: 14px 0 6px; padding: 0; width: 100%; max-width: 30em; display: grid; gap: 12px; text-align: left; }
.story7 a { display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; align-items: baseline; text-decoration: none; color: inherit; }
.story7 .n { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--blue); color: var(--blue); font: 500 12.5px/23px var(--sans); text-align: center; align-self: start; margin-top: 2px; }
.story7 .t { font: 300 clamp(17px, 4.6vw, 21px)/1.4 var(--display); color: var(--ink); }
.story7 .zh { grid-column: 2; font: 300 clamp(14px, 3.8vw, 16px)/1.5 var(--zh); color: var(--ink2); }
.story7 a:hover .t { color: var(--navy); }
#tipbox { position: fixed; display: none; z-index: 60; max-width: min(340px, calc(100vw - 24px)); padding: 10px 13px; background: #fff; border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 8px 28px rgba(40, 50, 70, .14); pointer-events: none; font: 400 13px/1.55 var(--sans); color: var(--ink); white-space: pre-line; }
.fig .live:focus { outline: none; } .fig .live:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 6px; }   /* T03 */
#tipbox .tz { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--hair); font: 400 12.5px/1.65 var(--zh); color: var(--ink2); }
@media print { .spine, .rail, .gnav, .toc { display: none !important; } body { background: #fff; } .wrap { padding-left: 0 !important; } section.mod, .card, figure { break-inside: avoid; page-break-inside: avoid; } h2, h3, .mt, .mtz { break-after: avoid; page-break-after: avoid; } }   /* V11: an exhibit never splits across two printed pages / 一張圖不會被拆到兩頁 */
:root { color-scheme: only light; }   /* V12: forced dark mode (Android, WeChat) must not invert the white paper / 強制深色模式不得反轉白紙 */