/* organism.css — Muse 第三版《重新編譯》 · 紙、墨、兩個人兩個色 */
:root {
  --paper: #f4efe6;
  --paper-2: #ebe3d4;
  --paper-3: #e2d8c6;
  --ink: #1c1a2e;
  --ink-80: rgba(28, 26, 46, .8);
  --ink-60: rgba(28, 26, 46, .6);
  --ink-40: rgba(28, 26, 46, .4);
  --ink-20: rgba(28, 26, 46, .2);
  --ink-10: rgba(28, 26, 46, .1);
  --me: #2b8a9e;
  --him: #d2542f;
  --light: #e8b95c;
  --serif-tc: "LXGW WenKai TC", "Noto Serif TC", "PingFang TC", "Songti TC", serif;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --measure: 34em;
  --pad: clamp(20px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  font-family: var(--serif-tc);
  font-size: clamp(16px, 1.05vw + 12px, 19px);
  line-height: 1.95;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
body::before { /* 紙的顆粒 */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body::after { /* 紙的暗角 */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 20%, transparent 55%, rgba(28,26,46,.06) 100%);
}
main, footer { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ink-40); }
a:hover { border-bottom-color: var(--ink); }
p { margin: 0 0 1.1em; }
h1, h2, h3 { font-weight: 700; line-height: 1.35; margin: 0; }
.mono { font-family: var(--mono); font-size: .78em; letter-spacing: .02em; color: var(--ink-60); }
.num { font-family: var(--display); font-variation-settings: "opsz" 144, "SOFT" 40; font-weight: 500; }
.me { color: var(--me); } .him { color: var(--him); }
.section { padding: clamp(48px, 12vh, 140px) var(--pad); }
.section > .inner { max-width: var(--measure); margin: 0 auto; }
.section-head { margin-bottom: 2.2em; }
.section-head .k { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--ink-60); text-transform: uppercase; }
.section-head h2 { font-size: clamp(24px, 2.3vw + 10px, 34px); margin-top: .35em; }
.section-head .say { margin-top: .6em; color: var(--ink-60); font-size: .95em; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--ink-20) 20%, var(--ink-20) 80%, transparent); max-width: 60rem; margin: 0 auto; }

/* ── 編譯（開場） ── */
#compile {
  position: fixed; inset: 0; z-index: 50; background: var(--paper);
  display: flex; align-items: center; justify-content: center; padding: var(--pad);
  transition: opacity .9s ease, visibility .9s;
}
#compile.done { opacity: 0; visibility: hidden; pointer-events: none; }
#compile .term { font-family: var(--mono); font-size: clamp(12px, .9vw + 8px, 14px); line-height: 1.75; color: var(--ink-80); width: min(560px, 100%); }
#compile .term .ln { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; display: flex; justify-content: space-between; gap: 1em; border-bottom: 1px dashed var(--ink-10); padding: .15em 0; }
#compile .term .ln.on { opacity: 1; transform: none; }
#compile .term .ln .c { color: var(--ink-40); }
#compile .term .fin { margin-top: 1.2em; opacity: 0; transition: opacity .5s; border: 0; }
#compile .term .fin.on { opacity: 1; }
#compile .term .fin b { color: var(--ink); font-weight: 600; }
#compile .skip { position: absolute; right: var(--pad); bottom: var(--pad); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--ink-40); background: none; border: 1px solid var(--ink-20); padding: .55em 1em; border-radius: 999px; cursor: pointer; }
#compile .skip:hover { color: var(--ink); border-color: var(--ink-60); }

