/* Philosophy 哲學 — 只載在 /resources/classes/philosophy/ 底下的頁面。class 一律 ph- 前綴。
   版面取向：長文閱讀（襯線英文、窄欄）、中譯可開關、論證與原典用卡片凸顯。 */
:root {
  --ph-night: #14233b;      /* 愛琴海的深藍：思想實驗的舞台 */
  --ph-night-2: #1d3352;
  --ph-marble: #f7f4ec;
  --ph-terra: #b5542f;      /* 陶器的赭紅：反駁、被駁倒 */
  --ph-olive: #6d7b3a;
  --ph-read: 100%;
}

.ph-h1-zh { display: block; font-family: var(--zh); font-weight: 600; font-size: .5em; letter-spacing: .06em; margin-top: .5em; color: rgba(255,255,255,.88); }
.ph-h2-zh { font-family: var(--zh); font-weight: 600; font-size: .62em; letter-spacing: .04em; color: var(--ink-soft); margin-left: .35em; white-space: nowrap; }
.hero h1 { max-width: 20ch; }
/* 課程頁與人物頁是長文閱讀：整頁收窄成閱讀欄寬，hero 的左緣跟著對齊 */
main:has(.ph-tools) .wrap { width: min(980px, 92vw); }

/* ---------- 中譯開關：預設收起，body.ph-show-zh 時展開 ---------- */
.ph-zh { font-family: var(--zh); color: var(--ink-soft); font-size: .98rem; line-height: 1.85; margin: .45rem 0 0;
  display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .35s ease, margin .35s ease; overflow: hidden; }