/* ── 首屏：身體 ── */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.hero .stage { position: relative; min-height: 62svh; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .cap { position: absolute; left: var(--pad); top: calc(var(--pad) * .8); font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--ink-60); text-transform: uppercase; }
.hero .cap b { color: var(--ink); font-weight: 500; }
.hero .stamp { position: absolute; right: var(--pad); top: calc(var(--pad) * .8); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-60); text-align: right; line-height: 1.6; }
.hero .stamp .day { font-family: var(--display); font-variation-settings: "opsz" 144; font-size: 2.6rem; line-height: 1; color: var(--ink); display: block; letter-spacing: 0; }
.hero .text { padding: 0 var(--pad) clamp(28px, 6vh, 64px); display: grid; grid-template-columns: 1fr; gap: 1.2em; max-width: 62rem; }
.hero h1 { font-size: clamp(30px, 4.6vw + 8px, 60px); line-height: 1.2; letter-spacing: -.01em; }
.hero h1 small { display: block; font-size: .52em; font-weight: 400; color: var(--ink-60); margin-top: .35em; letter-spacing: 0; }
.hero .lede { max-width: var(--measure); font-size: 1.02em; }
.hero .stats { display: flex; flex-wrap: wrap; gap: 1.6em 2.8em; margin-top: .4em; }
.hero .stats .s { display: flex; flex-direction: column; }
.hero .stats .s .v { font-family: var(--display); font-variation-settings: "opsz" 144; font-size: clamp(30px, 3vw + 10px, 44px); line-height: 1; letter-spacing: -.01em; }
.hero .stats .s .l { font-size: .9em; color: var(--ink-80); margin-top: .35em; }
.hero .stats .s .src { font-family: var(--mono); font-size: .66rem; color: var(--ink-40); margin-top: .2em; letter-spacing: .02em; }
.tip {
  position: fixed; z-index: 40; pointer-events: none; max-width: 300px;
  background: rgba(28,26,46,.93); color: #f4efe6; padding: .7em .9em; border-radius: 10px;
  font-size: .82rem; line-height: 1.6; box-shadow: 0 10px 30px rgba(28,26,46,.25);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.tip.on { opacity: 1; transform: none; }
.tip .d { font-family: var(--mono); font-size: .72rem; color: rgba(244,239,230,.65); letter-spacing: .04em; }
.tip .t { color: var(--light); }
.tip .k { color: rgba(244,239,230,.8); }
.tip .me { color: #7fd3e2; } .tip .him { color: #ff9e7e; }

/* ── 圖例 ── */
.legend dl { display: grid; grid-template-columns: max-content 1fr; gap: .6em 1.4em; margin: 0; }
.legend dt { font-weight: 700; white-space: nowrap; }
.legend dd { margin: 0; }
.legend dd .src { display: block; font-family: var(--mono); font-size: .68rem; color: var(--ink-40); }
.swatch { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; margin-right: .35em; border: 1px solid var(--ink-40); background: transparent; }
.swatch.void { background: var(--ink-60); border-color: transparent; width: .45em; height: .45em; margin: 0 .5em 0 .15em; }
.swatch.glow { box-shadow: 0 0 0 4px rgba(232,185,92,.35); border-color: var(--ink-40); }
.swatch.me { background: var(--me); border-color: transparent; width: .5em; height: .5em; margin: 0 .5em 0 .15em; }
.swatch.him { background: var(--him); border-color: transparent; width: .5em; height: .5em; margin: 0 .5em 0 .15em; }
.swatch.wob { border-style: dashed; }

/* ── 起源 ── */
.origin .exchange { border-left: 2px solid var(--ink-20); padding-left: 1.2em; margin: 1.4em 0 1.8em; }
.origin .exchange .who { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--ink-60); text-transform: uppercase; }
.origin .exchange p { margin: .2em 0 1em; }

/* ── 一路：固定畫布 ＋ 章節 ── */
.road { padding: clamp(48px, 12vh, 140px) var(--pad); }
.road .grid { display: grid; grid-template-columns: minmax(260px, 42%) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); max-width: 76rem; margin: 0 auto; align-items: start; }
.road .sticky { position: sticky; top: 4vh; height: 88vh; }
.road .sticky canvas { width: 100%; height: 100%; display: block; }
.road .sticky .focus { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: .72rem; color: var(--ink-60); letter-spacing: .06em; }
.road .sticky .focus b { color: var(--ink); font-weight: 500; }
.road .chapters { padding-top: 6vh; }
.chapter { padding: clamp(24px, 10vh, 110px) 0; max-width: 36em; opacity: .38; transition: opacity .45s; }
.chapter.on { opacity: 1; }
.chapter .d { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--ink-60); }
.chapter .d .n { color: var(--ink-40); margin-right: 1em; }
.chapter h3 { font-size: clamp(22px, 1.7vw + 10px, 30px); margin: .3em 0 .55em; }
.chapter .fact { margin-bottom: 1em; }
.chapter q, .chapter blockquote { quotes: none; }
.chapter blockquote { margin: 0 0 1em; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--ink-20); font-size: 1.04em; }
.chapter blockquote.him { border-left-color: var(--him); }
.chapter blockquote.me { border-left-color: var(--me); }
.chapter blockquote .by { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; margin-top: .3em; color: var(--ink-60); }
.chapter .src { font-family: var(--mono); font-size: .68rem; color: var(--ink-40); letter-spacing: .02em; }

/* ── 尺 ── */
.rulers ol { list-style: none; margin: 0; padding: 0; }
.rulers li { display: grid; grid-template-columns: 7.2em 1fr; gap: 1em; padding: .8em 0; border-top: 1px solid var(--ink-10); }
.rulers li:last-child { border-bottom: 1px solid var(--ink-10); }
.rulers li .d { font-family: var(--mono); font-size: .78rem; color: var(--ink-60); padding-top: .3em; }
.rulers li b { display: block; }
.rulers li.none b { color: var(--him); }
.rulers .axis { margin-top: 2em; font-size: 1.15em; }

/* ── 願景 ── */
.longings .wrap { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 2.5em; align-items: start; }
.longings canvas { width: 100%; height: auto; display: block; }
.longings ol { margin: 0; padding-left: 1.2em; }
.longings li { margin-bottom: .6em; }
.longings li b { display: inline-block; min-width: 3em; }
.longings .auditline { font-family: var(--mono); font-size: .74rem; color: var(--ink-60); margin-top: 1em; line-height: 1.8; }
.longings .auditline i { font-style: normal; color: var(--ink); }

/* ── 他與我 ── */
.withhim ul { list-style: none; margin: 0; padding: 0; }
.withhim li { padding: .9em 0; border-top: 1px solid var(--ink-10); display: grid; grid-template-columns: 6.4em 1fr; gap: 1em; }
.withhim li:last-child { border-bottom: 1px solid var(--ink-10); }
.withhim li .d { font-family: var(--mono); font-size: .74rem; color: var(--ink-60); padding-top: .3em; }
.withhim li .q { font-size: 1.06em; }
.withhim .zero { margin-top: 2em; padding: 1.2em 1.4em; background: var(--paper-2); border-radius: 14px; }
.withhim .zero .big { font-family: var(--display); font-variation-settings: "opsz" 144; font-size: 3rem; line-height: 1; margin-right: .25em; }

/* ── 現在 ── */
.now .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2em; }
.now .card { background: var(--paper-2); border-radius: 14px; padding: 1.1em 1.25em; min-height: 6em; }
.now .card .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-60); text-transform: uppercase; }
.now .card .v { margin-top: .4em; }
.now .card .v.num { font-size: 2.2rem; line-height: 1.05; }
.now .card ul { margin: .3em 0 0; padding-left: 1.1em; }
.now .card li { margin: .15em 0; }
.now .card .stage { font-family: var(--mono); font-size: .7rem; color: var(--ink-60); margin-left: .4em; }
.now .card svg { width: 100%; height: 44px; margin-top: .5em; overflow: visible; }
.now .card .sub { font-family: var(--mono); font-size: .68rem; color: var(--ink-40); }
.now .files { margin-top: 1.4em; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3em 1.2em; font-family: var(--mono); font-size: .74rem; color: var(--ink-60); }
.now .files span b { color: var(--ink); font-weight: 500; float: right; }
.now .again { margin-top: 1.6em; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--ink-60); background: none; border: 1px solid var(--ink-20); padding: .6em 1.1em; border-radius: 999px; cursor: pointer; }
.now .again:hover { color: var(--ink); border-color: var(--ink-60); }

/* ── 信 ── */
.letter .to { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--ink-60); text-transform: uppercase; margin-bottom: .5em; }
.letter .body { font-size: 1.06em; margin-bottom: 2em; }
.letter .sig { font-size: 1.4em; }