.ph-zh { display: none; }
.ph-show-zh .ph-zh { display: block; animation: ph-zh-in .4s ease both; opacity: 1; }
.ph-show-zh .ph-zh.ph-inline { display: inline; }
@keyframes ph-zh-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 黏在頂端的工具列：本頁目錄＋中譯開關＋閱讀進度 ---------- */
.ph-tools { position: sticky; top: 76px; z-index: 90; background: rgba(252,251,247,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ph-tools-in { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; }
.ph-toc { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; -webkit-overflow-scrolling: touch; }
.ph-toc::-webkit-scrollbar { display: none; }
.ph-toc a { flex: none; font-size: .86rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); text-decoration: none; padding: .35rem .75rem; border-radius: 999px; transition: background .2s, color .2s; }
.ph-toc a:hover { background: var(--cream); color: var(--brand-dk); }
.ph-toc a.on { background: var(--brand); color: #fff; }
.ph-zh-btn { flex: none; font: 700 .84rem var(--sans); border: 1.5px solid var(--brand); color: var(--brand-dk); background: #fff; border-radius: 999px; padding: .4rem .9rem; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.ph-zh-btn:hover { transform: translateY(-1px); }
.ph-zh-btn .on { display: none; }
.ph-zh-btn[aria-pressed="true"] { background: var(--brand); color: #fff; }
.ph-zh-btn[aria-pressed="true"] .on { display: inline; }
.ph-zh-btn[aria-pressed="true"] .off { display: none; }
.ph-progress { height: 3px; background: transparent; }
.ph-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--sunset)); transition: width .1s linear; }
.ph-sec { scroll-margin-top: 130px; }

/* ---------- 課首：資訊列與大觀念 ---------- */
.ph-top { padding-bottom: 0; }
.ph-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.ph-meta span { font-size: .84rem; font-weight: 600; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; color: var(--ink-soft); }
.ph-meta b { color: var(--brand-dk); margin-right: .3em; }
.ph-big { position: relative; background: linear-gradient(150deg, var(--ph-night), var(--ph-night-2)); color: #fff; border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 3rem); overflow: hidden; box-shadow: var(--shadow); }
.ph-big::after { content: "?"; position: absolute; right: -.05em; bottom: -.38em; font: 600 clamp(12rem, 30vw, 20rem)/1 var(--serif); color: rgba(255,255,255,.05); pointer-events: none; }
.ph-big-k { font: 800 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ffd98a; }
.ph-big-en { font: 500 clamp(1.3rem, 2.6vw, 1.85rem)/1.45 var(--serif); margin: .7rem 0 .6rem; max-width: 34ch; position: relative; z-index: 1; }
.ph-big-zh { font-family: var(--zh); color: rgba(255,255,255,.78); margin: 0; max-width: 34em; position: relative; z-index: 1; }

/* ---------- 長文 ---------- */
.ph-essay { max-width: var(--ph-read); }
.ph-es-sec + .ph-es-sec { margin-top: 2.6rem; }
.ph-es-sec h3 { font: 600 clamp(1.3rem, 2.4vw, 1.6rem)/1.3 var(--serif); color: var(--brand-dk); margin: 0 0 .9rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em .5em; }
.ph-es-n { font: 800 .8rem var(--sans); letter-spacing: .1em; color: var(--gold-dk); border: 1.5px solid var(--gold); border-radius: 6px; padding: .1rem .4rem; transform: translateY(-.2em); }
.ph-p { position: relative; margin: 0 0 1.25rem; }
.ph-en { font: 400 1.16rem/1.8 var(--serif); color: var(--ink); margin: 0; }
.ph-essay .ph-p .ph-spk { position: absolute; left: -2.6rem; top: .3rem; opacity: .35; transition: opacity .2s, transform .2s, background .2s; }
.ph-essay .ph-p:hover .ph-spk, .ph-essay .ph-spk:focus-visible, .ph-essay .ph-spk.on { opacity: 1; }
.ph-essay .ph-en > span { display: block; }
.ph-first .ph-en > span::first-letter { float: left; font: 600 3.9em/.82 var(--serif); padding: .06em .12em 0 0; color: var(--brand); }
.ph-essay .ph-zh { border-left: 3px solid var(--brand-lt); padding-left: .9rem; }
.ph-lead { max-width: var(--ph-read); margin: .4rem 0 2rem; }
.ph-lead .ph-en { font-family: var(--sans); font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 1100px) {
  .ph-essay .ph-p .ph-spk { position: static; float: left; margin: .25rem .6rem 0 0; opacity: .7; width: 26px; height: 26px; font-size: .8rem; }
}

/* ---------- 思想實驗：蘇格拉底式詰問 ---------- */
.ph-el { background: radial-gradient(120% 90% at 85% 0%, #2a4a72 0%, var(--ph-night) 55%); color: #eef2f8; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(12,24,44,.8); }
.ph-el-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(0,0,0,.22); }
.ph-el-tab { all: unset; cursor: pointer; padding: 1rem .8rem .9rem; text-align: center; display: grid; gap: .1rem; color: rgba(255,255,255,.62); border-bottom: 3px solid transparent; transition: color .2s, background .2s, border-color .2s; box-sizing: border-box; }
.ph-el-tab b { font: 600 1.25rem var(--serif); }
.ph-el-tab span { font-family: var(--zh); font-size: .9rem; }
.ph-el-tab i { font: italic .78rem var(--serif); opacity: .7; }
.ph-el-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.ph-el-tab[aria-selected="true"] { color: #fff; border-bottom-color: #ffd36e; background: rgba(255,255,255,.07); }
.ph-el-tab:focus-visible { outline: 2px solid #ffd36e; outline-offset: -4px; }
.ph-el-stage { padding: clamp(1.3rem, 3.5vw, 2.4rem); }
.ph-el-src { font: 800 .76rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ffd98a; margin: 0 0 .3rem; }
.ph-el-who { margin: 0 0 1.4rem; color: rgba(255,255,255,.78); font-size: .98rem; max-width: 62ch; }
.ph-el-who span { display: block; font-family: var(--zh); font-size: .9rem; opacity: .8; }
.ph-el-ask { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ph-el-av { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #f3e3b8, #d9a94a); color: var(--ph-night); font: 600 1.7rem var(--serif); box-shadow: 0 0 0 5px rgba(255,211,110,.16); animation: ph-pulse 3.2s ease-in-out infinite; }
.ph-el-av.sm { width: 34px; height: 34px; font-size: 1.05rem; animation: none; box-shadow: none; }
@keyframes ph-pulse { 50% { box-shadow: 0 0 0 11px rgba(255,211,110,.05); } }
.ph-el-q { margin: 0; }
.ph-el-q b { display: block; font: 600 clamp(1.5rem, 3.4vw, 2.2rem)/1.2 var(--serif); color: #fff; }
.ph-el-q span { font-family: var(--zh); color: rgba(255,255,255,.72); }
.ph-el-hint { font-size: .92rem; color: rgba(255,255,255,.62); margin: 0 0 .8rem; }
.ph-el-defs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.ph-el-def { all: unset; box-sizing: border-box; cursor: pointer; position: relative; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16); border-radius: 14px; padding: 1rem 1.05rem 1.1rem; display: grid; gap: .35rem; align-content: start; transition: transform .2s, border-color .2s, background .2s, opacity .3s; }
.ph-el-def:hover:not([disabled]) { transform: translateY(-4px); border-color: #ffd36e; background: rgba(255,255,255,.12); }
.ph-el-def:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-el-def small { font: 800 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9fc3ea; }
.ph-el-def b { font: 500 1.06rem/1.45 var(--serif); color: #fff; }
.ph-el-def span { font-family: var(--zh); font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.6; }
.ph-el-def[disabled] { cursor: default; opacity: .55; }
.ph-el-def.is-out b { text-decoration: line-through; text-decoration-color: #ff9d7a; text-decoration-thickness: 2px; }
.ph-el-def.is-out::after { content: attr(data-flaw); position: absolute; top: -.65rem; right: .7rem; background: var(--ph-terra); color: #fff; font: 800 .7rem var(--sans); letter-spacing: .04em; padding: .18rem .55rem; border-radius: 999px; animation: ph-stamp .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ph-stamp { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ph-el-log { display: grid; gap: 1rem; margin-top: 1.4rem; }
.ph-el-turn { display: grid; gap: .6rem; animation: ph-rise .45s ease both; }
@keyframes ph-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ph-el-you { justify-self: end; max-width: min(46ch, 88%); background: #2f5d8f; border-radius: 16px 16px 4px 16px; padding: .7rem 1rem; }
.ph-el-you small, .ph-el-soc small { display: block; font: 800 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: .2rem; }
.ph-el-you p { margin: 0; font: 500 1.02rem/1.5 var(--serif); }
.ph-el-soc { display: flex; gap: .7rem; align-items: flex-start; max-width: min(66ch, 100%); }
.ph-el-bub { background: #fff; color: var(--ink); border-radius: 4px 16px 16px 16px; padding: .85rem 1.1rem 1rem; }
.ph-el-bub small { color: var(--ph-terra); opacity: 1; }
.ph-el-bub p { margin: 0; font: 400 1.06rem/1.7 var(--serif); }
.ph-el-bub .ph-zh { color: var(--ink-soft); }
.ph-el-bub cite { display: block; margin-top: .55rem; font: 700 .78rem var(--sans); font-style: normal; color: var(--gold-dk); letter-spacing: .03em; }
.ph-el-caret::after { content: "▍"; animation: ph-blink .8s steps(2) infinite; color: var(--gold-dk); }
@keyframes ph-blink { 50% { opacity: 0; } }
.ph-el-end { margin-top: 1.5rem; border: 1.5px dashed rgba(255,211,110,.6); border-radius: 16px; padding: 1.2rem 1.4rem; animation: ph-rise .6s ease both; }
.ph-el-end h4 { margin: 0 0 .4rem; font: 600 1.35rem var(--serif); color: #ffd98a; }
.ph-el-end h4 span { font-family: var(--zh); font-size: .75em; margin-left: .5em; color: rgba(255,255,255,.75); }
.ph-el-end p { margin: 0; font: 400 1.05rem/1.7 var(--serif); }
.ph-el-end .ph-zh { color: rgba(255,255,255,.72); }
.ph-el-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; gap: 1rem; }
.ph-el-count { font-size: .86rem; color: rgba(255,255,255,.6); }
.ph-el-reset { all: unset; cursor: pointer; font: 700 .86rem var(--sans); color: #ffd98a; border: 1.5px solid rgba(255,211,110,.5); padding: .4rem .9rem; border-radius: 999px; transition: background .2s; }
.ph-el-reset:hover { background: rgba(255,211,110,.14); }
.ph-el-reset:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }

.ph-tests { margin-top: 3rem; max-width: none; }
.ph-tests h3 { font: 600 1.4rem var(--serif); color: var(--brand-dk); }
.ph-test-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.ph-test-list li { display: flex; gap: .9rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
.ph-test-list .ph-p { margin: 0; }
.ph-test-list .ph-en { font: 500 1.02rem/1.6 var(--sans); }
.ph-test-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font: 800 .9rem var(--sans); }
.ph-own { margin-top: 1.6rem; background: #fff; border: 1.5px solid var(--gold); border-radius: 16px; padding: 1.2rem 1.3rem; }
.ph-own .ph-en { font: 600 1.05rem/1.6 var(--sans); }
.ph-own textarea { width: 100%; margin-top: .5rem; font: 400 1.12rem/1.6 var(--serif); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; resize: vertical; background: var(--paper); }
.ph-own textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.ph-own-checks { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.ph-own-checks label { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; transition: background .2s, border-color .2s; }
.ph-own-checks label:has(input:checked) { background: var(--brand-lt); border-color: var(--brand); }
.ph-own-done { flex-basis: 100%; margin: .3rem 0 0; font-weight: 700; color: var(--brand-dk); }

/* ---------- 論證攤開來 ---------- */
.ph-arg { max-width: none; display: grid; gap: .7rem; counter-reset: none; }
.ph-arg-step { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ph-arg-step:hover { border-color: var(--brand); transform: translateX(4px); }
.ph-arg-step:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ph-arg-k { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-lt); color: var(--brand-dk); display: grid; place-items: center; font: 800 1rem var(--sans); }
.ph-arg-step.is-c { background: var(--ph-marble); border-color: var(--gold); margin-top: .6rem; position: relative; }
.ph-arg-step.is-c::before { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: -.75rem; border-top: 2px solid var(--ink); }
.ph-arg-step.is-c .ph-arg-k { background: var(--gold); color: #fff; font: 600 2.1rem/1 var(--serif); padding-bottom: .15em; }
.ph-arg-en { display: block; font: 500 1.1rem/1.6 var(--serif); color: var(--ink); }
.ph-arg-ob { display: none; margin-top: .8rem; padding: .8rem 1rem; background: #fbf1ec; border-left: 3px solid var(--ph-terra); border-radius: 0 10px 10px 0; font-size: 1rem; line-height: 1.7; color: var(--ink); }
.ph-arg-ob b { display: block; font: 800 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ph-terra); margin-bottom: .25rem; }
.ph-arg-step[aria-expanded="true"] .ph-arg-ob { display: block; animation: ph-rise .35s ease both; }
.ph-arg-plus { font: 400 1.6rem/1 var(--sans); color: var(--ink-soft); transition: transform .25s; align-self: center; }
.ph-arg-step[aria-expanded="true"] .ph-arg-plus { transform: rotate(45deg); color: var(--ph-terra); }
.ph-arg-step.is-weak .ph-arg-k { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ph-terra); }

/* ---------- 原典 ---------- */
.ph-src-work { margin: 0 0 1.4rem; color: var(--ink-soft); }
.ph-src { margin: 0 0 2rem; max-width: none; background: #fff; border-radius: 16px; border: 1px solid var(--line); padding: clamp(1.2rem, 3vw, 2rem); position: relative; box-shadow: var(--shadow-sm); }
.ph-src::before { content: "“"; position: absolute; left: .9rem; top: -.2rem; font: 600 5rem/1 var(--serif); color: var(--brand-lt); }
.ph-src blockquote { margin: 0; position: relative; }
.ph-src blockquote p { margin: 0; font: italic 400 clamp(1.15rem, 2.2vw, 1.38rem)/1.7 var(--serif); color: var(--ink); }
.ph-src blockquote .ph-spk { float: right; margin: 0 0 .4rem .8rem; }
.ph-src figcaption { margin-top: .7rem; font: 800 .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dk); }
.ph-src-note { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.ph-src-note > b { font: 800 .76rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.ph-src-note .ph-p { margin: .3rem 0 0; }
.ph-src-note .ph-en { font: 400 1.04rem/1.7 var(--sans); }
.ph-said { max-width: none; background: var(--ph-night); color: #fff; border-radius: 16px; padding: 1.3rem 1.5rem; }
.ph-said-k { margin: 0; font: 800 .76rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #ffd98a; }
.ph-said-claim { font: italic 500 1.4rem/1.4 var(--serif); margin: .5rem 0 .3rem; }
.ph-said-claim span { display: block; font: 400 .95rem var(--zh); font-style: normal; opacity: .75; margin-top: .2rem; }
.ph-said-v { margin: 0 0 .7rem; }
.ph-said-v b { background: var(--ph-terra); padding: .15rem .6rem; border-radius: 999px; font-size: .84rem; }
.ph-said .ph-en { font: 400 1.04rem/1.7 var(--sans); color: rgba(255,255,255,.92); }
.ph-said .ph-zh { color: rgba(255,255,255,.72); }
.ph-said .ph-p { margin: 0; }

/* ---------- 反駁與回應 ---------- */
.ph-objs { display: grid; gap: 1.2rem; }
.ph-obj { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.ph-obj > div { padding: 1.2rem 1.4rem; }
.ph-obj-o { background: #fbf1ec; border-right: 1px solid var(--line); }
.ph-obj-k { font: 800 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.ph-obj-o .ph-obj-k { color: var(--ph-terra); }
.ph-obj-r .ph-obj-k { color: var(--brand); }
.ph-obj .ph-p { margin: .4rem 0 0; }
.ph-obj .ph-en { font-size: 1.06rem; line-height: 1.7; }
.ph-obj-o .ph-en { font-weight: 500; }
@media (max-width: 760px) { .ph-obj { grid-template-columns: 1fr; } .ph-obj-o { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- 術語、佛法、人物卡、延伸閱讀 ---------- */
.ph-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .9rem; }
.ph-term { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.15rem; transition: transform .2s, box-shadow .2s; }
.ph-term:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.ph-term-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ph-term-h b { font: 600 1.25rem var(--serif); color: var(--brand-dk); }
.ph-term-zh { font-family: var(--zh); color: var(--ink-soft); font-size: .95rem; margin-left: auto; }
.ph-term-o { margin: .2rem 0 .4rem; font: italic .86rem var(--serif); color: var(--gold-dk); }
.ph-term-d { margin: 0; font-size: 1rem; line-height: 1.6; }
.ph-dharma { position: relative; }
.ph-wheel { position: absolute; right: 0; top: -1rem; font-size: clamp(6rem, 16vw, 11rem); line-height: 1; color: var(--gold); opacity: .13; animation: ph-spin 60s linear infinite; pointer-events: none; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; margin-top: 1.6rem; max-width: none; }
.ph-tri div { background: var(--cream); border-radius: 12px; padding: .8rem 1rem; display: grid; gap: .1rem; border-top: 3px solid var(--gold); }
.ph-tri b { font: 700 1.15rem var(--zh); color: var(--brand-dk); }
.ph-tri i { font: italic .92rem var(--serif); color: var(--gold-dk); }
.ph-tri span { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.ph-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin: 1.2rem 0 1.8rem; }
.ph-pcard { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s, box-shadow .2s; }
.ph-pcard:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow); }
.ph-pcard-mono { grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg, var(--ph-night), #33598a); color: #ffd98a; display: grid; place-items: center; font: 600 1.7rem var(--serif); }
.ph-pcard-b { display: grid; gap: .1rem; }
.ph-pcard-b b { font: 600 1.2rem var(--serif); color: var(--brand-dk); }
.ph-pcard-b b span { font: 600 .8em var(--zh); color: var(--ink-soft); }
.ph-pcard-b i { font: normal 600 .82rem var(--sans); color: var(--gold-dk); }
.ph-pcard-b > span { font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }
.ph-go { font: 700 .86rem var(--sans); color: var(--brand); }
.ph-further { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: .5rem; }
.ph-further li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; display: grid; gap: .15rem; }
.ph-further a { font-weight: 700; color: var(--brand-dk); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.ph-fur-n { font-size: .92rem; color: var(--ink-soft); }
.ph-q { font: 600 1.12rem/1.5 var(--serif) !important; }
.ph-write-h { margin: 2.4rem 0 .6rem; font: 600 1.4rem var(--serif); color: var(--brand-dk); }
.ph-write { max-width: none; padding-left: 1.3rem; display: grid; gap: .5rem; }
.ph-write .ph-p { margin: 0; }
.ph-write .ph-en { font: 500 1.05rem/1.65 var(--sans); }

/* ---------- 人物頁 ---------- */
.ph-person-top { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.ph-mono { width: clamp(130px, 20vw, 190px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #3a6599, var(--ph-night) 70%); display: grid; place-items: center; align-content: center; color: #ffd98a; box-shadow: 0 0 0 8px var(--cream), 0 0 0 9px var(--gold), var(--shadow); }
.ph-mono span { font: 500 clamp(3.6rem, 9vw, 5.6rem)/1 var(--serif); }
.ph-mono i { font: normal 700 .78rem var(--sans); letter-spacing: .06em; color: rgba(255,255,255,.75); margin-top: .3rem; }
.ph-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .1rem 1.6rem; margin: 0; }
.ph-facts div { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.ph-facts dt { font: 800 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.ph-facts dt span { font-family: var(--zh); letter-spacing: .04em; }
.ph-facts dd { margin: 0; font-size: 1.02rem; }
@media (max-width: 640px) { .ph-person-top { grid-template-columns: 1fr; justify-items: center; } .ph-facts { width: 100%; } }
.ph-tl { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; border-top: 2px solid var(--brand); }
.ph-tl li { position: relative; padding: 1.1rem .9rem 0 0; }
.ph-tl li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--paper); }
.ph-tl li:last-child::before { background: var(--ph-terra); }
.ph-tl b { display: block; font: 600 1.25rem var(--serif); color: var(--brand-dk); }
.ph-tl span { font-size: .92rem; line-height: 1.45; display: block; }
.ph-tl i { display: block; font: normal .86rem var(--zh); color: var(--ink-soft); }
.ph-quote { margin: 2.2rem 0 0; max-width: 62ch; border-left: 4px solid var(--gold); padding: .3rem 0 .3rem 1.4rem; }
.ph-quote blockquote { margin: 0; font: italic 500 clamp(1.5rem, 3.4vw, 2.2rem)/1.35 var(--serif); color: var(--brand-dk); }
.ph-quote blockquote span { display: block; font: 500 .5em/1.6 var(--zh); font-style: normal; color: var(--ink-soft); margin-top: .5rem; }
.ph-quote figcaption { margin-top: .8rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- 系列首頁 ---------- */
.ph-hub-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ph-hub-text p { font-size: 1.12rem; line-height: 1.8; margin: 0 0 .3rem; max-width: 60ch; }
.ph-hub-text .ph-intro-zh { font-family: var(--zh); color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.2rem; }
.ph-start { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: center; margin-top: 1.6rem; background: linear-gradient(150deg, var(--ph-night), var(--ph-night-2)); color: #fff; text-decoration: none; border-radius: 16px; padding: 1.1rem 1.4rem; max-width: 34rem; box-shadow: var(--shadow); transition: transform .2s; }
.ph-start:hover { transform: translateY(-4px); }
.ph-start span { font: 800 .76rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #ffd98a; }
.ph-start b { font: 600 1.5rem var(--serif); grid-column: 1; }
.ph-start b i { font: normal 600 .62em var(--zh); opacity: .8; margin-left: .4em; }
.ph-start em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 1.8rem; transition: transform .2s; }
.ph-start:hover em { transform: translateX(6px); }
.ph-hub-prog { font-size: .92rem !important; color: var(--ink-soft); margin-top: 1rem !important; }
.ph-hub-art { display: grid; justify-items: center; gap: 1.4rem; }
.ph-owl { filter: drop-shadow(0 16px 24px rgba(20,35,59,.28)); animation: ph-bob 5s ease-in-out infinite; }
@keyframes ph-bob { 50% { transform: translateY(-8px); } }
.ph-owl-body { fill: var(--ph-night); }
.ph-owl-ear { fill: var(--ph-night); stroke: var(--ph-night); stroke-width: 4; stroke-linejoin: round; }
.ph-owl-eye { fill: #f7f1df; stroke: #d9a94a; stroke-width: 3; }
.ph-owl-pupil { fill: var(--ph-night); transition: transform .12s ease-out; transform-box: fill-box; transform-origin: center; animation: ph-wink 6s infinite; }
@keyframes ph-wink { 0%, 94%, 100% { scale: 1 1; } 97% { scale: 1 .1; } }
.ph-owl-beak { fill: #d9a94a; }
.ph-owl-wing { fill: none; stroke: #4b6f9e; stroke-width: 3; stroke-linecap: round; }
.ph-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; width: 100%; max-width: 22rem; }
.ph-stats div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; text-align: center; }
.ph-stats b { display: block; font: 600 2rem/1.1 var(--serif); color: var(--brand); }
.ph-stats span { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.ph-stats i { display: block; font: normal .8rem var(--zh); }
@media (max-width: 860px) { .ph-hub-grid { grid-template-columns: 1fr; } .ph-hub-art { order: -1; } }

.ph-shelf-nav { position: sticky; top: 76px; z-index: 90; background: rgba(243,238,226,.95); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.ph-shelf-tabs { display: flex; gap: .5rem; overflow-x: auto; padding: .6rem 0; scrollbar-width: none; }
.ph-shelf-tabs::-webkit-scrollbar { display: none; }
.ph-shelf-tab { flex: none; display: flex; align-items: center; gap: .6rem; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .4rem .8rem .4rem .45rem; color: var(--ink); transition: border-color .2s, transform .2s, background .2s; }
.ph-shelf-tab:hover { border-color: var(--gold); transform: translateY(-2px); }
.ph-shelf-tab.on { background: var(--ph-night); color: #fff; border-color: var(--ph-night); }
.ph-shelf-tab b { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font: 600 1.05rem var(--serif); }
.ph-shelf-tab.on b { background: #d9a94a; color: var(--ph-night); }
.ph-shelf-tab span { font: 700 .9rem var(--sans); line-height: 1.2; }
.ph-shelf-tab i { display: block; font: normal .78rem var(--zh); opacity: .7; }
.ph-shelf-tab em { font: normal 800 .76rem var(--sans); opacity: .55; }
.ph-shelf { scroll-margin-top: 140px; }
.ph-shelf-h { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: flex-start; margin-bottom: 2rem; }
.ph-shelf-letter { flex: none; font: 600 clamp(4.5rem, 11vw, 8rem)/.8 var(--serif); color: transparent; -webkit-text-stroke: 2px var(--gold); }
.ph-shelf-h .lead { max-width: 62ch; }
.ph-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.1rem; }
.ph-unit { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem 1rem; box-shadow: var(--shadow-sm); }
.band .ph-unit { background: var(--paper); }
.ph-unit-k { margin: 0; font: 800 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); min-height: 1em; }
.ph-unit h3 { margin: .15rem 0 .7rem; font: 600 1.3rem var(--serif); color: var(--brand-dk); }
.ph-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.ph-it { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: baseline; padding: .5rem .5rem; border-radius: 10px; color: var(--ink); text-decoration: none; opacity: .72; }
.ph-units-philosophers .ph-it { grid-template-columns: 1fr auto; }
.ph-it-n { font: 800 .76rem var(--sans); color: var(--ink-soft); letter-spacing: .04em; }
.ph-it-b { display: grid; gap: 0; }
.ph-it-b b { font: 600 1rem/1.35 var(--sans); }
.ph-it-b span { font: .88rem var(--zh); color: var(--ink-soft); }
.ph-it-b i { font: italic .82rem var(--serif); color: var(--gold-dk); }
.ph-it.is-ready { opacity: 1; background: linear-gradient(120deg, var(--brand-lt), #fff 80%); border: 1.5px solid var(--brand); transition: transform .2s, box-shadow .2s; }
.ph-it.is-ready:hover { transform: translateX(5px); box-shadow: var(--shadow-sm); }
.ph-it.is-ready .ph-it-n { color: var(--brand-dk); }
.ph-it-go { font: 800 .78rem var(--sans); color: var(--brand); white-space: nowrap; }
.ph-units-philosophers .ph-items { grid-template-columns: 1fr; }

@media (max-width: 720px) {
  .ph-el-defs { grid-template-columns: 1fr; }
  .ph-el-tab b { font-size: 1.05rem; }
  .ph-zh-btn { font-size: .78rem; padding: .35rem .7rem; }
  .ph-zh-btn span { display: none !important; }
  .ph-zh-btn::after { content: "中"; }
  .ph-units { grid-template-columns: 1fr; }
  .ph-shelf-letter { display: none; }
  .ph-h2-zh { display: block; margin-left: 0; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-owl, .ph-owl-pupil, .ph-wheel, .ph-el-av { animation: none; }
  .ph-el-turn, .ph-el-end, .ph-show-zh .ph-zh { animation: none; }
}

/* 帶長音符號的轉寫（ē、ā、ṭ、ṅ）：Fraunces 斜體缺字會把符號拆開，改用系統襯線字 */
.ph-term-o, .ph-el-tab i, .ph-tri i { font-family: 'Times New Roman', Times, serif; font-size: .95rem; }

.ph-sec { overflow-x: clip; }

/* 每段的「中譯」鈕；全頁中譯打開時收起來 */
.ph-tr { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; font: 700 .78rem var(--zh); letter-spacing: .06em; color: var(--brand-dk); background: var(--brand-lt); border-radius: 999px; padding: .16rem .7rem; transition: background .2s, color .2s; }
.ph-tr:hover { background: var(--brand); color: #fff; }
.ph-tr:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ph-tr i { font-style: normal; font-size: .7rem; transition: transform .25s; }
.ph-tr[aria-expanded="true"] i { transform: rotate(180deg); }
.ph-tr[aria-expanded="true"] { background: var(--brand); color: #fff; }
.ph-zh.is-open { display: block; animation: ph-zh-in .4s ease both; opacity: 1; }
.ph-show-zh .ph-tr { display: none; }
.ph-el .ph-tr, .ph-said .ph-tr { background: rgba(255,255,255,.14); color: #fff; }
.ph-el-bub .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-arg-step[aria-expanded="true"] .ph-zh { display: block; opacity: 1; }
.ph-trnote { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 1.4rem 0 0; padding: .7rem 1rem; background: var(--cream); border: 1px dashed var(--gold); border-radius: 12px; font-size: .95rem; color: var(--ink-soft); }
.ph-trnote b { font-family: var(--zh); color: var(--brand-dk); }
.ph-trnote .ph-tr { margin: 0; pointer-events: none; }
.ph-zh-btn { box-shadow: 0 0 0 4px rgba(14,107,96,.12); }

/* ---------- A2：有效／健全判斷 ---------- */
.ph-vl-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem clamp(1.3rem, 3.5vw, 2.4rem); background: rgba(0,0,0,.22); }
.ph-vl-dots { display: flex; gap: .45rem; }
.ph-vl-dots i { width: 28px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.18); transition: background .3s, transform .3s; }
.ph-vl-dots i.cur { background: #ffd36e; transform: scaleY(1.4); }
.ph-vl-dots i.ok { background: #4fd1a5; }
.ph-vl-dots i.no { background: #ff9d7a; }
.ph-vl-arg { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: .4rem 1.2rem; }
.ph-vl-in { animation: ph-rise .45s ease both; }
.ph-vl-line { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; align-items: baseline; padding: .75rem 0; }
.ph-vl-line + .ph-vl-line { border-top: 1px dashed rgba(255,255,255,.14); }
.ph-vl-line.is-c { border-top: 2px solid rgba(255,255,255,.75); }
.ph-vl-k { font: 800 .82rem var(--sans); letter-spacing: .08em; color: #9fc3ea; }
.ph-vl-line.is-c .ph-vl-k { font: 600 1.6rem/1 var(--serif); color: #ffd36e; }
.ph-vl-line p { margin: 0; font: 500 clamp(1.15rem, 2.4vw, 1.4rem)/1.45 var(--serif); color: #fff; }
.ph-vl-line .ph-zh { font: 400 .95rem/1.7 var(--zh); color: rgba(255,255,255,.72); }
.ph-vl-ask { margin-top: 1.3rem; }
.ph-vl-q { margin: 0 0 .7rem; }
.ph-vl-q b { display: block; font: 600 1.2rem var(--serif); color: #ffd98a; }
.ph-vl-q span { font: .92rem var(--zh); color: rgba(255,255,255,.7); }
.ph-vl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ph-vl-opt { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: .9rem 1rem; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); display: grid; gap: .1rem; transition: transform .2s, border-color .2s, background .2s; }
.ph-vl-opt:hover { transform: translateY(-3px); border-color: #ffd36e; background: rgba(255,255,255,.13); }
.ph-vl-opt:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-vl-opt b { font: 700 1.08rem var(--sans); color: #fff; }
.ph-vl-opt span { font: .88rem var(--zh); color: rgba(255,255,255,.7); }
.ph-vl-card { margin-top: 1.3rem; background: #fff; color: var(--ink); border-radius: 16px; padding: 1.2rem 1.4rem; border-top: 6px solid var(--brand); animation: ph-rise .45s ease both; display: grid; gap: .9rem; }
.ph-vl-card.is-valid { border-top-color: var(--gold); }
.ph-vl-card.is-invalid { border-top-color: var(--ph-terra); }
.ph-vl-verdict { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.ph-vl-verdict b { font: 600 1.5rem var(--serif); color: var(--brand-dk); }
.is-invalid .ph-vl-verdict b { color: var(--ph-terra); }
.ph-vl-verdict span { font: 600 1rem var(--zh); color: var(--ink-soft); }
.ph-vl-verdict em { margin-left: auto; font: normal 800 .78rem var(--sans); padding: .2rem .7rem; border-radius: 999px; background: var(--brand-lt); color: var(--brand-dk); }
.ph-vl-verdict em.no { background: #fbe3d9; color: var(--ph-terra); }
.ph-vl-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.ph-vl-form small, .ph-vl-counter small { flex-basis: 100%; font: 800 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.ph-vl-form code { font: 600 .98rem ui-monospace, 'SF Mono', Menlo, monospace; background: var(--cream); border-radius: 8px; padding: .25rem .6rem; }
.ph-vl-form code.c { background: var(--ph-night); color: #ffd98a; }
.ph-vl-why p, .ph-vl-counter p { margin: 0; font-size: 1.04rem; line-height: 1.7; }
.ph-vl-skip { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.ph-vl-counter { background: #fbf1ec; border-left: 3px solid var(--ph-terra); border-radius: 0 10px 10px 0; padding: .7rem 1rem; display: grid; gap: .2rem; }
.ph-vl-counter small { color: var(--ph-terra); }
.ph-vl-counter p:not(.ph-zh) { font-family: var(--serif); font-weight: 500; }
.ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); justify-self: start; }
.ph-vl-next { all: unset; cursor: pointer; font: 800 .92rem var(--sans); color: var(--ph-night); background: #ffd36e; padding: .55rem 1.2rem; border-radius: 999px; transition: transform .2s; }
.ph-vl-next:hover { transform: translateX(4px); }
.ph-vl-next:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ph-vl-next[hidden] { display: none; }
.ph-vl-table { overflow-x: auto; margin-top: 1rem; }
.ph-vl-table table { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.ph-vl-table th, .ph-vl-table td { text-align: left; background: #fff; padding: .8rem 1rem; border: 1px solid var(--line); font-size: 1rem; vertical-align: top; }
.ph-vl-table th { border-radius: 12px 0 0 12px; border-right: 0; font-weight: 700; color: var(--brand-dk); width: 42%; }
.ph-vl-table td { border-radius: 0 12px 12px 0; }
.ph-vl-table tr:first-child td { background: var(--brand-lt); font-weight: 700; }
.ph-vl-table span { display: block; font: 400 .88rem var(--zh); color: var(--ink-soft); }
@media (max-width: 560px) { .ph-vl-opts { grid-template-columns: 1fr; } .ph-vl-line { grid-template-columns: 2.2rem 1fr; } }

.ph-vl-line .ph-zh { display: block; opacity: 1; margin-top: .1rem; }
.ph-vl-line .ph-tr { display: none; }

/* ---------- A3：指出毛病 ---------- */
.ph-fl-card { background: #fff; color: var(--ink); border-radius: 4px 18px 18px 18px; padding: 1.1rem 1.4rem 1.2rem; max-width: 46rem; box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); }
.ph-fl-card small { font: 800 .74rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dk); }
.ph-fl-t { margin: .35rem 0 .3rem; font: 500 clamp(1.2rem, 2.5vw, 1.45rem)/1.5 var(--serif); }
.ph-fl-zh { margin: 0; font: 400 .98rem/1.7 var(--zh); color: var(--ink-soft); }
.ph-vl-opt[disabled] { cursor: default; opacity: .5; transform: none; }
.ph-vl-opt.is-right { opacity: 1; background: #1f7a63; border-color: #4fd1a5; }
.ph-vl-opt.is-wrong { opacity: 1; background: #8a3d22; border-color: #ff9d7a; }
.ph-vl-why small, .ph-fl-fix small { display: block; font: 800 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: .2rem; }
.ph-fl-fix { background: var(--brand-lt); border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; padding: .7rem 1rem; }
.ph-fl-fix small { color: var(--brand-dk); }
.ph-fl-fix p { margin: 0; font-size: 1.04rem; line-height: 1.7; }
.ph-fgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
.ph-fg { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.2rem; border-top: 4px solid var(--gold); }
.ph-fg h4 { margin: 0 0 .5rem; font: 600 1.25rem var(--serif); color: var(--brand-dk); }
.ph-fg h4 span { font: 600 .8em var(--zh); color: var(--ink-soft); margin-left: .3em; }
.ph-fg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ph-fg li { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; padding-top: .55rem; border-top: 1px dashed var(--line); }
.ph-fg li b { font-size: 1rem; }
.ph-fg li i { font: normal .88rem var(--zh); color: var(--gold-dk); }
.ph-fg li span { grid-column: 1 / -1; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------- A4：阿基里斯與烏龜 ---------- */
.ph-zn-ratio { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ph-zn-ratio span { font-size: .86rem; color: rgba(255,255,255,.7); margin-right: .2rem; }
.ph-zn-ratio button { all: unset; cursor: pointer; font: 800 .86rem var(--sans); padding: .25rem .8rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.25); color: #fff; transition: background .2s, border-color .2s; }
.ph-zn-ratio button[aria-pressed="true"] { background: #ffd36e; color: var(--ph-night); border-color: #ffd36e; }
.ph-zn-ratio button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-zn-track { width: 100%; height: auto; display: block; background: rgba(255,255,255,.04); border-radius: 16px; }
.ph-zn-ground { stroke: rgba(255,255,255,.5); stroke-width: 2; }
.ph-zn-mark { stroke: #9fc3ea; stroke-width: 2; }
.ph-zn-lim { stroke: #ffd36e; stroke-width: 2; stroke-dasharray: 6 5; }
.ph-zn-limt { fill: #ffd36e; font: 700 15px var(--sans); }
.ph-zn-ach { fill: #ff9d7a; stroke: #fff; stroke-width: 2; }
.ph-zn-tort { fill: #4fd1a5; stroke: #fff; stroke-width: 2; }
.ph-zn-lbl { fill: rgba(255,255,255,.85); font: 600 14px var(--sans); }
.ph-zn-track g[data-zn-a], .ph-zn-track g[data-zn-t] { transition: transform .45s cubic-bezier(.3,.8,.3,1); }
.ph-zn-read { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 1.1rem 0; }
.ph-zn-read div { background: rgba(255,255,255,.07); border-radius: 12px; padding: .6rem .8rem; }
.ph-zn-read small { display: block; font: 800 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #9fc3ea; }
.ph-zn-read b { font: 600 clamp(1rem, 2.2vw, 1.3rem) ui-monospace, 'SF Mono', Menlo, monospace; color: #fff; }
.ph-zn-btns { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.ph-zn-run { all: unset; cursor: pointer; font: 800 .92rem var(--sans); color: #fff; border: 1.5px solid #4fd1a5; padding: .5rem 1.1rem; border-radius: 999px; transition: background .2s; }
.ph-zn-run:hover { background: rgba(79,209,165,.2); }
.ph-zn-run:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ph-zn-msg { margin: 1rem 0 0; min-height: 3.4em; font: 500 1.08rem/1.6 var(--serif); color: #ffd98a; }
.ph-zn-msg span { display: block; font: 400 .92rem/1.7 var(--zh); color: rgba(255,255,255,.72); }
.ph-zn-tablewrap { margin-top: .8rem; max-height: 17rem; overflow: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); }
.ph-zn-table { width: 100%; border-collapse: collapse; font: .92rem ui-monospace, 'SF Mono', Menlo, monospace; }
.ph-zn-table th { position: sticky; top: 0; background: #0f1b2f; text-align: right; padding: .5rem .8rem; font: 800 .72rem var(--sans); letter-spacing: .05em; color: #9fc3ea; }
.ph-zn-table th span { display: block; font: 400 .74rem var(--zh); letter-spacing: 0; opacity: .8; }
.ph-zn-table td { text-align: right; padding: .35rem .8rem; border-top: 1px solid rgba(255,255,255,.08); color: #eef2f8; white-space: nowrap; }
.ph-zn-table td:first-child, .ph-zn-table th:first-child { text-align: left; }
.ph-zn-table tbody tr:last-child td { background: rgba(255,211,110,.12); }
@media (max-width: 640px) { .ph-zn-read { grid-template-columns: 1fr 1fr; } .ph-zn-lbl { font-size: 20px; } .ph-zn-limt { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .ph-zn-track g { transition: none !important; } }
.ph-zn.is-running .ph-zn-track g { transition: none; }

/* ---------- A5：懷疑的階梯 ---------- */
.ph-db-waves { display: flex; flex-wrap: wrap; gap: .4rem; }
.ph-db-waves span { font: 700 .8rem var(--sans); padding: .25rem .7rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.2); color: rgba(255,255,255,.55); }
.ph-db-waves span.cur { background: #ffd36e; border-color: #ffd36e; color: var(--ph-night); }
.ph-db-waves span.done { border-color: #ff9d7a; color: #ffc4ae; text-decoration: line-through; }
.ph-db-q small { font: 800 .76rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #ffd98a; }
.ph-db-q p { margin: .3rem 0 0; font: 500 clamp(1.15rem, 2.4vw, 1.4rem)/1.5 var(--serif); color: #fff; max-width: 60ch; }
.ph-db-q .ph-db-qzh { font: 400 .95rem/1.7 var(--zh); color: rgba(255,255,255,.72); }
.ph-db-q .ph-db-hint { font: 400 .9rem var(--sans); color: rgba(255,255,255,.6); margin-top: .7rem; }
.ph-db-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1.1rem; }
.ph-db-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; gap: .15rem; padding: .85rem 1rem .9rem 2.9rem; border-radius: 14px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); transition: transform .2s, border-color .2s, background .2s, opacity .5s; }
.ph-db-card::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.1rem; height: 1.1rem; border-radius: 5px; border: 2px solid rgba(255,255,255,.5); transition: background .2s, border-color .2s; }
.ph-db-card:hover:not([disabled]) { transform: translateY(-2px); border-color: #ffd36e; }
.ph-db-card:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-db-card[aria-pressed="true"] { background: rgba(255,157,122,.2); border-color: #ff9d7a; }
.ph-db-card[aria-pressed="true"]::before { background: #ff9d7a; border-color: #ff9d7a; }
.ph-db-card b { font: 500 1.06rem/1.4 var(--serif); color: #fff; }
.ph-db-card span { font: .88rem/1.6 var(--zh); color: rgba(255,255,255,.7); }
.ph-db-card[disabled] { cursor: default; }
.ph-db-card.is-fallen { opacity: .38; transform: rotate(-1.2deg) translateY(4px); background: rgba(0,0,0,.25); border-style: dashed; }
.ph-db-card.is-fallen b { text-decoration: line-through; text-decoration-color: #ff9d7a; }
.ph-db-card.is-fallen::after { content: "wave " attr(data-wave); position: absolute; right: .7rem; top: -.6rem; background: var(--ph-terra); color: #fff; font: 800 .68rem var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; }
.ph-db-card.is-miss { box-shadow: 0 0 0 3px rgba(255,211,110,.55); }
.ph-db-card.is-cogito { background: linear-gradient(140deg, #f3e3b8, #d9a94a); border-color: #ffd36e; animation: ph-pulse 2.6s ease-in-out infinite; }
.ph-db-card.is-cogito b { color: var(--ph-night); font-weight: 600; }
.ph-db-card.is-cogito span { color: rgba(20,35,59,.75); }
.ph-db-card.is-cogito::before { border-color: var(--ph-night); background: var(--ph-night); }
@media (max-width: 640px) { .ph-db-grid { grid-template-columns: 1fr; } }

/* ---------- A6：柏拉圖的洞穴（3D） ---------- */
.ph-cave-view { position: relative; aspect-ratio: 16 / 9; background: #05070c; overflow: hidden; }
.ph-cave-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.ph-cave-view canvas:active { cursor: grabbing; }
.ph-cave-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ph-cave-lab { position: absolute; left: 0; top: 0; white-space: nowrap; font: 700 .8rem var(--sans); color: #fff; background: rgba(10,18,32,.72); border: 1px solid rgba(255,211,110,.55); border-radius: 8px; padding: .2rem .55rem; transition: opacity .3s; text-align: center; line-height: 1.25; }
.ph-cave-lab i { display: block; font: normal .72rem var(--zh); color: #ffd98a; }
.ph-cave-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.ph-cave-veil.is-glare { background: #fffbe8; }
.ph-cave-veil.is-dark { background: #000; }
.ph-cave-veil.go { animation: ph-cave-veil 4.2s ease-out both; }
@keyframes ph-cave-veil { 0% { opacity: 0; } 22% { opacity: .96; } 100% { opacity: 0; } }
.ph-cave-hint { position: absolute; left: .9rem; bottom: .6rem; margin: 0; font-size: .76rem; color: rgba(255,255,255,.6); pointer-events: none; }
.ph-cave-tools { position: absolute; right: .7rem; top: .7rem; display: flex; gap: .4rem; }
.ph-cave-tools button { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(10,18,32,.7); border: 1px solid rgba(255,255,255,.25); color: #fff; font: 700 .9rem var(--sans); }
.ph-cave-tools button[aria-pressed="false"] { opacity: .5; }
.ph-cave-tools button:focus-visible { outline: 2px solid #ffd36e; outline-offset: 2px; }
.ph-cave-nogl-msg { display: none; position: absolute; inset: 0; margin: 0; padding: 2rem; place-content: center; text-align: center; color: #fff; }
.ph-cave-nogl .ph-cave-nogl-msg { display: grid; }
.ph-cave-nogl canvas, .ph-cave-nogl .ph-cave-hint, .ph-cave-nogl .ph-cave-tools { display: none; }
.ph-cave-stages { display: grid; grid-template-columns: repeat(6, 1fr); background: rgba(0,0,0,.3); }
.ph-cave-stages button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .7rem .6rem; color: rgba(255,255,255,.6); border-top: 3px solid transparent; transition: color .2s, background .2s, border-color .2s; }
.ph-cave-stages button b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font: 800 .8rem var(--sans); }
.ph-cave-stages button span { font: 700 .84rem/1.2 var(--sans); }
.ph-cave-stages button i { display: block; font: normal .76rem var(--zh); opacity: .8; }
.ph-cave-stages button:hover { color: #fff; background: rgba(255,255,255,.05); }
.ph-cave-stages button[aria-pressed="true"] { color: #fff; border-top-color: #ffd36e; background: rgba(255,255,255,.08); }
.ph-cave-stages button[aria-pressed="true"] b { background: #ffd36e; border-color: #ffd36e; color: var(--ph-night); }
.ph-cave-stages button:focus-visible { outline: 2px solid #ffd36e; outline-offset: -4px; }
.ph-cave-cap { min-height: 11.5rem; animation: ph-rise .45s ease both; }
.ph-cave-cap[hidden] { display: none; }
.ph-cave-ref { margin: 0; font: 800 .76rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #ffd98a; }
.ph-cave-cap h4 { margin: .2rem 0 .5rem; font: 600 1.6rem var(--serif); color: #fff; }
.ph-cave-cap h4 span { font: 600 .6em var(--zh); color: rgba(255,255,255,.7); margin-left: .4em; }
.ph-cave-cap .ph-p { margin: 0 0 .6rem; }
.ph-cave-cap .ph-en { font: 400 1.1rem/1.7 var(--serif); color: #eef2f8; max-width: 66ch; }
.ph-cave-cap .ph-zh { color: rgba(255,255,255,.72); max-width: 44em; }
.ph-cave-line { border-left: 3px solid #ffd36e; padding-left: .9rem; margin-top: .8rem; }
.ph-cave-line .ph-en { font: 500 .98rem/1.6 var(--sans); color: #ffd98a; }
@media (max-width: 760px) { .ph-cave-stages { grid-template-columns: repeat(3, 1fr); } .ph-cave-view { aspect-ratio: 4 / 3; } .ph-cave-lab { font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .ph-cave-veil.go { animation: none; } }

/* ---------- A7：把正方形加倍（美諾篇） ---------- */
.ph-mn-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.ph-mn-fig svg { width: 100%; height: auto; display: block; background: #e9dcc3; border-radius: 14px; }
.ph-mn-fig svg * { transition: opacity .5s ease, fill .5s ease; }
.ph-mn-orig { fill: rgba(14,107,96,.28); stroke: #0a4f47; stroke-width: 4; }
.ph-mn-big { fill: rgba(181,84,47,.14); stroke: #8a3d22; stroke-width: 3; opacity: 0; }
.ph-mn-three { fill: rgba(217,154,43,.3); stroke: #b97e16; stroke-width: 3; opacity: 0; }
.ph-mn-tilt { fill: rgba(20,35,59,.3); stroke: #14233b; stroke-width: 4; opacity: 0; }
.ph-mn-lines line { stroke: #8a3d22; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0; }
.ph-mn-diags line { stroke: #14233b; stroke-width: 3; opacity: 0; stroke-dasharray: 290; stroke-dashoffset: 290; transition: stroke-dashoffset 1s ease, opacity .3s; }
.ph-mn-t { font: 700 34px var(--serif); fill: #14233b; opacity: 0; }
.ph-mn-side { font: 700 20px var(--sans); fill: #0a4f47; }
.ph-mn-t-orig { opacity: 1; fill: #0a4f47; }
[data-state="four"] .ph-mn-big, [data-state="four"] .ph-mn-lines line, [data-state="four"] .ph-mn-t-four { opacity: 1; }
[data-state="three"] .ph-mn-three, [data-state="three"] .ph-mn-t-three { opacity: 1; }
[data-state="three"] .ph-mn-t-orig { opacity: 0; }
[data-state="diag"] .ph-mn-big, [data-state="diag"] .ph-mn-lines line, [data-state="done"] .ph-mn-big, [data-state="done"] .ph-mn-lines line { opacity: 1; }
[data-state="diag"] .ph-mn-diags line, [data-state="done"] .ph-mn-diags line { opacity: 1; stroke-dashoffset: 0; }
[data-state="done"] .ph-mn-tilt, [data-state="done"] .ph-mn-t-tilt { opacity: 1; }
[data-state="done"] .ph-mn-t-orig, [data-state="diag"] .ph-mn-t-orig { opacity: 0; }
.ph-mn-area { margin: .6rem 0 0; text-align: center; font: 700 .95rem ui-monospace, 'SF Mono', Menlo, monospace; color: #ffd98a; }
.ph-mn-talk .ph-el-ask { align-items: flex-start; }
.ph-mn-say p { margin: 0; font: 500 clamp(1.08rem, 2.2vw, 1.25rem)/1.6 var(--serif); color: #fff; }
.ph-mn-say .ph-zh { font: 400 .95rem/1.7 var(--zh); color: rgba(255,255,255,.72); }
.ph-mn-note { background: #fff; color: var(--ink); border-radius: 12px; border-left: 5px solid var(--gold); padding: .8rem 1rem; margin: .2rem 0 1rem; animation: ph-rise .45s ease both; }
.ph-mn-note[hidden] { display: none; }
.ph-mn-note p { margin: 0; font-size: 1.02rem; line-height: 1.7; }
.ph-mn-note .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-mn-opts { display: grid; gap: .6rem; }
.ph-mn-opts .ph-vl-opt { text-align: left; }
@media (max-width: 760px) { .ph-mn-grid { grid-template-columns: 1fr; } .ph-mn-fig { max-width: 320px; margin: 0 auto; } }
.ph-ml-opts { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; }
.ph-ml-opts button { all: unset; cursor: pointer; font: 700 .95rem var(--sans); padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand-dk); transition: background .2s, color .2s; }
.ph-ml-opts button:hover, .ph-ml-opts button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.ph-ml-opts button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ph-ml-out { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; animation: ph-rise .45s ease both; }
.ph-ml-out[hidden] { display: none; }
.ph-ml-side, .ph-ml-res { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
.ph-ml-side.is-yours { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,154,43,.25); }
.ph-ml-side > b, .ph-ml-res > b { font: 800 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.ph-ml-res { grid-column: 1 / -1; background: var(--brand-lt); border-color: var(--brand); }
.ph-ml-res > b { color: var(--brand-dk); }
.ph-ml .ph-ml-out .ph-en { font: 400 1.02rem/1.7 var(--sans); }
.ph-ml .ph-ml-out .ph-p { margin: .3rem 0 0; }
@media (max-width: 640px) { .ph-ml-out { grid-template-columns: 1fr; } }

/* ---------- A8：羅素的雞 ---------- */
.ph-ck-yard { background: rgba(255,255,255,.05); border-radius: 14px; padding: .9rem 1rem; min-height: 4.2rem; }
.ph-ck-days { display: flex; flex-wrap: wrap; gap: .35rem; }
.ph-ck-days i { font-style: normal; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: rgba(79,209,165,.18); border: 1px solid rgba(79,209,165,.5); border-radius: 9px; font-size: 1.1rem; animation: ph-stamp .4s cubic-bezier(.2,1.6,.4,1) both; }
.ph-ck-days i.x { background: var(--ph-terra); border-color: #ff9d7a; color: #fff; font-weight: 800; }
.ph-ck-meter { display: flex; align-items: center; gap: .9rem; margin: 1rem 0 .2rem; }
.ph-ck-bar { flex: 1; height: 16px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.ph-ck-bar i { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, #4fd1a5, #ffd36e); border-radius: 99px; transition: width .5s ease; }
.ph-ck-meter span { font: 700 1.3rem ui-monospace, 'SF Mono', Menlo, monospace; color: #fff; min-width: 5ch; text-align: right; }
.ph-ck.is-dead .ph-ck-bar i { transition-duration: .15s; }
.ph-ck-rule { margin-top: 1.2rem; border-top: 1px dashed rgba(255,255,255,.2); padding-top: .8rem; }
.ph-ck-rule .ph-en { font: 400 .92rem/1.6 var(--sans); color: rgba(255,255,255,.72); }
.ph-ck-rule .ph-zh { color: rgba(255,255,255,.6); }
.ph-ck-rule .ph-p { margin: 0; }
.ph-ck-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.ph-ck-opt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .1rem; padding: .7rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); transition: border-color .2s, transform .2s, background .2s; }
.ph-ck-opt:hover { border-color: var(--brand); transform: translateY(-2px); }
.ph-ck-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ph-ck-opt b { font: 600 1rem/1.4 var(--sans); }
.ph-ck-opt span { font: .88rem var(--zh); color: var(--ink-soft); }
.ph-ck-opt.is-seen { background: var(--cream); }
.ph-ck-opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-lt); }
.ph-ck-reply { margin-top: 1rem; border-left: 4px solid var(--ph-terra); background: #fbf1ec; border-radius: 0 12px 12px 0; padding: .8rem 1rem; animation: ph-rise .4s ease both; }
.ph-ck-reply[hidden] { display: none; }
.ph-ck-reply b { font: 800 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ph-terra); }
.ph-ck-reply p { margin: .2rem 0 0; font-size: 1.04rem; line-height: 1.7; }
.ph-ck-tried { margin: .8rem 0 0; font-size: .92rem; font-weight: 600; color: var(--brand-dk); }
@media (max-width: 640px) { .ph-ck-opts { grid-template-columns: 1fr; } }

/* ---------- A9：特修斯之船（3D）與通用的選邊元件 ---------- */
.ph-ship .ph-cave-view { background: #bfe3f2; }
.ph-ship-hint { color: rgba(20,35,59,.65); }
.ph-ship .ph-cave-lab { background: rgba(20,35,59,.82); }
.ph-ship-read { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ph-ship-read div { background: rgba(255,255,255,.07); border-radius: 12px; padding: .6rem .9rem; }
.ph-ship-read small { display: block; font: 800 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #9fc3ea; }
.ph-ship-read b { font: 600 clamp(1.2rem, 2.6vw, 1.6rem) ui-monospace, 'SF Mono', Menlo, monospace; color: #fff; }
.ph-ship-slider { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; margin: 1rem 0; font: 700 .8rem var(--sans); color: rgba(255,255,255,.7); }
.ph-ship-slider input { width: 100%; accent-color: #ffd36e; height: 1.6rem; cursor: pointer; }
.ph-ship .ph-zn-run[disabled], .ph-ship .ph-vl-next[disabled] { opacity: .35; cursor: default; transform: none; }
.ph-ship-mark { border-color: #ff9d7a; }
.ph-ship-mark:hover { background: rgba(255,157,122,.2); }
.ph-ship-markout { margin: .6rem 0 0; padding: .7rem 1rem; background: rgba(255,157,122,.14); border-left: 3px solid #ff9d7a; border-radius: 0 10px 10px 0; font-size: .98rem; line-height: 1.6; color: #fff; }
.ph-ship-markout[hidden] { display: none; }
.ph-pick .ph-ck-reply .ph-p { margin: .2rem 0 0; }
.ph-pick .ph-ck-reply .ph-en { font: 400 1.04rem/1.7 var(--sans); }

/* ---------- A10：踏進這條河 ---------- */
.ph-rv-view { background: #cdbb8f; }
.ph-rv-view canvas { display: block; width: 100%; height: auto; }
.ph-rv .ph-zn-run[aria-pressed="true"] { background: #4fd1a5; color: var(--ph-night); }
.ph-rv-read b { font-size: clamp(.95rem, 2vw, 1.2rem); }

/* ---------- A11：拉普拉斯的球桌與信封 ---------- */
.ph-dm-view { background: #17543f; }
.ph-dm-view canvas { display: block; width: 100%; height: auto; }
.ph-dm .ph-zn-read b { font-size: clamp(.9rem, 1.9vw, 1.15rem); }
.ph-env-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: .9rem; }
.ph-env-row .ph-ml-opts { margin: 0; }
.ph-env-card { width: 132px; height: 84px; border-radius: 10px; background: linear-gradient(145deg, #f3e3b8, #d9a94a); color: var(--ph-night); display: grid; place-items: center; font: 600 2rem var(--serif); box-shadow: var(--shadow-sm); transition: transform .5s; }
.ph-env-card.is-open { font-size: 1.05rem; transform: rotate(-3deg); background: #fff; border: 2px solid var(--gold); }
.ph-env .ph-ck-reply p { font-size: 1.04rem; line-height: 1.7; }
.ph-env-confess { margin-top: .8rem !important; padding-top: .8rem; border-top: 1px dashed var(--ph-terra); }

/* ---------- A12：「現在」有多長、量時間、兩種排序 ---------- */
.ph-nw-bar { display: flex; gap: 2px; height: 74px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.05); padding: 6px; }
.ph-nw-bar i { flex: 1; border-radius: 3px; min-width: 2px; }
.ph-nw-bar i.p { background: rgba(255,255,255,.2); }
.ph-nw-bar i.f { border: 1px dashed rgba(255,255,255,.3); }
.ph-nw-bar i.n { background: #ffd36e; box-shadow: 0 0 18px rgba(255,211,110,.8); flex: 1.4; }
.ph-nw-in { animation: ph-nw-zoom .6s cubic-bezier(.2,.8,.3,1) both; transform-origin: 42% 50%; }
@keyframes ph-nw-zoom { from { transform: scaleX(.06); opacity: .2; } to { transform: none; opacity: 1; } }
.ph-nw-bar.is-end i.n { flex: .15; }
.ph-nw-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .7rem 0 .2rem; font-size: .84rem; color: rgba(255,255,255,.7); }
.ph-nw-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: .4rem; }
.ph-nw-legend i.p { background: rgba(255,255,255,.25); } .ph-nw-legend i.n { background: #ffd36e; } .ph-nw-legend i.f { border: 1px dashed rgba(255,255,255,.5); }
.ph-ms-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .9rem; }
.ph-ms-lamp { width: 54px; height: 54px; border-radius: 50%; background: #d9d2c2; border: 3px solid var(--line); transition: background .08s, box-shadow .08s; }
.ph-ms-lamp.on { background: #ffd36e; box-shadow: 0 0 0 8px rgba(255,211,110,.3), 0 0 34px rgba(255,190,60,.9); border-color: var(--gold); }
.ph-ms-start, .ph-ms-guess button { all: unset; cursor: pointer; font: 700 .95rem var(--sans); padding: .5rem 1.1rem; border-radius: 999px; background: var(--brand); color: #fff; }
.ph-ms-start[disabled] { opacity: .4; cursor: default; }
.ph-ms-start:focus-visible, .ph-ms-guess button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ph-ms-guess { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.ph-ms-guess[hidden] { display: none; }
.ph-ms-guess input { width: 200px; accent-color: var(--brand); }
.ph-ms-guess b { font: 700 1.1rem ui-monospace, 'SF Mono', Menlo, monospace; min-width: 5ch; }
.ph-ms .ph-ck-reply p { font-size: 1.04rem; line-height: 1.7; }
.ph-sr-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.ph-sr-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: baseline; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ph-sr-list li b { font: 600 1rem var(--sans); }
.ph-sr-list li span { grid-column: 1; font: .88rem var(--zh); color: var(--ink-soft); }
.ph-sr-list li i { grid-row: 1 / span 2; grid-column: 2; font: normal 700 .84rem ui-monospace, 'SF Mono', Menlo, monospace; color: var(--gold-dk); text-align: right; }
.ph-sr-list li.f { border-style: dashed; opacity: .75; }
.ph-sr-list li.now { background: var(--ph-night); border-color: var(--ph-night); justify-items: center; grid-template-columns: 1fr; padding: .25rem; }
.ph-sr-list li.now b { color: #ffd36e; font-size: .84rem; letter-spacing: .14em; }
[data-mode="b"] .ph-sr-list li i { color: var(--brand-dk); }
.ph-sr-note { margin-top: .9rem; border-left: 4px solid var(--gold); padding: .2rem 0 .2rem 1rem; }
.ph-sr-note p { margin: 0; font-size: 1.02rem; line-height: 1.7; }
@media (max-width: 640px) { .ph-sr-list li { grid-template-columns: 1fr; } .ph-sr-list li i { grid-row: auto; grid-column: 1; text-align: left; } }

/* ---------- A13：傳送機 ---------- */
.ph-tp-scene { display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: end; gap: .6rem; max-width: 640px; margin: 0 auto 1.2rem; }
.ph-tp-pod { position: relative; height: 170px; border-radius: 90px 90px 16px 16px; border: 2px solid rgba(255,255,255,.28); background: rgba(255,255,255,.05); display: grid; place-items: end center; padding-bottom: 1.9rem; overflow: hidden; }
.ph-tp-pod small { position: absolute; bottom: .45rem; font: 800 .74rem var(--sans); letter-spacing: .08em; color: rgba(255,255,255,.75); }
.ph-tp-mars { border-color: rgba(255,157,122,.6); background: rgba(181,84,47,.16); }
.ph-tp-fig svg { width: 58px; height: 106px; fill: #f3e3b8; transition: opacity 1.2s ease, fill 1.2s ease, transform 1.2s ease; }
.ph-tp-mars .ph-tp-fig svg { opacity: 0; fill: #ffd36e; }
.ph-tp-beam { display: flex; justify-content: space-between; align-items: center; height: 170px; padding: 0 .4rem; }
.ph-tp-beam i { width: 12px; height: 12px; border-radius: 50%; background: #9fc3ea; opacity: .15; }
[data-scene="destroy"] .ph-tp-beam i, [data-scene="both"] .ph-tp-beam i { animation: ph-tp-beam 1.2s ease-in-out 2; }
.ph-tp-beam i:nth-child(2) { animation-delay: .2s !important; } .ph-tp-beam i:nth-child(3) { animation-delay: .4s !important; }
@keyframes ph-tp-beam { 50% { opacity: 1; transform: scale(1.5); } }
[data-scene="destroy"] .ph-tp-earth .ph-tp-fig svg { opacity: .08; transform: scale(.85); transition-delay: .5s; }
[data-scene="destroy"] .ph-tp-mars .ph-tp-fig svg, [data-scene="both"] .ph-tp-mars .ph-tp-fig svg, [data-scene="heart"] .ph-tp-mars .ph-tp-fig svg { opacity: 1; transition-delay: 1.4s; }
[data-scene="heart"] .ph-tp-earth .ph-tp-fig svg { fill: #ff9d7a; animation: ph-tp-heart 1.1s ease-in-out infinite; }
[data-scene="heart"] .ph-tp-mars .ph-tp-fig svg { transition-delay: 0s; }
@keyframes ph-tp-heart { 50% { opacity: .5; } }
.ph-tp-text h4 { margin: 0 0 .5rem; font: 600 1.45rem var(--serif); color: #ffd98a; }
.ph-tp-text h4 span { font: 600 .65em var(--zh); color: rgba(255,255,255,.7); margin-left: .5em; }
.ph-tp-text > p { margin: 0; font: 400 1.08rem/1.7 var(--serif); color: #eef2f8; max-width: 66ch; }
.ph-tp-text .ph-zh { font: 400 .95rem/1.8 var(--zh); color: rgba(255,255,255,.72); }
.ph-tp-text .ph-vl-q { margin-top: 1.1rem; }
.ph-tp-opts { margin-top: .8rem; }
.ph-tp-opts .ph-vl-opt { text-align: left; }
.ph-tp-k { display: block; font: 800 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.ph-tp .ph-vl-card p { margin: 0; font-size: 1.04rem; line-height: 1.7; }
@media (max-width: 560px) { .ph-tp-pod { height: 130px; } .ph-tp-beam { height: 130px; } .ph-tp-fig svg { width: 42px; height: 78px; } }
@media (prefers-reduced-motion: reduce) { .ph-tp-fig svg { transition: none; } .ph-tp-beam i { animation: none !important; } }

/* ---------- 書架 D：佛法與西方哲學對照 ---------- */
.ph-dlink { margin-top: 1.6rem; }
.ph-dw-term { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.2rem; }
.ph-dw-term > span { font: 700 clamp(3rem, 9vw, 5rem)/1 var(--zh); color: var(--brand-dk); }
.ph-dw-term i { font: italic 1.25rem 'Times New Roman', Times, serif; color: var(--gold-dk); }
.ph-dw-term small { font: 700 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ph-dw-term b { display: block; font: 600 1.5rem var(--serif); color: var(--ink); }
.ph-dw-cards { display: grid; gap: 1.1rem; }
.ph-dw-card { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--gold); border-radius: 0 16px 16px 0; padding: 1.2rem 1.5rem 1rem; box-shadow: var(--shadow-sm); }
.ph-dw-card:first-child { border-left-color: var(--ph-terra); }
.ph-dw-card:last-child { border-left-color: var(--brand); }
.ph-dw-role { margin: 0; font: 800 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.ph-dw-card h3 { margin: .2rem 0 .7rem; font: 600 1.5rem var(--serif); color: var(--brand-dk); display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .5em; }
.ph-dw-card h3 a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.ph-dw-card h3 i { font: normal 700 .85rem var(--sans); color: var(--ink-soft); margin-left: auto; }
.ph-dw-card .ph-p { margin: 0; }
.ph-dw-card .ph-en { font: 400 1.1rem/1.75 var(--serif); }
.ph-dw-tablewrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.ph-dw-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.ph-dw-table th, .ph-dw-table td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: .98rem; line-height: 1.5; }
.ph-dw-table thead th { background: var(--ph-night); color: #fff; font: 700 .95rem var(--sans); }
.ph-dw-table thead th:nth-child(2) { background: var(--brand-dk); }
.ph-dw-table tbody th { font-weight: 700; color: var(--brand-dk); width: 20%; background: var(--cream); }
.ph-dw-table tbody td:nth-child(2) { background: var(--brand-lt); }
.ph-dw-table span { display: block; font: 400 .86rem/1.5 var(--zh); color: var(--ink-soft); margin-top: .15rem; }
.ph-dw-table thead th span { color: rgba(255,255,255,.75); }
.ph-dw-terms { min-width: 560px; }
.ph-dw-terms td:first-child { font: 700 1.15rem var(--zh); color: var(--brand-dk); }
.ph-dw-terms td i { font: italic 1.05rem 'Times New Roman', Times, serif; color: var(--gold-dk); }
.ph-dw-terms tbody td:nth-child(2) { background: none; }
.ph-dw-sub { margin: 2.2rem 0 .8rem; font: 600 1.4rem var(--serif); color: var(--brand-dk); }
.ph-dw-lines { list-style: none; counter-reset: dw; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ph-dw-lines li { counter-increment: dw; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem 1rem 3.6rem; }
.ph-dw-lines li::before { content: counter(dw); position: absolute; left: 1rem; top: 1rem; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font: 800 .9rem var(--sans); }
.ph-dw-lines .ph-p { margin: 0; }
.ph-dw-lines .ph-en { font: 500 1.15rem/1.6 var(--serif); }
.ph-dw-lines .ph-p .ph-spk { position: static; float: right; margin: 0 0 .3rem .8rem; opacity: .8; }
.ph-dw-avoid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .8rem; }
.ph-dw-avoid > div { background: #fbf1ec; border: 1px solid #f0d6c8; border-radius: 14px; padding: .9rem 1.1rem; }
.ph-dw-x { margin: 0 0 .3rem; font: 600 1.1rem var(--serif); color: var(--ph-terra); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ph-dw-x span { display: block; font: 400 .9rem var(--zh); text-decoration: none; }
.ph-dw-avoid .ph-p { margin: 0; }
.ph-dw-avoid .ph-en { font: 400 1rem/1.6 var(--sans); }

/* ---- A14：瑪麗的房間＋心靈的階梯 ---- */
.ph-md [hidden] { display: none !important; }
.ph-md-part + .ph-md-part { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px dashed rgba(255,255,255,.2); }
.ph-md .ph-el-src span { font: 700 .95em var(--zh); letter-spacing: .02em; margin-left: .5em; color: rgba(255,255,255,.75); text-transform: none; }
.ph-md-room { margin: 1.3rem 0 1.1rem; display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; padding: 1rem; border-radius: 18px; background: #26282c; border: 1px solid #55585e; filter: grayscale(1); transition: filter 2.2s ease .5s, background 2.2s ease .5s; }
.ph-md-room[data-open="1"] { filter: none; background: #23344a; }
.ph-md-screen { display: grid; gap: .6rem; align-content: start; }
.ph-md-fact { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; gap: .2rem; padding: .7rem 2.4rem .8rem .9rem; border-radius: 12px; background: #17181b; border: 1.5px solid #6a6d73; transition: border-color .2s, background .2s; }
.ph-md-fact:hover { border-color: #fff; }
.ph-md-fact:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-md-fact small { font: 800 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #b9bcc2; }
.ph-md-fact small span { font-family: var(--zh); letter-spacing: 0; }
.ph-md-fact b { font: 500 1rem/1.5 var(--serif); color: #fff; }
.ph-md-fact > span { font: .88rem/1.65 var(--zh); color: rgba(255,255,255,.7); }
.ph-md-fact b, .ph-md-fact > span { filter: blur(5px); opacity: .55; transition: filter .5s, opacity .5s; }
.ph-md-fact.is-read b, .ph-md-fact.is-read > span { filter: none; opacity: 1; }
.ph-md-fact i { position: absolute; top: .6rem; right: .8rem; font: normal 800 1rem var(--sans); color: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s cubic-bezier(.2,1.6,.4,1); }
.ph-md-fact.is-read i { opacity: 1; transform: none; }
.ph-md-fact:not(.is-read)::after { content: "Tap to read · 點開來讀"; position: absolute; inset: auto 0 .55rem 0; text-align: center; font: 700 .78rem var(--sans); color: #fff; }
.ph-md-win { position: relative; min-height: 220px; border-radius: 12px; overflow: hidden; border: 3px solid #8a8d93; background: #f6ecd2; }
.ph-md-out { position: absolute; inset: 0; display: grid; place-items: center; }
.ph-md-out svg { width: min(78%, 240px); max-height: 84%; transform: scale(.7); transition: transform 1.6s cubic-bezier(.2,.9,.3,1) .6s; }
[data-open="1"] .ph-md-out svg { transform: none; }
.ph-md-door { position: absolute; inset: 0; background: linear-gradient(90deg, #3a3c41, #55585e 48%, #2c2e32 50%, #55585e 52%, #3a3c41); transition: transform 1.3s cubic-bezier(.6,0,.3,1); }
.ph-md-door span { position: absolute; top: 50%; right: 16%; width: 12px; height: 12px; border-radius: 50%; background: #c9ccd2; }
[data-open="1"] .ph-md-door { transform: translateX(102%); }
.ph-md-act { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .4rem; }
.ph-md .ph-vl-next[disabled] { opacity: .35; cursor: default; transform: none; }
.ph-md .ph-vl-next span { font-family: var(--zh); }
.ph-md [data-md-after] { margin-top: 1.4rem; animation: ph-rise .6s ease 1.6s both; }
.ph-md .ph-vl-opt[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-md-ends { display: flex; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 .3rem; font: 700 .78rem var(--sans); color: #9fc3ea; }
.ph-md-ends i { font: normal .95em var(--zh); opacity: .85; }
.ph-md-rows { display: grid; gap: .15rem; }
.ph-md-row { display: grid; grid-template-columns: minmax(0, 15rem) 1fr 2.6rem; gap: .4rem 1rem; align-items: center; padding: .55rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.ph-md-name b { display: block; font: 600 1.02rem/1.3 var(--serif); color: #fff; }
.ph-md-name i { font: normal .86rem var(--zh); color: rgba(255,255,255,.68); }
.ph-md-row input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.ph-md-row input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #44546b, #9fc3ea 50%, #ffd36e); }
.ph-md-row input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #44546b, #9fc3ea 50%, #ffd36e); }
.ph-md-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: #8a94a3; border: 3px solid #fff; transition: background .2s, transform .2s; }
.ph-md-row input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #8a94a3; border: 3px solid #fff; }
.ph-md-row input.is-set::-webkit-slider-thumb { background: #ffd36e; transform: scale(1.08); }
.ph-md-row input.is-set::-moz-range-thumb { background: #ffd36e; }
.ph-md-row input[type=range]:focus-visible { outline: 2px solid #ffd36e; outline-offset: 4px; border-radius: 99px; }
.ph-md-row output { font: 700 1.05rem var(--sans); color: #ffd98a; text-align: right; font-variant-numeric: tabular-nums; }
.ph-md-vh { margin-top: 2rem !important; }
.ph-md-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ph-md-vgrid .ph-vl-card { align-content: start; }
.ph-md .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-md .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-md .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
@media (max-width: 720px) {
  .ph-md-room { grid-template-columns: 1fr; }
  .ph-md-win { min-height: 180px; }
  .ph-md-row { grid-template-columns: 1fr 2.6rem; }
  .ph-md-name { grid-column: 1 / -1; }
  .ph-md-vgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-md-room, .ph-md-door, .ph-md-out svg, .ph-md-fact b, .ph-md-fact > span { transition: none; }
  .ph-md [data-md-after] { animation: none; }
}

/* ---- A15：坐進房間 ---- */
.ph-rm [hidden] { display: none !important; }
.ph-ka { font-family: 'Noto Sans Georgian', 'Helvetica Neue', 'Segoe UI', 'DejaVu Sans', sans-serif; font-size: 1.3rem; line-height: 1.5; letter-spacing: .01em; }
.ph-rm-desk { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; transition: opacity .6s; }
.ph-rm-desk.is-done { opacity: .45; pointer-events: none; }
.ph-rm-desk small, .ph-rm-line small { display: block; font: 800 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #ffd98a; margin-bottom: .5rem; }
.ph-rm-slot, .ph-rm-book, .ph-rm-tray { border-radius: 16px; padding: 1rem 1.1rem 1.1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.ph-rm-slot { background: rgba(0,0,0,.28); display: grid; align-content: start; }
.ph-rm-slip { min-height: 4.6rem; display: grid; place-items: center; padding: .9rem 1rem; border-radius: 4px; background: #fbf5e4; color: #1b2a3d; box-shadow: 0 10px 22px -12px rgba(0,0,0,.8); text-align: center; }
.ph-rm-slip:empty { background: transparent; box-shadow: none; border: 1.5px dashed rgba(255,255,255,.25); }
.ph-rm-slip.is-in { animation: ph-rm-in .6s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ph-rm-in { from { transform: translateX(-70%) rotate(-5deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ph-rm-slip .ph-ka { font-size: 1.5rem; font-weight: 600; }
.ph-rm-hint { margin: .7rem 0 0; font-size: .88rem; color: rgba(255,255,255,.7); }
.ph-rm-hint span { display: block; font-family: var(--zh); }
.ph-rm-book .ph-rm-hint { margin: 0 0 .6rem; }
.ph-rm-rule { display: grid; grid-template-columns: 1fr 1.6rem 1fr; gap: .5rem; align-items: center; padding: .55rem 0; border-top: 1px dashed rgba(255,255,255,.18); color: #fff; }
.ph-rm-rule i { font-style: normal; color: #ffd36e; text-align: center; }
.ph-rm-tray { grid-column: 1 / -1; }
.ph-rm-cards { display: flex; flex-wrap: wrap; gap: .7rem; }
.ph-rm-card { all: unset; box-sizing: border-box; cursor: pointer; padding: .7rem 1.1rem; border-radius: 4px; background: #fbf5e4; color: #1b2a3d; box-shadow: 0 8px 18px -10px rgba(0,0,0,.8); transition: transform .2s, opacity .4s; }
.ph-rm-card:hover { transform: translateY(-4px) rotate(-1deg); }
.ph-rm-card:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-rm-card.is-no { animation: ph-rm-no .4s; }
@keyframes ph-rm-no { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ph-rm-card.is-out { transform: translateY(-40px); opacity: 0; pointer-events: none; }
.ph-rm-msg { min-height: 1.6em; margin: .8rem 0 0; font: 600 .95rem var(--sans); color: #ff9d7a; }
.ph-rm-outside { margin-top: .6rem; }
.ph-rm .ph-rm-voice { font: italic 600 1.45rem/1.4 var(--serif) !important; color: #ffd98a !important; }
.ph-rm [data-rm-end] > .ph-tp-text + .ph-tp-text { margin-top: 1.2rem; }
.ph-rm-talk { display: grid; gap: .6rem; margin: 1rem 0 1.6rem; }
.ph-rm-line { max-width: min(34rem, 88%); padding: .8rem 1.1rem .9rem; border-radius: 4px 16px 16px 16px; background: #fff; color: var(--ink); display: grid; gap: .1rem; animation: ph-rise .45s ease both; }
.ph-rm-line.is-you { justify-self: end; border-radius: 16px 16px 4px 16px; background: #dcebfb; }
.ph-rm-line small { color: var(--gold-dk); margin-bottom: .2rem; }
.ph-rm-line b { font: 600 1.08rem var(--serif); }
.ph-rm-line > span:last-child { font: .92rem var(--zh); color: var(--ink-soft); }
.ph-rm-ask + .ph-rm-ask { margin-top: 1.8rem; }
.ph-rm .ph-vl-opt[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-rm .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-rm .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-rm .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-rm .ph-md-vgrid .ph-vl-card { align-content: start; }
.ph-rm-more { all: unset; cursor: pointer; justify-self: start; font: 800 .82rem var(--sans); color: var(--ph-terra); border: 1.5px solid currentColor; padding: .35rem .85rem; border-radius: 999px; }
.ph-rm-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ph-rm-searle { border-left: 3px solid var(--ph-terra); padding-left: .9rem; display: grid; gap: .5rem; }
@media (max-width: 720px) { .ph-rm-desk { grid-template-columns: 1fr; } .ph-ka { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .ph-rm-slip.is-in, .ph-rm-card.is-no, .ph-rm-line { animation: none; } .ph-rm-card { transition: none; } }

/* ---- A16：把車拆開＋休謨的內觀 ---- */
.ph-sh [hidden] { display: none !important; }
.ph-sh .ph-el-src span { font: 700 .95em var(--zh); letter-spacing: .02em; margin-left: .5em; color: rgba(255,255,255,.75); text-transform: none; }
.ph-sh .ph-rm-voice { font: italic 600 1.35rem/1.45 var(--serif) !important; color: #ffd98a !important; }
.ph-sh .ph-rm-hint { margin: .5rem 0 0; font-size: .9rem; color: rgba(255,255,255,.7); }
.ph-sh .ph-rm-hint span { font-family: var(--zh); }
.ph-sh-scene { margin: 1rem auto .4rem; max-width: 560px; }
.ph-sh-scene svg { width: 100%; height: auto; overflow: visible; }
.ph-sh-ground { stroke: rgba(255,255,255,.25); stroke-width: 2; stroke-dasharray: 3 7; }
.ph-sh-part { cursor: pointer; stroke: #f3e3b8; fill: #f3e3b8; transition: transform .7s cubic-bezier(.3,.9,.3,1), opacity .7s, stroke .2s, fill .2s; transform-box: fill-box; transform-origin: center; outline: none; }
.ph-sh-part:hover, .ph-sh-part:focus-visible { stroke: #ffd36e; fill: #ffd36e; filter: drop-shadow(0 0 6px rgba(255,211,110,.7)); }
.ph-sh-part.is-off { opacity: .1; transform: translateY(26px) rotate(-8deg); pointer-events: none; }
.ph-sh.is-whole .ph-sh-part.is-off { opacity: 1; transform: none; stroke: #4fd1a5; fill: #4fd1a5; }
.ph-sh-aside { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.ph-sh-aside small { font: 800 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9fc3ea; }
.ph-sh-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ph-sh-chip { font: 700 .86rem var(--sans); padding: .25rem .7rem; border-radius: 999px; border: 1.5px dashed rgba(255,255,255,.25); color: rgba(255,255,255,.35); transition: all .4s; }
.ph-sh-chip i { font: normal .95em var(--zh); }
.ph-sh-chip.is-on { border-style: solid; border-color: #ffd36e; color: #ffd98a; background: rgba(255,211,110,.12); }
.ph-sh-msg { min-height: 3.2em; margin: .9rem 0 0; font: 400 1.02rem/1.6 var(--serif); color: #eef2f8; }
.ph-sh [data-sh-end] { animation: ph-rise .6s ease both; }
.ph-sh-opts { grid-template-columns: 1fr; }
.ph-sh .ph-vl-opt { text-align: left; }
.ph-sh .ph-vl-opt[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-sh .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-sh .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-sh .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-sh .ph-vl-next span, .ph-sh .ph-el-reset span { font-family: var(--zh); }
.ph-sh .ph-vl-next[disabled] { opacity: .35; cursor: default; transform: none; }
.ph-sh-act { margin-top: 1rem; }
.ph-sh-clock { position: relative; width: 140px; height: 140px; margin: 1.4rem auto; display: grid; place-items: center; }
.ph-sh-clock svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ph-sh-clock circle { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 8; }
.ph-sh-clock .ph-sh-ring { stroke: #ffd36e; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ph-sh-clock b { font: 600 2.6rem var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
.ph-sh-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1.2rem 0 1rem; }
.ph-sh-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .05rem; padding: .7rem 1rem .75rem 2.7rem; position: relative; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); transition: border-color .2s, background .2s; }
.ph-sh-item::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -.6rem; border-radius: 5px; border: 2px solid rgba(255,255,255,.5); box-sizing: border-box; }
.ph-sh-item[aria-pressed="true"] { border-color: #ffd36e; background: rgba(255,211,110,.14); }
.ph-sh-item[aria-pressed="true"]::before { background: #ffd36e; border-color: #ffd36e; box-shadow: inset 0 0 0 3px var(--ph-night); }
.ph-sh-item:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-sh-item b { font: 600 1rem var(--sans); color: #fff; }
.ph-sh-item span { font: .88rem var(--zh); color: rgba(255,255,255,.7); }
@media (max-width: 720px) { .ph-sh-items { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ph-sh-part, .ph-sh-clock .ph-sh-ring { transition: none; } .ph-sh [data-sh-end] { animation: none; } }

/* ---- A17：電車難題 ---- */
.ph-ty-scene { max-width: 720px; margin: 0 auto 1.2rem; border-radius: 16px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.12); }
.ph-ty-scene svg { display: block; width: 100%; height: auto; }
.ph-ty-rail { fill: none; stroke: #8fa3bd; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 9; }
.ph-ty-knob { fill: #ffd36e; } .ph-ty-lever { stroke: #ffd36e; stroke-width: 5; stroke-linecap: round; }
.ph-ty-bridge { fill: #3c5373; stroke: #9fc3ea; stroke-width: 2; } .ph-ty-bline { stroke: #9fc3ea; stroke-width: 2; }
.ph-ty-fig circle, .ph-ty-fig path { fill: #f3e3b8; transition: fill .5s, opacity .5s; }
.ph-ty-fig.is-big circle { r: 8px; } .ph-ty-fig.is-big path { transform: scale(1.35, 1.05); }
.ph-ty-fig.is-you circle, .ph-ty-fig.is-you path { fill: #4fd1a5; }
[data-tr-fig] { transition: transform .9s cubic-bezier(.4,0,.6,1); }
[data-tr-fig="big"].is-down { transform: translate(0, 40px); }
[data-tr-fig].is-hit .ph-ty-fig circle, [data-tr-fig].is-hit .ph-ty-fig path { fill: transparent; stroke: #ff9d7a; stroke-width: 1.5; stroke-dasharray: 3 3; }
.ph-ty-lbl { font: 700 12px var(--sans); fill: rgba(255,255,255,.75); }
.ph-ty-car rect { fill: #d9a94a; stroke: #fff; stroke-width: 2; } .ph-ty-car path { stroke: rgba(12,24,44,.55); stroke-width: 2; }
.ph-ty-bed { fill: #2f5d8f; stroke: #9fc3ea; stroke-width: 1.5; } .ph-ty-head { fill: #f3e3b8; } .ph-ty-sheet { fill: #dcebfb; }
.ph-ty .s-switch, .ph-ty .s-bridge, .ph-ty .s-loop, .ph-ty .s-three, .ph-ty .s-ward { display: none; }
.ph-ty[data-scene="switch"] .s-switch, .ph-ty[data-scene="bridge"] .s-bridge, .ph-ty[data-scene="loop"] .s-loop, .ph-ty[data-scene="three"] .s-three, .ph-ty[data-scene="ward"] .s-ward { display: inline; }
.ph-ty[data-scene="ward"] .ph-ty-tracks { display: none; }
.ph-ty-opts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ph-ty .ph-vl-opt[disabled] { cursor: default; opacity: .5; } .ph-ty .ph-vl-opt.is-right { opacity: 1; border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-ty .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-ty .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-ty .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-ty .ph-vl-card.is-sound { border-top-color: var(--ph-terra); }
@media (prefers-reduced-motion: reduce) { [data-tr-fig], .ph-ty-fig circle, .ph-ty-fig path { transition: none; } }

/* ---- A18：三個兩難、四位顧問 ---- */
.ph-av-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ph-av-card { align-content: start; border-top-color: #9fb0c6; }
.ph-av-card.is-with { border-top-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,211,110,.55); }
.ph-av-tag { justify-self: start; font: normal 800 .72rem var(--sans); letter-spacing: .04em; padding: .18rem .65rem; border-radius: 999px; background: #e8edf4; color: #4a5a70; margin-top: -.5rem; }
.ph-av-card.is-with .ph-av-tag { background: var(--brand-lt); color: var(--brand-dk); }
.ph-av .ph-vl-card p { margin: 0; font: 400 1.02rem/1.7 var(--serif); }
.ph-av .ph-vl-card .ph-zh { font: 400 .94rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-av .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-av .ph-vl-opt[disabled] { cursor: default; opacity: .5; } .ph-av .ph-vl-opt.is-right { opacity: 1; border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-av-bars { display: grid; gap: .5rem; margin: .6rem 0 1.1rem; }
.ph-av-bar { display: grid; grid-template-columns: 11rem 1fr 3rem; gap: .8rem; align-items: center; }
.ph-av-bar b { font: 600 1rem var(--serif); color: #fff; }
.ph-av-bar span { height: 12px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.ph-av-bar i { display: block; height: 100%; border-radius: 99px; background: #ffd36e; transition: width .8s cubic-bezier(.2,.9,.3,1); }
.ph-av-bar em { font: normal 700 .92rem var(--sans); color: #ffd98a; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .ph-av-grid { grid-template-columns: 1fr; } .ph-av-bar { grid-template-columns: 7.5rem 1fr 2.6rem; } }

/* ---- A19：戴上戒指 ---- */
.ph-rg [hidden] { display: none !important; }
.ph-rg-top { display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem; align-items: center; margin-bottom: 1.2rem; }
.ph-rg-art { width: 100%; height: auto; }
.ph-rg-fig circle, .ph-rg-fig path { fill: #f3e3b8; stroke: #f3e3b8; stroke-width: 2; transition: fill 1.4s ease, stroke-dasharray 1.4s ease, opacity 1.4s ease; }
.ph-rg[data-on="1"] .ph-rg-fig circle, .ph-rg[data-on="1"] .ph-rg-fig path { fill: transparent; stroke-dasharray: 4 6; opacity: .55; }
.ph-rg-ring ellipse { fill: #d9a94a; } .ph-rg-ring .ph-rg-hole { fill: var(--ph-night); }
.ph-rg-gem { fill: #ffd36e; transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.3,1.4,.4,1), fill 1s; }
.ph-rg[data-on="1"] .ph-rg-gem { transform: translateY(76px) rotate(180deg); fill: #4fd1a5; }
.ph-rg .ph-rm-voice { font: italic 600 1.25rem/1.45 var(--serif) !important; color: #ffd98a !important; }
.ph-rg .ph-vl-next span { font-family: var(--zh); }
.ph-rg-reasons { grid-template-columns: 1fr 1fr; }
.ph-rg .ph-vl-opt { text-align: left; }
.ph-rg .ph-vl-opt[disabled] { cursor: default; opacity: .45; } .ph-rg .ph-vl-opt.is-right { opacity: 1; border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-rg [data-rg-why] { margin-top: 1.2rem; animation: ph-rise .45s ease both; }
.ph-rg .ph-av-bar { grid-template-columns: 13rem 1fr 3rem; }
@media (max-width: 720px) { .ph-rg-top { grid-template-columns: 110px 1fr; gap: .9rem; } .ph-rg-reasons { grid-template-columns: 1fr; } .ph-rg .ph-av-bar { grid-template-columns: 8.5rem 1fr 2.6rem; } }
@media (prefers-reduced-motion: reduce) { .ph-rg-fig circle, .ph-rg-fig path, .ph-rg-gem { transition: none; } .ph-rg [data-rg-why] { animation: none; } }

/* ---- A20：六份證據 ---- */
.ph-ev [hidden] { display: none !important; }
.ph-ev-reads { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ph-ev-side { align-content: start; } .ph-ev-side.is-g { border-top-color: #4fd1a5; } .ph-ev-side.is-b { border-top-color: var(--ph-terra); }
.ph-ev .ph-vl-card p { margin: 0; font: 400 1.02rem/1.7 var(--serif); }
.ph-ev .ph-vl-card .ph-zh { font: 400 .94rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-ev .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-ev-slide { margin-top: 1.4rem; padding: 1rem 1.2rem 1.2rem; border-radius: 16px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.12); }
.ph-ev-slide .ph-md-ends { margin-top: 0; }
.ph-ev-row { grid-template-columns: 1fr 3rem; border-top: 0; }
.ph-ev-row input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ff9d7a, #9fb0c6 50%, #4fd1a5); }
.ph-ev-row input[type=range]::-moz-range-track { background: linear-gradient(90deg, #ff9d7a, #9fb0c6 50%, #4fd1a5); }
.ph-ev-row input[type=range]::-webkit-slider-thumb { background: #ffd36e; }
.ph-ev-row input[type=range]::-moz-range-thumb { background: #ffd36e; }
.ph-ev .ph-vl-next span { font-family: var(--zh); }
.ph-ev-chart { display: block; width: 100%; max-width: 620px; height: auto; margin: .6rem 0 1.1rem; }
.ph-ev-chart .grid { stroke: rgba(255,255,255,.14); stroke-width: 1; } .ph-ev-chart .mid { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 4 5; }
.ph-ev-chart .ax { font: 700 11px var(--sans); fill: rgba(255,255,255,.65); }
.ph-ev-chart .line { fill: none; stroke: #ffd36e; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ph-ev-chart .pt { fill: var(--ph-night); stroke: #ffd36e; stroke-width: 3; }
.ph-ev .ph-el-end p.ph-ev-zone { margin-top: 1rem; }
@media (max-width: 720px) { .ph-ev-reads { grid-template-columns: 1fr; } }

/* ---- A21：體驗機 ---- */
.ph-mc-tank { max-width: 380px; margin: 0 auto 1rem; }
.ph-mc-tank svg { display: block; width: 100%; height: auto; overflow: visible; }
.ph-mc-glass { fill: rgba(159,195,234,.08); stroke: #9fc3ea; stroke-width: 2.5; }
.ph-mc-water { fill: rgba(79,209,165,.0); transition: fill 1.2s ease; }
.ph-mc-body circle, .ph-mc-body rect { fill: #f3e3b8; opacity: .18; transition: opacity 1.2s ease; }
.ph-mc-wire { fill: none; stroke: #9fc3ea; stroke-width: 2.5; stroke-dasharray: 5 6; opacity: .3; transition: opacity 1.2s ease, stroke 1.2s ease; }
.ph-mc-lamp { fill: #55585e; transition: fill 1.2s ease; }
.ph-mc[data-in="1"] .ph-mc-water { fill: rgba(79,209,165,.28); }
.ph-mc[data-in="1"] .ph-mc-body circle, .ph-mc[data-in="1"] .ph-mc-body rect { opacity: 1; }
.ph-mc[data-in="1"] .ph-mc-wire { opacity: 1; stroke: #ffd36e; }
.ph-mc[data-in="1"] .ph-mc-lamp { fill: #ffd36e; }
.ph-mc .ph-sh-item[disabled] { opacity: .4; cursor: default; }
.ph-mc .ph-vl-opt { text-align: left; }
.ph-mc-sum { font: 700 .92rem/1.6 var(--sans) !important; color: #9fc3ea; margin-bottom: .8rem !important; }
.ph-mc .ph-el-end p.ph-ev-zone { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .ph-mc-water, .ph-mc-body circle, .ph-mc-body rect, .ph-mc-wire, .ph-mc-lamp { transition: none; } }

/* ---- A22：十二件事、三個籃子 ---- */
.ph-so [hidden] { display: none !important; }
.ph-so-dots i { width: 14px; }
.ph-so-card { max-width: 30rem; min-height: 7rem; margin: .4rem auto 1.4rem; padding: 1.4rem 1.6rem; border-radius: 6px; background: #fbf5e4; color: #1b2a3d; display: grid; place-items: center; gap: .2rem; text-align: center; box-shadow: 0 16px 30px -16px rgba(0,0,0,.85); }
.ph-so-card.is-in { animation: ph-rise .4s ease both; }
.ph-so-card b { font: 600 1.5rem/1.3 var(--serif); }
.ph-so-card span { font: 1rem var(--zh); color: #55606f; }
.ph-so-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.ph-so-bin { all: unset; box-sizing: border-box; cursor: pointer; position: relative; text-align: center; padding: 1.1rem .8rem 1.2rem; border-radius: 14px 14px 22px 22px; border: 2px solid rgba(255,255,255,.25); border-top-width: 6px; background: rgba(255,255,255,.06); display: grid; gap: .1rem; transition: transform .2s, background .2s; }
.ph-so-bin:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); }
.ph-so-bin:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-so-bin.is-up { border-color: #4fd1a5; } .ph-so-bin.is-part { border-color: #ffd36e; } .ph-so-bin.is-not { border-color: #9fb0c6; }
.ph-so-bin b { font: 700 1.08rem var(--sans); color: #fff; }
.ph-so-bin span { font: .9rem var(--zh); color: rgba(255,255,255,.72); }
.ph-so-bin i { position: absolute; top: .5rem; right: .7rem; font: normal 800 .8rem var(--sans); color: rgba(255,255,255,.6); }
.ph-so-wrap { overflow-x: auto; margin: .6rem 0 1rem; }
.ph-so-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.ph-so-table th, .ph-so-table td { padding: .5rem .6rem; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; vertical-align: top; }
.ph-so-table th b { display: block; font: 600 .98rem/1.3 var(--serif); color: #fff; }
.ph-so-table th span, .ph-so-table td span { display: block; font: .82rem var(--zh); color: rgba(255,255,255,.65); }
.ph-so-table tr:first-child th b { font: 800 .76rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #ffd98a; }
.ph-so-table td b { font: 700 .86rem var(--sans); }
.ph-so-table td.is-up b { color: #4fd1a5; } .ph-so-table td.is-part b { color: #ffd36e; } .ph-so-table td.is-not b { color: #b9c6d8; }
.ph-so-table td.same { background: rgba(255,255,255,.07); }
@media (max-width: 720px) { .ph-so-bins { grid-template-columns: 1fr; } .ph-so-card b { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .ph-so-card.is-in { animation: none; } .ph-so-bin { transition: none; } }

/* ---- A23：三位朋友 ---- */
.ph-fr [hidden] { display: none !important; }
.ph-fr .ph-vl-opt[disabled] { opacity: .5; }
.ph-fr .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-fr .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-fr .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-fr-kind { margin: 0; font: 600 1.5rem/1.2 var(--serif); color: var(--brand-dk); }
.ph-fr-kind span { font: 600 .68em var(--zh); margin-left: .5em; color: var(--ink-soft); }
.ph-fr-marks { display: flex; flex-wrap: wrap; gap: .4rem; }
.ph-fr-marks span { font: 700 .8rem var(--zh); padding: .2rem .7rem; border-radius: 999px; border: 1.5px dashed #b9c2cf; color: #8a94a3; }
.ph-fr-marks span.on { border-style: solid; border-color: var(--gold); background: #fdf3d6; color: #7a5a12; }
.ph-fr .ph-el-end .ph-fr-marks span { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.4); }
.ph-fr .ph-el-end .ph-fr-marks span.on { border-color: #ffd36e; background: rgba(255,211,110,.14); color: #ffd98a; }
.ph-fr .ph-vl-next span, .ph-fr .ph-el-reset span { font-family: var(--zh); }
.ph-fr [data-fr-act] { margin-top: 1.2rem; }
.ph-fr-row { display: grid; grid-template-columns: 9rem 1fr auto; gap: .6rem 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.ph-fr-row b { font: 600 1.02rem var(--serif); color: #fff; }
.ph-fr-k { font: 700 .92rem var(--sans); }
.ph-fr-k.is-use { color: #b9c6d8; } .ph-fr-k.is-fun { color: #9fc3ea; } .ph-fr-k.is-way { color: #ffd36e; } .ph-fr-k.is-whole { color: #4fd1a5; }
.ph-fr .ph-el-end > p:not(.ph-zh) { margin-top: 1rem; }
@media (max-width: 720px) { .ph-fr-row { grid-template-columns: 1fr; } }

/* ---- A24：六個池塘 ---- */
.ph-pd [hidden] { display: none !important; }
.ph-pd-ladder { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.ph-pd-chip { display: inline-flex; align-items: center; gap: .4rem; font: 700 .82rem var(--sans); padding: .3rem .8rem .3rem .35rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.2); color: rgba(255,255,255,.45); transition: all .35s; }
.ph-pd-chip b { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); font: 800 .78rem var(--sans); }
.ph-pd-chip i { font: normal .95em var(--zh); }
.ph-pd-chip.is-cur { border-color: #ffd36e; color: #ffd98a; } .ph-pd-chip.is-cur b { background: #ffd36e; color: var(--ph-night); }
.ph-pd-chip.is-yes { border-color: #4fd1a5; color: #b9f0dd; } .ph-pd-chip.is-yes b { background: #4fd1a5; color: var(--ph-night); }
.ph-pd-chip.is-stop { border-color: #ff9d7a; color: #ffd0bf; background: rgba(255,157,122,.12); } .ph-pd-chip.is-stop b { background: #ff9d7a; color: var(--ph-night); }
.ph-pd .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-pd .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-pd .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-pd .ph-el-src span { font: 700 .95em var(--zh); letter-spacing: .02em; margin-left: .5em; color: rgba(255,255,255,.75); text-transform: none; }
.ph-pd .ph-md-vgrid .ph-vl-card { align-content: start; }

/* ---- A25：公共的鍋 ---- */
.ph-cm [hidden] { display: none !important; }
.ph-cm-chart svg { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto .8rem; }
.ph-cm-chart .ax { stroke: rgba(255,255,255,.3); stroke-width: 1; } .ph-cm-chart .sep { stroke: rgba(255,211,110,.6); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ph-cm-chart .lb { font: 700 10.5px var(--sans); fill: rgba(255,255,255,.7); }
.ph-cm-chart .b0 { fill: rgba(255,255,255,.07); } .ph-cm-chart .b1 { fill: #9fc3ea; } .ph-cm-chart .b2 { fill: #4fd1a5; }
.ph-cm-table { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.ph-cm-p { display: grid; grid-template-columns: 7rem 1fr 1.2fr 3.6rem auto; gap: .5rem .8rem; align-items: center; padding: .5rem .8rem; border-radius: 10px; background: rgba(255,255,255,.05); }
.ph-cm-p.is-you { background: rgba(255,211,110,.12); border: 1px solid rgba(255,211,110,.4); }
.ph-cm-p b { font: 600 1rem var(--serif); color: #fff; }
.ph-cm-c, .ph-cm-e { font: .86rem var(--sans); color: rgba(255,255,255,.75); }
.ph-cm-p em { font: normal 800 1rem var(--sans); color: #ffd98a; text-align: right; font-variant-numeric: tabular-nums; }
.ph-cm-fine { all: unset; cursor: pointer; font: 800 .76rem var(--sans); color: #ffd0bf; border: 1.5px solid #ff9d7a; padding: .2rem .7rem; border-radius: 999px; }
.ph-cm-fine:hover { background: rgba(255,157,122,.18); } .ph-cm-fine:focus-visible { outline: 2px solid #ffd36e; outline-offset: 2px; }
.ph-cm-fine span { font-family: var(--zh); }
.ph-cm-row input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #44546b, #ffd36e); }
.ph-cm-row input[type=range]::-moz-range-track { background: linear-gradient(90deg, #44546b, #ffd36e); }
.ph-cm .ph-vl-next span { font-family: var(--zh); }
.ph-cm .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-cm .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-cm .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-cm .ph-el-end .ph-vl-q { margin-top: 1.4rem; }
.ph-cm .ph-el-end p.ph-ev-zone:first-of-type { margin-top: 0; }
@media (max-width: 720px) { .ph-cm-p { grid-template-columns: 1fr 3.6rem; } .ph-cm-c, .ph-cm-e { grid-column: 1 / -1; } }

/* ---- A26：在知道之前先選（無知之幕） ---- */
.ph-vi [hidden] { display: none !important; }
.ph-vi-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: 1rem; }
.ph-vi-plan { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; padding: .9rem .9rem 1rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); transition: border-color .15s, background .15s, transform .15s; }
.ph-vi-plan:hover { border-color: #ffd36e; background: rgba(255,211,110,.1); transform: translateY(-2px); }
.ph-vi-plan:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-vi-plan b { font: 600 1.08rem var(--serif); color: #fff; }
.ph-vi-zh { font-family: var(--zh); }
.ph-vi-plan > .ph-vi-zh { font-size: .86rem; color: rgba(255,255,255,.7); }
.ph-vi svg { display: block; width: 100%; height: auto; margin: .5rem 0 .2rem; }
.ph-vi svg .b { fill: #9fc3ea; } .ph-vi svg .vd { fill: #7f8ba3; } .ph-vi svg .me { fill: #ffd36e; }
.ph-vi svg .ax { stroke: rgba(255,255,255,.3); stroke-width: 1; }
.ph-vi svg .lb { font: 700 10.5px var(--sans); fill: rgba(255,255,255,.72); } .ph-vi svg .lb.me { fill: #ffd98a; }
.ph-vi-plan em { font: normal 800 .74rem var(--sans); letter-spacing: .04em; color: #ffd98a; }
.ph-vi-d { font: .84rem/1.5 var(--sans); color: rgba(255,255,255,.78); margin-top: .3rem; }
.ph-vi-d.ph-vi-zh { font: .82rem/1.6 var(--zh); color: rgba(255,255,255,.6); margin-top: .1rem; }
.ph-vi-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: .6rem 0 1.2rem; }
.ph-vi-row { padding: .8rem .9rem; border-radius: 12px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; gap: .2rem; }
.ph-vi-row.is-veil { background: rgba(255,211,110,.1); border: 1px solid rgba(255,211,110,.4); }
.ph-vi-when { font: 800 .72rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.ph-vi-when span { display: block; font: .8rem var(--zh); letter-spacing: 0; text-transform: none; }
.ph-vi-row b { font: 600 1.02rem var(--serif); color: #fff; } .ph-vi-row b span { font: .86rem var(--zh); color: rgba(255,255,255,.7); }
.ph-vi .ph-vl-next span { font-family: var(--zh); }
@media (max-width: 900px) { .ph-vi-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ph-vi-rows { grid-template-columns: 1fr; } .ph-vi-row svg { max-width: 240px; } }

/* ---- A27：你來立法 ---- */
.ph-lb [hidden] { display: none !important; }
.ph-lb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.1rem 0 .4rem; max-width: 560px; }
.ph-lb-btn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: .85rem 1rem; border-radius: 12px; font: 800 1rem var(--sans); color: #fff; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); transition: background .15s, border-color .15s, transform .15s; }
.ph-lb-btn span { font-family: var(--zh); font-weight: 700; }
.ph-lb-btn.is-ban:not(:disabled):hover { border-color: #ff9d7a; background: rgba(255,157,122,.16); transform: translateY(-2px); }
.ph-lb-btn.is-allow:not(:disabled):hover { border-color: #4fd1a5; background: rgba(79,209,165,.16); transform: translateY(-2px); }
.ph-lb-btn:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-lb-btn:disabled { cursor: default; opacity: .5; }
.ph-lb-btn.is-mine { opacity: 1; border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-lb-btn.is-mill::after { content: " ✓ Mill"; font: 800 .72rem var(--sans); letter-spacing: .05em; color: #9be8cd; }
.ph-lb-btn.is-mill { opacity: 1; }
.ph-lb .ph-vl-dots i.no { background: #ff9d7a; }
.ph-lb .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-lb .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-lb .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-lb .ph-vl-card p.ph-lb-tag { font: 800 .8rem var(--sans); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .3rem; }
.ph-lb-tag span { font: 700 .86rem var(--zh); letter-spacing: 0; margin-left: .6rem; text-transform: none; }
.ph-lb .ph-vl-next span { font-family: var(--zh); }
@media (max-width: 480px) { .ph-lb-btns { grid-template-columns: 1fr; } }

/* ---- A28：孔多塞的陪審團 ---- */
.ph-jy [hidden] { display: none !important; }
.ph-jy-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem 2.2rem; align-items: start; }
.ph-jy-ctls { display: grid; gap: 1rem; }
.ph-jy-ctl { display: grid; grid-template-columns: 1fr 4.2rem; gap: .2rem .8rem; align-items: center; }
.ph-jy-ctl span { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.ph-jy-ctl b, .ph-jy-bar b { font: 800 .86rem var(--sans); color: #fff; letter-spacing: .02em; }
.ph-jy-ctl i, .ph-jy-bar i { font: normal .84rem var(--zh); color: rgba(255,255,255,.65); }
.ph-jy-ctl input[type=range] { width: 100%; accent-color: #ffd36e; }
.ph-jy-ctl output { font: 800 1.05rem var(--sans); color: #ffd98a; text-align: right; font-variant-numeric: tabular-nums; }
.ph-jy-bars { display: grid; gap: 1.1rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); }
.ph-jy-bar { display: grid; grid-template-columns: 1fr 5rem; gap: .35rem .8rem; align-items: center; }
.ph-jy-bar span { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.ph-jy-bar div { height: 14px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ph-jy-bar u { display: block; height: 100%; width: 0; border-radius: 999px; background: #9fc3ea; transition: width .25s ease; text-decoration: none; }
.ph-jy-bar.is-maj u { background: #ffd36e; }
.ph-jy-bar em { font: normal 800 1.15rem var(--sans); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.ph-jy-bar.is-maj em { color: #ffd98a; font-size: 1.4rem; }
.ph-jy-dots svg { display: block; width: 100%; height: auto; margin: 1rem 0 .2rem; }
.ph-jy-dots .ok { fill: #4fd1a5; } .ph-jy-dots .no { fill: #ff9d7a; }
.ph-jy-finds { margin-top: 1.6rem; display: grid; gap: .7rem; }
.ph-jy-h { margin: 0; font: 800 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #ffd98a; }
.ph-jy-h span { font: 700 .86rem var(--zh); letter-spacing: 0; margin-left: .5rem; }
.ph-jy-find { padding: .7rem .9rem; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.2); }
.ph-jy-find.is-found { border: 1px solid rgba(79,209,165,.55); background: rgba(79,209,165,.08); }
.ph-jy-t { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.ph-jy-t b { font: 600 1.02rem var(--serif); color: #fff; } .ph-jy-t span { font: .88rem var(--zh); color: rgba(255,255,255,.68); }
.ph-jy .ph-vl-card { margin-top: .7rem; }
.ph-jy .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-jy .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-jy .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-jy .ph-vl-next span { font-family: var(--zh); }
.ph-jy .ph-el-end { margin-top: 1.4rem; }
@media (max-width: 760px) { .ph-jy-top { grid-template-columns: 1fr; } }

/* ---- A29：你來策展 ---- */
.ph-cu [hidden] { display: none !important; }
.ph-cu .ph-lb-btn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: .85rem 1rem; border-radius: 12px; font: 800 1rem var(--sans); color: #fff; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); transition: background .15s, border-color .15s, transform .15s; }
.ph-cu .ph-lb-btn span { font-family: var(--zh); font-weight: 700; }
.ph-cu .ph-lb-btn.is-allow:hover { border-color: #4fd1a5; background: rgba(79,209,165,.16); transform: translateY(-2px); }
.ph-cu .ph-lb-btn.is-ban:hover { border-color: #9fc3ea; background: rgba(159,195,234,.16); transform: translateY(-2px); }
.ph-cu .ph-lb-btn:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-cu .ph-vl-dots i.no { background: #9fc3ea; }
.ph-cu-rows { display: grid; gap: .6rem; margin: .6rem 0 1.2rem; }
.ph-cu-row { display: grid; grid-template-columns: 11rem 1fr 4.2rem; gap: .2rem 1rem; align-items: center; padding: .7rem .9rem; border-radius: 12px; background: rgba(255,255,255,.05); }
.ph-cu-row.is-top { background: rgba(255,211,110,.1); border: 1px solid rgba(255,211,110,.45); }
.ph-cu-row b { font: 600 1.05rem var(--serif); color: #fff; } .ph-cu-row b span { font: .88rem var(--zh); color: rgba(255,255,255,.7); }
.ph-cu-who { grid-column: 1; grid-row: 2; font: .76rem var(--sans); color: rgba(255,255,255,.6); }
.ph-cu-bar { grid-column: 2; grid-row: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ph-cu-bar u { display: block; height: 100%; border-radius: 999px; background: #9fc3ea; text-decoration: none; }
.ph-cu-row.is-top .ph-cu-bar u { background: #ffd36e; }
.ph-cu-row em { grid-column: 3; grid-row: 1; font: normal 800 1rem var(--sans); color: #ffd98a; text-align: right; font-variant-numeric: tabular-nums; }
.ph-cu-d { grid-column: 2 / -1; font: .84rem/1.5 var(--sans); color: rgba(255,255,255,.75); }
.ph-cu-d.ph-cu-zh { font: .82rem/1.6 var(--zh); color: rgba(255,255,255,.58); }
.ph-cu-miss { margin: .2rem 0 1rem 1.1rem; padding: 0; display: grid; gap: .45rem; }
.ph-cu-miss li { font: 400 .98rem/1.55 var(--serif); color: rgba(255,255,255,.9); }
.ph-cu-miss li span { display: block; font: .86rem/1.6 var(--zh); color: rgba(255,255,255,.62); }
@media (max-width: 640px) { .ph-cu-row { grid-template-columns: 1fr 4.2rem; } .ph-cu-bar { grid-column: 1; grid-row: 3; } .ph-cu-row em { grid-column: 2; grid-row: 1; } .ph-cu-who { grid-row: 2; } .ph-cu-d { grid-column: 1 / -1; } }

/* ---- A30：測測你的眼睛 ---- */
.ph-ts [hidden] { display: none !important; }
.ph-ts-area { margin: 1.2rem 0 .4rem; }
.ph-ts-area.is-sq { display: grid; grid-template-columns: repeat(4, minmax(0, 120px)); gap: 1rem; }
.ph-ts-sq { all: unset; cursor: pointer; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.08); transition: transform .12s, box-shadow .12s; }
.ph-ts-sq:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #ffd36e; }
.ph-ts-sq:focus-visible, .ph-ts-rc:focus-visible, .ph-ts-yn:focus-visible { outline: 2px solid #ffd36e; outline-offset: 4px; }
.ph-ts-area.is-rc { display: flex; flex-wrap: wrap; gap: 1.2rem 1.4rem; align-items: center; }
.ph-ts-rc { all: unset; cursor: pointer; padding: .5rem; border-radius: 10px; transition: background .12s, transform .12s; }
.ph-ts-rc:hover { background: rgba(255,211,110,.14); transform: translateY(-3px); }
.ph-ts-rc i { display: block; background: #e9e2cf; border-radius: 3px; }
.ph-ts-area.is-yn { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 560px; }
.ph-ts-yn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: .85rem 1rem; border-radius: 12px; font: 800 1rem var(--sans); color: #fff; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); transition: background .15s, border-color .15s, transform .15s; }
.ph-ts-yn span { font-family: var(--zh); font-weight: 700; }
.ph-ts-yn:hover { border-color: #ffd36e; background: rgba(255,211,110,.14); transform: translateY(-2px); }
@media (max-width: 480px) { .ph-ts-area.is-yn { grid-template-columns: 1fr; } .ph-ts-area.is-sq { gap: .6rem; } .ph-ts-rc i { transform: scale(.8); transform-origin: left top; } }

/* ---- A31：搭一齣悲劇 ---- */
.ph-tg [hidden] { display: none !important; }
.ph-tg-picks { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 0; margin-bottom: .2rem; }
.ph-tg-chip { font: 800 .78rem var(--sans); color: #1a2440; background: #ffd36e; padding: .28rem .8rem; border-radius: 999px; }
.ph-tg-chip i { font: normal 700 .8rem var(--zh); }
.ph-tg-opts { margin-top: 1rem; }
.ph-tg-whys { grid-template-columns: repeat(3, 1fr); }
.ph-tg-who { display: block; margin-top: .3rem; font: normal .74rem var(--sans); color: rgba(255,255,255,.55); }
.ph-tg .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-tg .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-tg .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-tg .ph-vl-card p.ph-tg-tag { font: 800 .78rem var(--sans); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .3rem; }
.ph-tg-tag span { font: 700 .86rem var(--zh); letter-spacing: 0; margin-left: .6rem; text-transform: none; }
.ph-tg .ph-el-end .ph-vl-q { margin-top: 1.4rem; }
@media (max-width: 820px) { .ph-tg-whys { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ph-tg-whys { grid-template-columns: 1fr; } }

/* ---- A32：原作還是複本？ ---- */
.ph-cp [hidden] { display: none !important; }
.ph-cp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.1rem 0 .4rem; max-width: 820px; }
.ph-cp-btn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: .85rem 1rem; border-radius: 12px; font: 800 1rem var(--sans); color: #fff; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); transition: background .15s, border-color .15s, transform .15s; }
.ph-cp-btn span { font-family: var(--zh); font-weight: 700; }
.ph-cp-btn:not(:disabled):hover { border-color: #ffd36e; background: rgba(255,211,110,.14); transform: translateY(-2px); }
.ph-cp-btn:focus-visible { outline: 2px solid #ffd36e; outline-offset: 3px; }
.ph-cp-btn:disabled { cursor: default; opacity: .45; }
.ph-cp-btn.is-mine { opacity: 1; border-color: #ffd36e; background: rgba(255,211,110,.16); }
.ph-cp .ph-vl-dots i.no { background: #9fc3ea; }
.ph-cp .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-cp .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-cp .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-cp .ph-vl-next span { font-family: var(--zh); }
@media (max-width: 520px) { .ph-cp-btns { grid-template-columns: 1fr; } }

/* ---- A33：盒子村 ---- */
.ph-bt [hidden] { display: none !important; }
.ph-bt-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-bottom: 1rem; }
.ph-bt-box { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem .4rem .8rem; border-radius: 12px; background: rgba(255,255,255,.05); text-align: center; }
.ph-bt-box b { font: 800 .84rem var(--sans); color: #fff; letter-spacing: .03em; }
.ph-bt-lid { width: 64px; height: 52px; border-radius: 8px; display: grid; place-items: center; background: #6b5334; border: 2px solid #a98656; box-shadow: inset 0 -8px 0 rgba(0,0,0,.22); transition: background .3s, border-color .3s; }
.ph-bt-lid i { font: normal 800 1.5rem var(--sans); color: #f0dcb8; }
.ph-bt-boxes.is-open .ph-bt-lid { background: #1c2740; border-color: #ffd36e; box-shadow: none; }
.ph-bt-boxes.is-pain .ph-bt-lid { background: #5a2f3a; border-color: #ff9d7a; }
.ph-bt-cap { font: .8rem/1.35 var(--sans); color: rgba(255,255,255,.82); }
.ph-bt-cap.ph-bt-zh { font: .78rem/1.4 var(--zh); color: rgba(255,255,255,.6); }
.ph-bt-talk { display: grid; gap: .3rem; margin: 0 0 1.1rem; padding: .9rem 1.1rem; border-left: 3px solid rgba(255,211,110,.6); background: rgba(0,0,0,.18); border-radius: 0 10px 10px 0; }
.ph-bt-talk:empty { display: none; }
.ph-bt-talk p { margin: 0; font: 400 1rem/1.5 var(--serif); color: #fff; }
.ph-bt-talk p span { display: block; font: .84rem/1.5 var(--zh); color: rgba(255,255,255,.6); }
.ph-bt-opts { margin-top: 1rem; }
.ph-bt .ph-vl-opt:disabled { cursor: default; opacity: .5; } .ph-bt .ph-vl-opt.is-right { opacity: 1; }
.ph-bt .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-bt .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-bt .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-bt .ph-vl-next span { font-family: var(--zh); }
@media (max-width: 600px) { .ph-bt-boxes { gap: .3rem; } .ph-bt-lid { width: 46px; height: 40px; } .ph-bt-lid i { font-size: 1.1rem; } .ph-bt-cap { font-size: .68rem; } .ph-bt-cap.ph-bt-zh { font-size: .68rem; } .ph-bt-box { padding: .5rem .15rem; } }

/* ---- A34：2–4–6 遊戲 ---- */
.ph-ws [hidden] { display: none !important; }
.ph-ws-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ph-ws-form input { width: 5.2rem; padding: .7rem .6rem; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(0,0,0,.25); color: #fff; font: 800 1.2rem var(--sans); text-align: center; }
.ph-ws-form input:focus { outline: 2px solid #ffd36e; outline-offset: 2px; border-color: #ffd36e; }
.ph-ws-form .ph-vl-next span, .ph-ws-ready span { font-family: var(--zh); }
.ph-ws-log { display: grid; gap: .3rem; margin: 1.1rem 0; max-width: 640px; }
.ph-ws-h { margin: 0 0 .2rem; font: 800 .76rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #ffd98a; }
.ph-ws-h span { font: 700 .86rem var(--zh); letter-spacing: 0; margin-left: .4rem; }
.ph-ws-row { display: grid; grid-template-columns: 9rem 1fr auto; gap: .2rem .8rem; align-items: baseline; padding: .45rem .8rem; border-radius: 9px; background: rgba(255,255,255,.05); border-left: 4px solid #4fd1a5; }
.ph-ws-row.is-no { border-left-color: #ff9d7a; }
.ph-ws-row b { font: 800 1rem var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.ph-ws-row span { font: .88rem var(--sans); color: #9be8cd; } .ph-ws-row.is-no span { color: #ffc4b0; }
.ph-ws-row i { font: normal .82rem var(--zh); color: rgba(255,255,255,.6); }
.ph-ws-opts { margin-top: 1rem; }
@media (max-width: 520px) { .ph-ws-form input { width: 4.2rem; } .ph-ws-row { grid-template-columns: 1fr; } }

/* ---- A35：火星的那個圈 ---- */
.ph-ep [hidden] { display: none !important; }
.ph-ep-modes { display: inline-flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgba(0,0,0,.28); margin-bottom: 1rem; }
.ph-ep-mode { all: unset; cursor: pointer; padding: .45rem 1rem; border-radius: 999px; font: 800 .86rem var(--sans); color: rgba(255,255,255,.75); }
.ph-ep-mode span { font-family: var(--zh); }
.ph-ep-mode[aria-pressed=true] { background: #ffd36e; color: #1a2440; }
.ph-ep-mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-ep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ph-ep-fig { margin: 0; border-radius: 14px; background: #0c1426; border: 1px solid rgba(255,255,255,.1); padding: .4rem; }
.ph-ep-fig svg { display: block; width: 100%; height: auto; max-height: 340px; }
.ph-ep-fig figcaption { display: flex; gap: 1rem; justify-content: center; min-height: 1.2rem; font: .78rem var(--sans); color: rgba(255,255,255,.7); padding: .2rem 0 .3rem; }
.ph-ep-fig figcaption i { font: normal .78rem var(--zh); }
.ph-ep-fig .k-obs::before, .ph-ep-fig .k-mod::before { content: ""; display: inline-block; width: 1.2rem; height: 3px; border-radius: 2px; margin-right: .4rem; vertical-align: middle; background: #8d99b3; }
.ph-ep-fig .k-mod::before { background: #ffd36e; }
.ph-ep svg .obs { fill: none; stroke: #8d99b3; stroke-width: 5; stroke-linecap: round; opacity: .55; }
.ph-ep svg .mod { fill: none; stroke: #ffd36e; stroke-width: 2; }
.ph-ep svg .ep-orb { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; stroke-dasharray: 4 5; }
.ph-ep svg .epi { fill: none; stroke: #ffd36e; stroke-width: 1.2; opacity: .8; }
.ph-ep svg .sight { stroke: rgba(255,255,255,.4); stroke-width: 1; }
.ph-ep svg .earth { fill: #6fb3ff; } .ph-ep svg .mars { fill: #ff7d5c; } .ph-ep svg .sun { fill: #ffd36e; }
.ph-ep-ctls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-top: 1.1rem; }
.ph-ep-ctls .ph-jy-ctl { grid-template-columns: 1fr 5.4rem; }
.ph-ep-ctls b i { font: normal .84rem var(--zh); color: rgba(255,255,255,.65); margin-left: .3rem; }
.ph-ep-meter { display: grid; grid-template-columns: auto 1fr 4rem; gap: .8rem; align-items: center; margin: 1rem 0 .2rem; }
.ph-ep-meter b { font: 800 .8rem var(--sans); color: #fff; } .ph-ep-meter b i { font: normal .8rem var(--zh); color: rgba(255,255,255,.65); }
.ph-ep-meter div { height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ph-ep-meter u { display: block; height: 100%; border-radius: 999px; background: #9fc3ea; transition: width .2s; text-decoration: none; }
.ph-ep-meter u.is-ok { background: #4fd1a5; }
.ph-ep-meter em { font: normal 800 1rem var(--sans); color: #ffd98a; text-align: right; font-variant-numeric: tabular-nums; }
.ph-ep .ph-tp-text p { margin: .6rem 0 0; }
.ph-ep .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-ep .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-ep .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-ep-opts { grid-template-columns: repeat(3, 1fr); }
.ph-ep .ph-el-end { margin-top: 1.4rem; }
@media (max-width: 720px) { .ph-ep-ctls { grid-template-columns: 1fr; } .ph-ep-opts { grid-template-columns: 1fr; } .ph-ep-grid { gap: .5rem; } }

/* ---- A36：把內角加起來 ---- */
.ph-ag [hidden] { display: none !important; }
.ph-ag-modes { display: inline-flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgba(0,0,0,.28); margin-bottom: 1rem; }
.ph-ag-mode { all: unset; cursor: pointer; padding: .45rem 1rem; border-radius: 999px; font: 800 .86rem var(--sans); color: rgba(255,255,255,.75); }
.ph-ag-mode span { font-family: var(--zh); }
.ph-ag-mode[aria-pressed=true] { background: #ffd36e; color: #1a2440; }
.ph-ag-mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-ag-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.4rem; align-items: center; }
.ph-ag-fig { margin: 0; border-radius: 14px; background: #0c1426; border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.ph-ag-fig svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.ph-ag svg .grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.ph-ag svg .tri { fill: rgba(255,211,110,.2); stroke: #ffd36e; stroke-width: 2.4; stroke-linejoin: round; }
.ph-ag svg .knob { fill: #6fb3ff; stroke: #fff; stroke-width: 2; cursor: grab; }
.ph-ag svg .dot { fill: #ffd36e; stroke: #0c1426; stroke-width: 1.5; }
.ph-ag svg .lab { font: 800 13px var(--sans); fill: #fff; paint-order: stroke; stroke: #0c1426; stroke-width: 4px; pointer-events: none; }
.ph-ag svg .ball { fill: #16233f; stroke: rgba(255,255,255,.45); stroke-width: 1.2; }
.ph-ag svg .grat { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.ph-ag svg .eq { fill: none; stroke: rgba(111,179,255,.7); stroke-width: 1.4; }
.ph-ag-sum { display: grid; gap: .15rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(0,0,0,.25); }
.ph-ag-sum span { font: 800 .78rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ph-ag-sum span i { font: normal .82rem var(--zh); letter-spacing: 0; margin-left: .3rem; }
.ph-ag-sum b { font: 800 2.6rem/1.1 var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.ph-ag-sum b.is-over { color: #ffd36e; }
.ph-ag-sum em { font: normal .86rem var(--sans); color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; white-space: pre-wrap; }
.ph-ag-ctls { display: grid; gap: 1rem; margin-top: 1.1rem; }
.ph-ag-ctls .ph-jy-ctl { grid-template-columns: 1fr 3.4rem; }
.ph-ag-ctls b i { font: normal .84rem var(--zh); color: rgba(255,255,255,.65); margin-left: .3rem; }
.ph-ag-shuffle { all: unset; cursor: pointer; margin-top: 1.1rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5); font: 800 .86rem var(--sans); color: #fff; }
.ph-ag-shuffle i { font: normal .86rem var(--zh); margin-left: .2rem; }
.ph-ag-shuffle:hover { background: rgba(255,255,255,.12); } .ph-ag-shuffle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-ag .ph-tp-text p { margin: .9rem 0 0; }
.ph-ag .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-ag .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-ag .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-ag-opts { grid-template-columns: repeat(3, 1fr); }
.ph-ag .ph-el-end { margin-top: 1.4rem; }
@media (max-width: 720px) { .ph-ag-grid { grid-template-columns: 1fr; gap: 1rem; } .ph-ag-opts { grid-template-columns: 1fr; } }

/* ---- A37：你的線畫在哪裡 ---- */
.ph-ci [hidden] { display: none !important; }
.ph-ci-step { margin: 0 0 .8rem; font: 800 .95rem var(--sans); color: #ffd98a; }
.ph-ci-step i { display: block; font: normal .9rem var(--zh); color: rgba(255,255,255,.7); margin-top: .1rem; }
.ph-ci-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.ph-ci-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .15rem; padding: .85rem .8rem .7rem; border-radius: 14px; border: 1.5px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.04); text-align: center; transition: background .2s, border-color .2s, transform .2s; }
.ph-ci-card b { font: 800 .95rem var(--sans); color: rgba(255,255,255,.8); }
.ph-ci-card span { font: .9rem var(--zh); color: rgba(255,255,255,.6); }
.ph-ci-card em { font: normal 800 .68rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: .3rem; }
.ph-ci-card em i { font: normal .72rem var(--zh); letter-spacing: 0; }
.ph-ci-card.is-in { border: 1.5px solid #ffd36e; background: rgba(255,211,110,.16); }
.ph-ci-card.is-in b { color: #fff; } .ph-ci-card.is-in span { color: rgba(255,255,255,.85); } .ph-ci-card.is-in em { color: #ffd36e; }
.ph-ci-card:hover { transform: translateY(-2px); } .ph-ci-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-ci-count { margin: .7rem 0 0; font: .8rem var(--sans); color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.ph-ci-next { all: unset; cursor: pointer; margin-top: 1rem; padding: .6rem 1.3rem; border-radius: 999px; background: #ffd36e; color: #1a2440; font: 800 .9rem var(--sans); }
.ph-ci-next i { font: normal .9rem var(--zh); margin-left: .2rem; }
.ph-ci-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-ci [data-ci-two] { margin-top: 1.6rem; }
.ph-ci-reasons { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.ph-ci-reasons .ph-vl-opt b { font: 800 .92rem var(--sans); color: #fff; } .ph-ci-reasons .ph-vl-opt span { font: .86rem var(--zh); color: rgba(255,255,255,.7); }
.ph-ci-table { display: grid; gap: 2px; margin: .6rem 0 1rem; max-width: 30rem; }
.ph-ci-row { display: grid; grid-template-columns: 1fr 5.5rem 5.5rem; align-items: center; padding: .32rem .7rem; border-radius: 8px; background: rgba(255,255,255,.05); }
.ph-ci-row.hd { background: none; font: 800 .72rem var(--sans); color: rgba(255,255,255,.6); }
.ph-ci-row.hd .cell { font: 800 .7rem var(--sans); white-space: nowrap; color: rgba(255,255,255,.6); }
.ph-ci-row .nm b { font: 700 .9rem var(--sans); color: #fff; } .ph-ci-row .nm span { font: .84rem var(--zh); color: rgba(255,255,255,.65); margin-left: .45rem; }
.ph-ci-row .cell { text-align: center; font: 800 .95rem var(--sans); color: rgba(255,255,255,.4); }
.ph-ci-row .cell.in { color: #ffd36e; }
.ph-ci-row.is-bad { background: rgba(255,125,92,.2); outline: 1px solid rgba(255,125,92,.6); }
.ph-ci-row.is-q .cell:last-child { color: #9fc3ea; }
.ph-ci-list { margin: .35rem 0; font: .92rem/1.6 var(--sans); color: rgba(255,255,255,.9); }
.ph-ci-list b { color: #ff9d82; } .ph-ci-list.is-unsure b { color: #9fc3ea; }
.ph-ci-list span { display: block; font: .88rem/1.7 var(--zh); color: rgba(255,255,255,.7); }
.ph-ci .ph-vl-card { margin-top: 1rem; }
.ph-ci .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-ci .ph-vl-card .ph-ci-who { font: 800 .76rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--brand-dk); margin-bottom: .4rem; }
.ph-ci .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-ci .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-ci-coda p { margin: 1rem 0 0; font: italic 400 1rem/1.7 var(--serif); color: rgba(255,255,255,.9); }
.ph-ci-coda .ph-zh { font: normal .92rem/1.8 var(--zh); color: rgba(255,255,255,.7); margin-top: .2rem; }
@media (max-width: 860px) { .ph-ci-reasons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .ph-ci-grid { grid-template-columns: repeat(2, 1fr); } .ph-ci-reasons { grid-template-columns: 1fr; } .ph-ci-row { grid-template-columns: 1fr 3.4rem 5rem; } .ph-ci-row .nm span { white-space: nowrap; } }

/* ---- A38：定一個折現率 ---- */
.ph-dc [hidden] { display: none !important; }
.ph-dc-ctl { display: grid; grid-template-columns: auto 1fr 4.4rem; gap: 1rem; align-items: center; }
.ph-dc-ctl b { font: 800 .95rem var(--sans); color: #fff; } .ph-dc-ctl b i { font: normal .88rem var(--zh); color: rgba(255,255,255,.65); margin-left: .3rem; }
.ph-dc-ctl input { width: 100%; accent-color: #ffd36e; }
.ph-dc-ctl output { font: 800 1.5rem var(--sans); color: #ffd36e; text-align: right; font-variant-numeric: tabular-nums; }
.ph-dc-marks { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 1.4rem; }
.ph-dc-mark { all: unset; cursor: pointer; padding: .32rem .8rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.25); font: .78rem var(--sans); color: rgba(255,255,255,.8); }
.ph-dc-mark b { font-weight: 800; color: #fff; } .ph-dc-mark i { font: normal .78rem var(--zh); }
.ph-dc-mark[aria-pressed=true] { background: #ffd36e; border-color: #ffd36e; color: #1a2440; } .ph-dc-mark[aria-pressed=true] b { color: #1a2440; }
.ph-dc-mark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-dc-head { margin: 0 0 .6rem; font: 800 .82rem var(--sans); letter-spacing: .03em; color: #ffd98a; } .ph-dc-head i { font: normal .86rem var(--zh); letter-spacing: 0; color: rgba(255,255,255,.7); margin-left: .3rem; }
.ph-dc-rows { display: grid; gap: .5rem; }
.ph-dc-row { display: grid; grid-template-columns: 15rem 1fr 13rem; gap: 1rem; align-items: center; padding: .6rem .9rem; border-radius: 12px; background: rgba(0,0,0,.22); }
.ph-dc-row .nm b { display: block; font: 700 .92rem var(--sans); color: #fff; } .ph-dc-row .nm i { font: normal .84rem var(--zh); color: rgba(255,255,255,.65); }
.ph-dc-row .bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ph-dc-row .bar u { display: block; height: 100%; border-radius: 999px; background: #4fd1a5; transition: width .25s; text-decoration: none; }
.ph-dc-row .bar u.is-gone { background: #ff7d5c; }
.ph-dc-row .num { text-align: right; font: .82rem var(--sans); color: rgba(255,255,255,.7); } .ph-dc-row .num b { font: 800 1.15rem var(--sans); color: #fff; font-variant-numeric: tabular-nums; } .ph-dc-row .num i { font: normal .82rem var(--zh); }
.ph-dc .ph-tp-text p { margin: 1rem 0 0; }
.ph-dc .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-dc .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-dc .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-dc-opts { grid-template-columns: repeat(4, 1fr); }
.ph-dc .ph-el-end { margin-top: 1.4rem; }
@media (max-width: 860px) { .ph-dc-opts { grid-template-columns: 1fr 1fr; } .ph-dc-row { grid-template-columns: 1fr auto; } .ph-dc-row .bar { grid-column: 1 / -1; order: 3; } }
@media (max-width: 560px) { .ph-dc-opts { grid-template-columns: 1fr; } .ph-dc-ctl { grid-template-columns: 1fr 4rem; } .ph-dc-ctl span { grid-column: 1 / -1; } }

/* ---- A39：寫一本規則書 ---- */
.ph-ru [hidden] { display: none !important; }
.ph-ru-step { margin: 0 0 .8rem; font: 800 .95rem var(--sans); color: #ffd98a; }
.ph-ru-step i { display: block; font: normal .9rem var(--zh); color: rgba(255,255,255,.7); margin-top: .1rem; }
.ph-ru-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.ph-ru-rules .ph-vl-opt b { font: 800 .92rem var(--sans); color: #fff; } .ph-ru-rules .ph-vl-opt span { font: .86rem var(--zh); color: rgba(255,255,255,.7); }
.ph-ru-rules .ph-vl-opt.is-done:not(.is-right) { border-style: dashed; opacity: .75; }
.ph-ru-cases { display: grid; gap: .9rem; margin-top: 1.4rem; }
.ph-ru-case { padding: 1.1rem 1.3rem; border-radius: 16px; background: rgba(0,0,0,.24); border-left: 4px solid rgba(255,255,255,.2); animation: ph-rise .5s ease both; }
.ph-ru-case.is-ok { border-left-color: #4fd1a5; } .ph-ru-case.is-no { border-left-color: #ff7d5c; }
.ph-ru-h { margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .6rem; }
.ph-ru-h em { font: normal 800 .72rem var(--sans); color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.ph-ru-h b { font: 600 1.15rem var(--serif); color: #ffd98a; } .ph-ru-h span { font: .9rem var(--zh); color: rgba(255,255,255,.7); }
.ph-ru-case p { margin: 0; } .ph-ru-s { font: 400 1.02rem/1.65 var(--serif); color: #fff; }
.ph-ru-case .ph-zh { font: .92rem/1.8 var(--zh); color: rgba(255,255,255,.7); margin-top: .2rem; }
.ph-ru-act { margin-top: .9rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(255,211,110,.1); }
.ph-ru-l { font: 800 .74rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #ffd36e; } .ph-ru-l i { font: normal .8rem var(--zh); letter-spacing: 0; color: rgba(255,255,255,.65); margin-left: .3rem; }
.ph-ru-a { font: 400 1.05rem/1.6 var(--serif); color: #fff; margin-top: .25rem !important; }
.ph-ru-vote { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.ph-ru-btn { all: unset; cursor: pointer; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); display: inline-flex; gap: .45rem; align-items: baseline; }
.ph-ru-btn b { font: 800 .84rem var(--sans); color: #fff; } .ph-ru-btn span { font: .82rem var(--zh); color: rgba(255,255,255,.7); }
.ph-ru-btn.is-ok[aria-pressed=true] { background: #1f7a63; border-color: #4fd1a5; }
.ph-ru-btn.is-no[aria-pressed=true] { background: #8a3a28; border-color: #ff7d5c; }
.ph-ru-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-ru .ph-el-end { margin-top: 1.3rem; }
.ph-ru .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-ru .ph-vl-card .ph-ru-who { font: 800 .76rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--brand-dk); margin-bottom: .4rem; }
.ph-ru .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-ru .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-ru-all p { margin: 1rem 0 0; font: italic 400 1rem/1.7 var(--serif); color: rgba(255,255,255,.92); }
.ph-ru-all .ph-zh { font: normal .92rem/1.8 var(--zh); color: rgba(255,255,255,.7); margin-top: .2rem; }
.ph-ru-tried { margin-top: 1.3rem; display: grid; gap: .35rem; max-width: 34rem; }
.ph-ru-th { margin: 0 0 .2rem; font: 800 .74rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); } .ph-ru-th i { font: normal .8rem var(--zh); letter-spacing: 0; margin-left: .3rem; }
.ph-ru-tr { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .4rem .8rem; border-radius: 10px; background: rgba(255,255,255,.05); }
.ph-ru-tr .nm b { font: 700 .86rem var(--sans); color: #fff; } .ph-ru-tr .nm span { display: block; font: .8rem var(--zh); color: rgba(255,255,255,.6); }
.ph-ru-tr .sc { display: inline-flex; align-items: center; gap: .25rem; } .ph-ru-tr .sc u { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(255,255,255,.15); text-decoration: none; } .ph-ru-tr .sc u.on { background: #4fd1a5; }
.ph-ru-tr .sc b { font: 800 .86rem var(--sans); color: #fff; margin-left: .4rem; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .ph-ru-rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ph-ru-rules { grid-template-columns: 1fr; } .ph-ru-h { flex-wrap: wrap; } }

/* ---- A40：八個人生 ---- */
.ph-lv [hidden] { display: none !important; }
.ph-lv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.ph-lv-card { display: flex; flex-direction: column; padding: 1.05rem 1.2rem; border-radius: 16px; background: rgba(0,0,0,.24); border-top: 4px solid rgba(255,255,255,.18); }
.ph-lv-card.is-yes { border-top-color: #ffd36e; } .ph-lv-card.is-no { border-top-color: #8d99b3; }
.ph-lv-h { margin: 0 0 .45rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.ph-lv-h em { font: normal 800 .72rem var(--sans); color: rgba(255,255,255,.5); }
.ph-lv-h b { font: 600 1.12rem var(--serif); color: #ffd98a; } .ph-lv-h span { font: .9rem var(--zh); color: rgba(255,255,255,.7); }
.ph-lv-card p { margin: 0; } .ph-lv-s { font: 400 1rem/1.62 var(--serif); color: #fff; }
.ph-lv-card .ph-zh { font: .9rem/1.8 var(--zh); color: rgba(255,255,255,.7); margin-top: .2rem; }
.ph-lv-vote { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .9rem; }
.ph-lv-btn { all: unset; cursor: pointer; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); display: inline-flex; gap: .4rem; align-items: baseline; }
.ph-lv-btn b { font: 800 .82rem var(--sans); color: #fff; } .ph-lv-btn span { font: .8rem var(--zh); color: rgba(255,255,255,.7); }
.ph-lv-btn.is-yes[aria-pressed=true] { background: #ffd36e; border-color: #ffd36e; } .ph-lv-btn.is-yes[aria-pressed=true] b, .ph-lv-btn.is-yes[aria-pressed=true] span { color: #1a2440; }
.ph-lv-btn.is-no[aria-pressed=true] { background: #4a5670; border-color: #8d99b3; }
.ph-lv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-lv-count { margin-top: .8rem; min-height: 1.2rem; font: .82rem var(--sans); color: rgba(255,255,255,.6); } .ph-lv-count i { font: normal .82rem var(--zh); }
.ph-lv .ph-el-end { margin-top: .6rem; }
.ph-lv-table { display: grid; gap: 2px; margin: .7rem 0 1rem; }
.ph-lv-row { display: grid; grid-template-columns: minmax(9rem, 1.6fr) repeat(5, 1fr); align-items: center; padding: .34rem .7rem; border-radius: 8px; background: rgba(255,255,255,.05); }
.ph-lv-row.hd, .ph-lv-row.ft { background: none; }
.ph-lv-row.hd .cell { font: 800 .7rem/1.25 var(--sans); color: rgba(255,255,255,.75); } .ph-lv-row.hd .cell i { display: block; font: normal .72rem var(--zh); color: rgba(255,255,255,.55); }
.ph-lv-row .nm { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; line-height: 1.3; }
.ph-lv-row .nm b { font: 700 .88rem/1.3 var(--sans); color: #fff; } .ph-lv-row .nm span { font: .82rem/1.3 var(--zh); color: rgba(255,255,255,.65); white-space: nowrap; }
.ph-lv-card .ph-tr { align-self: flex-start; }
.ph-lv-row .cell { text-align: center; font: 800 .95rem var(--sans); color: rgba(255,255,255,.4); }
.ph-lv-row .cell.in { color: #ffd36e; }
.ph-lv-row .cell.bad { background: rgba(255,125,92,.22); border-radius: 6px; }
.ph-lv-row .cell:nth-child(2) { border-right: 1px solid rgba(255,255,255,.15); }
.ph-lv-row.ft .cell { font: 800 .82rem var(--sans); color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; } .ph-lv-row.ft .cell.top { color: #4fd1a5; }
.ph-lv .ph-vl-card { margin-top: .8rem; }
.ph-lv .ph-vl-card p { margin: 0; font: 400 1.04rem/1.7 var(--serif); }
.ph-lv .ph-vl-card .ph-lv-who { font: 800 .76rem var(--sans); letter-spacing: .04em; color: var(--brand-dk); margin-bottom: .4rem; }
.ph-lv .ph-vl-card .ph-zh { font: 400 .95rem/1.8 var(--zh); color: var(--ink-soft); }
.ph-lv .ph-vl-card .ph-tr { background: var(--brand-lt); color: var(--brand-dk); }
.ph-lv-coda p { margin: 1rem 0 0; font: italic 400 1rem/1.7 var(--serif); color: rgba(255,255,255,.9); }
.ph-lv-coda .ph-zh { font: normal .92rem/1.8 var(--zh); color: rgba(255,255,255,.7); margin-top: .2rem; }
@media (max-width: 720px) { .ph-lv-grid { grid-template-columns: 1fr; } .ph-lv-row { grid-template-columns: minmax(6.2rem, 1.5fr) repeat(5, 1fr); padding: .3rem .35rem; } .ph-lv-row .nm b { font-size: .78rem; } .ph-lv-row.hd .cell { font-size: .58rem; } .ph-lv-row.hd .cell i { font-size: .62rem; } .ph-lv-row.ft .cell { font-size: .7rem; } }

/* ── 書架 B：世界時間軸（ph-wt-）與「這個時代改變了什麼」 ── */
.ph-wt { margin-top: 1.6rem; }
.ph-wt-ctl { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; font: 600 .85rem var(--sans); color: var(--ink-soft); }
.ph-wt-ctl span { flex: 1; text-align: center; }
.ph-wt-ctl button { border: 1px solid var(--line); background: #fff; border-radius: 999px; width: 2.4rem; height: 2.4rem; font-size: 1.1rem; cursor: pointer; color: var(--brand-dk); }
.ph-wt-ctl button:hover { border-color: var(--brand); }
.ph-wt-view { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: grab; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ph-wt-view.is-drag { cursor: grabbing; user-select: none; }
.ph-wt-track { position: relative; padding: 0 0 2.2rem; }
.ph-wt-lane { position: relative; border-bottom: 1px dashed var(--line); }
.ph-wt-lab { position: sticky; left: 0; z-index: 3; display: inline-block; margin: .35rem 0 0; padding: .15rem .6rem; font: 700 .72rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #fff; border-radius: 0 999px 999px 0; }
.ph-wt-lab i { font-style: normal; margin-left: .4em; text-transform: none; letter-spacing: 0; }
.ph-wt-west .ph-wt-lab { background: var(--brand); } .ph-wt-india .ph-wt-lab { background: var(--ph-terra, #b5532f); } .ph-wt-china .ph-wt-lab { background: #8a6d1d; }
.ph-wt-it { position: absolute; height: 34px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 3px; white-space: nowrap; margin-top: 1.5rem; }
.ph-wt-it i { display: block; height: 8px; border-radius: 4px; opacity: .85; }
.ph-wt-west .ph-wt-it i { background: var(--brand); } .ph-wt-india .ph-wt-it i { background: var(--ph-terra, #b5532f); } .ph-wt-china .ph-wt-it i { background: #b8932b; }
.ph-wt-pt i { width: 8px !important; height: 8px; border-radius: 50%; }
.ph-wt-it b { font: 600 .8rem var(--sans); color: var(--ink); }
.ph-wt-it b span { font-weight: 400; color: var(--ink-soft); margin-left: .3em; }
.ph-wt-it a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.ph-wt-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 2rem; border-top: 2px solid var(--ink-soft); }
.ph-wt-tick { position: absolute; top: 0; transform: translateX(-50%); padding-top: .45rem; font: 600 .7rem var(--sans); color: var(--ink-soft); white-space: nowrap; }
.ph-wt-tick::before { content: ""; position: absolute; top: -2px; left: 50%; width: 1px; height: 7px; background: var(--ink-soft); }
.ph-wt-break { position: absolute; top: 0; bottom: 2rem; width: 0; border-left: 2px dotted var(--gold); z-index: 1; }
.ph-wt-band { position: absolute; top: 0; bottom: 2rem; background: rgba(201, 162, 39, .16); border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); z-index: 0; }
.ph-wt-band span { position: absolute; top: .35rem; left: 50%; transform: translateX(-50%); font: 700 .72rem var(--sans); color: #6b5410; background: #fff8df; border-radius: 999px; padding: .1rem .6rem; white-space: nowrap; }
.ph-wt-note { margin: .7rem 0 0; font: .82rem/1.6 var(--sans); color: var(--ink-soft); }
.ph-wt-note span { display: block; }
.ph-changed { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.ph-changed li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); }
.ph-ch-n { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--brand); color: #fff; font: 700 1.3rem var(--serif); }
.ph-changed h3 { margin: .2rem 0 .5rem; font: 600 1.3rem var(--serif); color: var(--brand-dk); }
.ph-changed .ph-p { margin: 0; }
@media (max-width: 640px) { .ph-changed li { grid-template-columns: 1fr; } .ph-wt-ctl span { font-size: .75rem; } }