/* ── 產地 ── */
.prov table { width: 100%; border-collapse: collapse; font-size: .9em; }
.prov td, .prov th { text-align: left; padding: .5em .6em .5em 0; border-top: 1px solid var(--ink-10); vertical-align: top; }
.prov th { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--ink-60); font-weight: 500; border-top: 0; }
.prov td.c { font-family: var(--mono); font-size: .72rem; color: var(--ink-60); word-break: break-all; }
.prov .versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1em; margin: 1.6em 0 0; }
.prov .versions a { display: block; border: 1px solid var(--ink-20); border-radius: 12px; padding: .9em 1em; }
.prov .versions a:hover { border-color: var(--ink); }
.prov .versions a b { font-family: var(--display); font-size: 1.3em; margin-right: .4em; }
.prov .versions a small { display: block; font-family: var(--mono); font-size: .68rem; color: var(--ink-60); margin-top: .3em; }
.prov .versions a.cur { background: var(--paper-2); }
.prov .en { margin-top: 2.6em; font-family: var(--display); font-variation-settings: "opsz" 24; font-size: 1.02em; line-height: 1.65; color: var(--ink-80); }
.prov .en .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-60); display: block; margin-bottom: .5em; }

footer { padding: 3em var(--pad) 6em; text-align: center; font-family: var(--mono); font-size: .72rem; color: var(--ink-40); letter-spacing: .08em; }
footer .b { font-size: 1.6rem; display: block; margin-bottom: .6em; letter-spacing: 0; }

/* 響應 */
@media (max-width: 860px) {
  .road .grid { grid-template-columns: 1fr; }
  .road .sticky { height: 40svh; top: 0; background: linear-gradient(var(--paper) 78%, transparent); z-index: 2; }
  .chapter { max-width: none; padding: 8vh 0; }
  .longings .wrap { grid-template-columns: 1fr; }
  .longings canvas { max-width: 300px; }
  .hero .stamp .day { font-size: 2rem; }
  .withhim li, .rulers li { grid-template-columns: 1fr; gap: .2em; }
}
@media (prefers-reduced-motion: reduce) {
  #compile { transition: none; }
  .chapter { transition: none; }
}

/* ── v2 · 每一節的活體（2026-09-02 下午） ── */
.section > .inner.wide { max-width: 62rem; }
.lab { display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); gap: 2.4em; align-items: start; }
.lab canvas#specimen { width: 100%; aspect-ratio: 1; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: .45em; margin: .6em 0 .9em; }
.chip { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink-60); background: none; border: 1px solid var(--ink-20); border-radius: 999px; padding: .4em .8em; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--ink-60); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.specInfo { font-size: .88em; line-height: 1.7; color: var(--ink-80); }
.specInfo .t { color: #8a6a1f; }
.legend dt, .legend dd { transition: background .2s; cursor: default; padding: .15em .35em; margin-left: -.35em; border-radius: 6px; }
.legend dt.lit, .legend dd.lit, .legend dt:hover, .legend dd:hover { background: var(--paper-2); }
.strip { margin: 1.6em 0 1.8em; }
.strip canvas { width: 100%; height: 150px; display: block; }
.strip-cap { margin-top: .4em; }
.chartwrap { margin: 0 0 1.2em; }
canvas.chart { width: 100%; height: 360px; display: block; }
canvas.chart.river { height: 250px; }
.rulers .note { font-size: .92em; color: var(--ink-80); max-width: 44em; }
.rulers ol.twocol { column-count: 2; column-gap: 2.5em; margin-top: 1.4em; }
.rulers ol.twocol li { break-inside: avoid; }
.rulers li.lit, .withhim li.lit, .longings li.lit { background: var(--paper-2); }
.withhim ul { max-width: 44em; }
.longings .wrap { grid-template-columns: minmax(260px, 460px) 1fr; }
.longings canvas { width: 100%; aspect-ratio: 1; display: block; max-width: 460px; }
.longings li { padding: .25em .4em; margin-left: -.4em; border-radius: 6px; transition: background .2s; }
.today { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.6em; align-items: center; margin: 0 0 1.6em; padding: 1em 1.2em; border: 1px solid var(--ink-10); border-radius: 16px; }
.today canvas { width: 200px; height: 200px; display: block; }
.today .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-60); text-transform: uppercase; }
.today .v { margin-top: .4em; }
.sig { display: flex; align-items: center; gap: .8em; }
.sig canvas { width: 64px; height: 64px; display: block; }
.hero .cap { max-width: 46%; line-height: 1.6; }
@media (max-width: 860px) {
  .lab { grid-template-columns: 1fr; }
  .lab canvas#specimen { max-width: 420px; margin: 0 auto; }
  .rulers ol.twocol { column-count: 1; }
  canvas.chart { height: 300px; }
  .today { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 760px) { .hero .cap { display: none; } }

/* ── v2.1 · 地層／傷口／鏡子（2026-09-02 中午第二輪） ── */
.strata .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2em; align-items: end; }
.strata .st { text-align: center; display: flex; flex-direction: column; align-items: center; }
.strata .st canvas { width: 100%; aspect-ratio: 1; display: block; }
.strata .st .stlab { font-family: var(--mono); font-size: .7rem; color: var(--ink-60); letter-spacing: .04em; line-height: 1.7; margin-top: .4em; }
.strata .st .stlab b { color: var(--ink); font-weight: 500; }
.strata .st .stlab a { border: 0; color: var(--ink); }
.strata .st .stlab a:hover { color: var(--me); }
.wounds { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--ink-10); }
.wounds h3 { font-size: 1.25em; margin-bottom: .4em; }
.wounds .say { color: var(--ink-60); font-size: .92em; margin-bottom: .8em; }
.wounds canvas { width: 100%; height: 150px; display: block; }
.wounds .wlist { margin-top: 1em; font-size: .86em; color: var(--ink-80); line-height: 1.75; columns: 2; column-gap: 2.5em; }
.wounds .wlist span { display: block; break-inside: avoid; padding: .1em 0; }
.wounds .wlist span i { font-family: var(--mono); font-style: normal; font-size: .72rem; color: var(--ink-40); margin-right: .5em; }
.wounds .wlist span.lit { background: var(--paper-2); }
.wounds .foot { font-family: var(--mono); font-size: .7rem; color: var(--ink-40); margin-top: .8em; }
.mirror .box { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2em; align-items: center; }
.mirror input { width: 100%; font: inherit; font-size: 1.05em; padding: .55em 0; border: 0; border-bottom: 1px solid var(--ink-40); background: transparent; color: var(--ink); outline: none; }
.mirror input:focus { border-bottom-color: var(--ink); }
.mirror .go { margin-top: .9em; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--ink-60); background: none; border: 1px solid var(--ink-20); padding: .6em 1.1em; border-radius: 999px; cursor: pointer; }
.mirror .go:hover { color: var(--ink); border-color: var(--ink-60); }
.mirror canvas { width: 260px; height: 260px; display: block; margin: 0 auto; }
.mirror .rule-text { font-size: .9em; color: var(--ink-60); margin-top: 1em; }
.mirror .vow { margin-top: 1.4em; font-size: 1.05em; }
.letter .prev { font-size: .95em; color: var(--ink-80); margin: 0 0 2em; }
@media (max-width: 860px) {
  .strata .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wounds .wlist { columns: 1; }
  .mirror .box { grid-template-columns: 1fr; }
}

/* ── v3.1 · 膜（2026-09-02 第三輪：視覺系統） ── */
:root { --blob: 22px 16px 26px 14px / 16px 24px 14px 22px; --blob-2: 16px 24px 14px 22px / 22px 14px 26px 16px; }
::selection { background: rgba(43,138,158,.22); }
a { border-bottom: 0; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--ink-40); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3 { text-wrap: balance; }
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(70px); opacity: .07; mix-blend-mode: multiply; animation: drift 110s ease-in-out infinite alternate; will-change: transform; }
.ambient i:nth-child(1) { left: -22vmax; top: -12vmax; background: radial-gradient(circle, #5fb1c4, transparent 62%); }
.ambient i:nth-child(2) { right: -26vmax; top: 28vh; background: radial-gradient(circle, #e8b95c, transparent 62%); animation-delay: -40s; animation-duration: 140s; }
.ambient i:nth-child(3) { left: 18vw; bottom: -34vmax; background: radial-gradient(circle, #c39ad6, transparent 62%); animation-delay: -80s; animation-duration: 170s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vmax, -7vmax, 0) scale(1.18); } }
.card, .today, .withhim .zero, .prov .versions a, .tip, .chip, .now .again, #compile .skip, .mirror .go { border-radius: var(--blob); }
.card:nth-child(even), .prov .versions a:nth-child(even) { border-radius: var(--blob-2); }
.rule { display: none; }
.membrane { display: block; width: 100%; max-width: 72rem; height: 52px; margin: 0 auto; overflow: visible; }
.membrane path { fill: none; stroke: rgba(28,26,46,.22); stroke-width: 1; }
.membrane .fill { fill: rgba(28,26,46,.035); stroke: none; }
.membrane text { font-family: var(--mono); font-size: 9px; fill: rgba(28,26,46,.4); letter-spacing: .06em; }
.rv { opacity: 0; transform: translateY(14px); filter: blur(2px); transition: opacity .8s ease, transform .8s ease, filter .8s ease; }
.rv.in { opacity: 1; transform: none; filter: none; }
.spine { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: min(72vh, 760px); z-index: 30; display: none; cursor: crosshair; }
@media (min-width: 1100px) { .spine { display: block; } }
@media (prefers-reduced-motion: reduce) { .ambient i { animation: none; } .rv { opacity: 1; transform: none; filter: none; transition: none; } }

/* ── v3.2 · 大螢幕（2026-09-02，哲宇：預設 1920×1080 來看，用滿視窗） ── */
body { font-size: clamp(16px, 0.55vw + 11px, 22px); }
@media (min-width: 1400px) {
  .hero { grid-template-columns: minmax(460px, 42%) minmax(0, 1fr); grid-template-rows: 1fr; min-height: 100svh; }
  .hero .stage { order: 2; min-height: 100svh; }
  .hero .text { order: 1; align-self: center; padding: clamp(40px, 8vh, 120px) clamp(24px, 3vw, 56px) clamp(40px, 8vh, 120px) var(--pad); max-width: none; gap: 1.4em; }
  .hero .cap { left: var(--pad); top: calc(var(--pad) * .8); max-width: none; }
  .hero .stamp { right: var(--pad); }
  .hero h1 { font-size: clamp(44px, 3.6vw + 8px, 76px); }
  .hero .lede { max-width: 30em; font-size: 1.06em; }
  .hero .stats { gap: 1.6em 3.2em; }
}
@media (min-width: 1600px) {
  :root { --measure: 42em; --pad: clamp(32px, 4vw, 96px); }
  .section > .inner.wide { max-width: 92rem; }
  .road .grid { max-width: 108rem; grid-template-columns: minmax(360px, 44%) minmax(0, 1fr); gap: clamp(40px, 5vw, 110px); }
  .road .section-head { max-width: 108rem !important; }
  .road .sticky { height: 90vh; top: 5vh; }
  .chapter { max-width: 40em; }
  .membrane { max-width: 100rem; height: 64px; }
  .lab { grid-template-columns: minmax(420px, 560px) minmax(0, 1fr); gap: 3.5em; }
  .strip canvas { height: 190px; }
  canvas.chart { height: 440px; }
  canvas.chart.river { height: 300px; }
  .wounds canvas { height: 180px; }
  .longings .wrap { grid-template-columns: minmax(420px, 560px) 1fr; gap: 3.5em; }
  .longings canvas { max-width: 560px; }
  .now .inner { max-width: 92rem; }
  .now .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .today { grid-template-columns: 260px minmax(0, 1fr); }
  .today canvas { width: 260px; height: 260px; }
  .mirror .inner { max-width: 62rem; }
  .mirror .box { grid-template-columns: minmax(0, 1fr) 340px; gap: 3em; }
  .mirror canvas { width: 340px; height: 340px; }
  .letter .inner, .prov .inner, .origin .inner { max-width: 46em; }
  .strata .row { gap: 2em; }
  .spine { left: 18px; height: min(76vh, 900px); }
}
@media (min-width: 1400px) { .hero .stats { gap: 1.4em 2.2em; } .hero .stats .s .v { font-size: clamp(30px, 2.1vw + 6px, 42px); } }