/* leeherworks v2 全站樣式。token 在 tokens.css；這裡只有版面與元件。 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-0); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 橫向不准捲：手機瀏覽器只在 body 設 overflow-x:hidden 擋不住（會出橫向捲軸），html 與 body 都要，且用 clip 不會變成捲動容器 */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
body { font-family: var(--font-ui); color: var(--text-1); background: var(--bg-0); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--blue-2); text-decoration: none; }
b, strong { color: var(--text-1); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 頂欄 ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20; padding: .7rem 0;
  background: linear-gradient(180deg, rgba(5,8,15,.85), rgba(5,8,15,0)); transition: background .3s;
}
.top.solid { background: rgba(5,8,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1.1rem; }
.logo { display: flex; align-items: center; gap: .55rem; color: var(--text-1); font-weight: 700; letter-spacing: .04em; margin-right: auto; }
.logo i { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px rgba(34,211,238,.6); }
.top .wrap > nav a { color: var(--text-2); font-size: .88rem; padding: .3rem .1rem; border-bottom: 1px solid transparent; }
.top .wrap > nav a:hover { color: var(--text-1); }
.top .wrap > nav { display: flex; gap: 1.1rem; }
/* 手機：漢堡＋抽屜 */
.burger { display: none; width: 40px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); cursor: pointer; padding: 8px 10px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2px; background: var(--text-1); border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* 抽屜放在 .top 裡面（.top 有 backdrop-filter 會變成 fixed 的定位基準），所以用 absolute 掛在頂欄正下方 */
.drawer { position: absolute; left: 0; right: 0; top: 100%; z-index: 19; background: rgba(5,8,15,.97); border-bottom: 1px solid var(--line); padding: .6rem 1.25rem 1.4rem; max-height: calc(100vh - 4rem); overflow: auto; }
.drawer nav { display: flex; flex-direction: column; gap: .2rem; }
.drawer nav a { display: block; color: var(--text-1); font-size: 1.05rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.drawer nav a[aria-current="page"] { color: var(--cyan); }
.drawer nav .btn { display: flex; margin-top: 1rem; justify-content: center; border-bottom: 1px solid rgba(201,138,58,.55); }
.top:has(.drawer:not([hidden])) { background: rgba(5,8,15,.97); }
@media (max-width: 640px) {
  .top .wrap > nav, .top > .wrap > .btn { display: none; }
  .burger { display: flex; }
}
@media (min-width: 641px) { .drawer { display: none !important; } }

.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 9px; font-weight: 600; font-size: .9rem; border: 1px solid var(--line); color: var(--text-1); background: var(--bg-2); transition: transform .15s, border-color .2s, background .2s; will-change: transform; }
.btn:hover { border-color: var(--blue); }
.btn.copper { border-color: rgba(201,138,58,.55); color: #f1d6b0; background: linear-gradient(180deg, #2a1e0f, #1a1309); }
.btn.copper:hover { border-color: var(--copper); box-shadow: 0 0 22px rgba(201,138,58,.25); }
.btn.signal { background: var(--signal); color: #04110c; border: none; }

/* ---------- hero ---------- */
.hero-wrap { position: relative; height: 260vh; }                 /* 捲動距離＝變形的時間軸 */
.hero-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }   /* 常駐背景：整頁浮在神經網路上 */
#stage canvas { display: block; width: 100%; height: 100%; }
#poster { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
#poster svg { width: min(90vw, 900px); height: auto; }
.hero-text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 1rem; pointer-events: none; }
.stage-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .3em; color: var(--cyan); margin-bottom: 1.2rem; min-height: 1.2em; }
.hero-text h1 { font-size: clamp(2.6rem, 8vw, 6.4rem); font-weight: 800; letter-spacing: .06em; line-height: 1.1; display: inline-flex; gap: .04em; }
.hero-text .ch { color: rgba(229,238,248,.10); -webkit-text-stroke: 1px rgba(148,163,184,.25); transition: color .5s ease, -webkit-text-stroke-color .5s ease, text-shadow .5s ease; }
.hero-text .ch.lit { color: var(--text-1); -webkit-text-stroke-color: transparent; text-shadow: 0 0 24px rgba(34,211,238,.45); }
.hero-text .ch.lit.green { text-shadow: 0 0 28px rgba(16,185,129,.55); }
.hero-text .sub { font-family: var(--font-mono); font-size: clamp(.8rem, 2vw, 1.05rem); letter-spacing: .32em; color: var(--text-2); margin-top: 1.4rem; min-height: 1.4em; }
.hero-text .sub .decoded { color: var(--green-2); }
.tagline { margin-top: 2rem; font-size: clamp(.95rem, 2.2vw, 1.2rem); color: var(--text-2); opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.tagline.show { opacity: 1; transform: none; }
.tagline b { color: var(--copper); font-weight: 600; }
.hint { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .25em; color: var(--text-3); transition: opacity .4s; }
.hint::after { content: ""; display: block; width: 1px; height: 28px; margin: .5rem auto 0; background: var(--signal); animation: hint 1.6s ease-in-out infinite; }
.hint.hide { opacity: 0; }
@keyframes hint { 0%,100% { transform: scaleY(.3); transform-origin: top; opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .hint::after { animation: none; } }

/* 驗收 HUD：只在 ?debug 出現 */
#hud { display: none; position: fixed; right: .8rem; top: 3.6rem; z-index: 30; font-family: var(--font-mono); font-size: .7rem; line-height: 1.6; color: var(--text-2); background: rgba(10,15,28,.85); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; }
#hud.on { display: block; }
#hud b { color: var(--text-1); } #hud .ok { color: var(--green-2); } #hud .bad { color: #f87171; } #hud .warn { color: var(--amber); }

/* ---------- 內容區 ---------- */
main { position: relative; z-index: 1; }
section.block { position: relative; padding: 6rem 0; }
/* 每段自己的光暈：藍（結構）→ 綠（長出來的）→ 銅（人） */
section.block::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 50% at 15% 20%, var(--glow-a, rgba(59,130,246,.16)), transparent 70%), radial-gradient(50% 45% at 85% 80%, var(--glow-b, rgba(16,185,129,.10)), transparent 70%); }
#intro { --glow-a: rgba(59,130,246,.18); --glow-b: rgba(34,211,238,.08); }
#flows { --glow-a: rgba(34,211,238,.12); --glow-b: rgba(16,185,129,.14); }
#knowledge { --glow-a: rgba(16,185,129,.16); --glow-b: rgba(59,130,246,.08); }
#path { --glow-a: rgba(59,130,246,.10); --glow-b: rgba(16,185,129,.12); }
#about { --glow-a: rgba(201,138,58,.16); --glow-b: rgba(59,130,246,.08); }
/* 段落分隔：一條有電流在跑的訊號線 */
section.block + section.block::after, .bus + section.block::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.5) 30%, rgba(34,211,238,.9) 50%, rgba(16,185,129,.5) 70%, transparent); background-size: 200% 100%;
  animation: signal 6s linear infinite; }
@keyframes signal { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { section.block::after { animation: none; } }
html[data-motion="off"] section.block::after { animation: none; }

/* 資料匯流排跑馬燈（效果 J） */
.bus { position: relative; z-index: 1; overflow: hidden; contain: paint; width: 100%; padding: 1.1rem 0; border-top: 1px solid rgba(28,38,56,.7); border-bottom: 1px solid rgba(28,38,56,.7); background: rgba(5,8,15,.55); backdrop-filter: blur(4px); }
.bus-track { display: flex; gap: 3rem; white-space: nowrap; width: max-content; animation: bus 40s linear infinite; font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2.4rem); letter-spacing: .12em; }
.bus-track span { color: rgba(229,238,248,.16); display: inline-flex; align-items: center; gap: 3rem; }
.bus-track span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px rgba(34,211,238,.6); }
.bus-track span.h { color: var(--copper); } .bus-track span.a { color: var(--blue-2); } .bus-track span.l { color: var(--green-2); } .bus-track span.o { color: var(--text-1); }
@keyframes bus { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .bus-track { animation: none; } }
html[data-motion="off"] .bus-track { animation: none; }
.kicker { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .3em; color: var(--cyan); margin-bottom: .8rem; }
.kicker::before { content: "// "; color: var(--text-3); }
h2.title { font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: .02em; line-height: 1.25; white-space: nowrap; }   /* 標題不斷行 */
@media (max-width: 860px) { h2.title { white-space: normal; text-wrap: balance; word-break: keep-all; overflow-wrap: normal; font-size: clamp(1.35rem, 6vw, 2rem); } }   /* 英文字不從中間斷 */
h2.title .w { display: inline; color: rgba(229,238,248,.18); transition: color .45s; }   /* inline-block 會讓英文字從字母中間斷行 */
h2.title .w.lit { color: var(--text-1); }
p.lead { color: var(--text-2); max-width: 62ch; margin-top: 1rem; font-size: 1.02rem; }
p.lead b { font-weight: 600; }
.n-human { color: var(--copper); } .n-agent { color: var(--blue-2); } .n-loop { color: var(--green-2); }

/* 聚光卡（效果 F）：邊框跟著游標亮 */
.card { position: relative; background: rgba(10,15,28,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; overflow: hidden; --mx: 50%; --my: 50%; --glow: 59,130,246; }
.card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(var(--glow), .55), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; }
.card:hover::before { opacity: 1; }
.card.g { --glow: 16,185,129; }
.card.c { --glow: 201,138,58; }

.entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.entry { display: block; color: var(--text-1); }
.entry h3 { font-size: 1.15rem; margin-bottom: .35rem; display: flex; align-items: center; justify-content: space-between; }
.entry h3::after { content: "→"; color: var(--text-3); transition: transform .2s, color .2s; }
.entry:hover h3::after { transform: translateX(4px); color: var(--cyan); }
.entry p { color: var(--text-2); font-size: .92rem; }

/* ---------- 流程卡 ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.4rem 0 2rem; font-size: .82rem; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.human { background: var(--copper); box-shadow: 0 0 0 3px rgba(201,138,58,.25); }
.dot.agent { background: var(--blue); }
.dot.loop { background: transparent; border: 2px solid var(--green-2); }
.dot.output { background: var(--green); border-radius: 3px; }
.dot.input { background: var(--text-3); border-radius: 3px; }

.flows { display: grid; gap: 1.4rem; }
.flow { padding: 1.6rem 1.6rem 1.4rem; }
.flow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: .3rem; }
.flow-head h3 { font-size: 1.25rem; font-weight: 700; }
.status { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; padding: .15rem .55rem; border-radius: 5px; border: 1px solid; }
.status.wip { color: var(--amber); border-color: rgba(245,158,11,.5); }
.status.shadow { color: var(--blue-3); border-color: rgba(96,165,250,.5); }
.status.live { color: var(--green-2); border-color: rgba(52,211,153,.5); }
.flow-input { color: var(--text-3); font-size: .88rem; }
.flow-input b { color: var(--text-2); font-weight: 500; }

.trace { display: block; width: 100%; height: auto; margin: 1.2rem 0 .6rem; overflow: visible; }
.trace .wire { fill: none; stroke: var(--line); stroke-width: 2; }
.trace .wire-lit { fill: none; stroke: url(#sig); stroke-width: 2; stroke-dasharray: 60 900; stroke-dashoffset: 960; opacity: .9; }
.trace .node-h { fill: var(--copper); stroke: rgba(201,138,58,.35); stroke-width: 6; }
.trace .node-a { fill: var(--blue); }
.trace .node-l { fill: var(--bg-1); stroke: var(--green-2); stroke-width: 2.5; }
.trace .node-o { fill: var(--green); }
.trace .node-i { fill: var(--text-3); }
.trace .loop-arc { fill: none; stroke: var(--green-2); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .8; }
.trace text { fill: var(--text-2); font-family: var(--font-ui); font-size: 11px; text-anchor: middle; }
.trace text.h { fill: #f1d6b0; font-weight: 600; }
.trace g.node { cursor: default; }
.trace g.node:hover text { fill: var(--text-1); }
.trace g.node[data-kind="human"] { cursor: pointer; }
/* 模擬：訊號封包與節點狀態 */
.trace .packet { fill: #fff; filter: drop-shadow(0 0 6px rgba(34,211,238,.9)); }
.trace .packet.h { fill: var(--copper); filter: drop-shadow(0 0 8px rgba(201,138,58,.9)); }
.trace .packet.done { fill: var(--green-2); filter: drop-shadow(0 0 10px rgba(52,211,153,.9)); }
.trace .ring { fill: none; stroke: var(--copper); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.trace .ring.on { opacity: 1; animation: ring 1.2s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9 } to { transform: scale(2.6); opacity: 0 } }
.trace text.state { fill: var(--text-1); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; opacity: 0; transition: opacity .2s; }
.trace text.state.on { opacity: 1; }
.trace text.state.h { fill: #f1d6b0; }
.trace text.state.l { fill: var(--green-2); }
.trace g.node.active circle, .trace g.node.active rect { filter: drop-shadow(0 0 8px currentColor); }
.trace g.node.waiting circle { stroke: var(--copper); stroke-width: 10; stroke-opacity: .35; }
.sim-note { color: var(--text-3); font-size: .78rem; margin-top: .2rem; font-family: var(--font-mono); letter-spacing: .05em; }
html[data-motion="off"] .trace .ring.on { animation: none; }

.flow-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.flow-col h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; color: var(--text-3); margin-bottom: .5rem; display: flex; align-items: center; gap: .45rem; }
.flow-col ul { padding-left: 1.1rem; color: #cbd5e1; font-size: .9rem; }
.flow-col li { margin: .25rem 0; }
.flow-col p { color: #cbd5e1; font-size: .9rem; }
.flow-col.human h4 { color: var(--copper); }
.flow-foot { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--text-2); }
.flow-foot b { font-weight: 500; color: var(--text-3); margin-right: .3rem; }
.flow-foot .tools span { font-family: var(--font-mono); font-size: .72rem; color: var(--blue-3); background: rgba(59,130,246,.12); padding: .05rem .45rem; border-radius: 4px; margin-right: .3rem; }
.note { color: var(--text-3); font-size: .82rem; margin-top: 1rem; }

/* ---------- 知識 / 路線 / 合作 ---------- */
.kgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.kgroup h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.kgroup p { color: var(--text-2); font-size: .9rem; }
.kgroup ol { margin-top: .8rem; padding-left: 1.2rem; color: #cbd5e1; font-size: .9rem; }
.kgroup li { margin: .35rem 0; }
.soon { display: inline-block; margin-top: .8rem; font-family: var(--font-mono); font-size: .7rem; color: var(--amber); letter-spacing: .1em; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--text-3); font-size: .8rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
footer button { font: inherit; color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 6px; padding: .25rem .6rem; cursor: pointer; }
footer button[aria-pressed="true"] { color: var(--amber); border-color: rgba(245,158,11,.5); }

/* 進場（效果 G）：CSS scroll-driven，不支援就直接顯示 */
.rise { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise both linear; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}

/* ======================================================================
   子頁（知識／路線／合作）
   ====================================================================== */
.page main { padding-top: 5.5rem; }
.hero-page { padding-top: 4rem; }
/* 子頁背景：PCB 走線層（board.js），固定、低亮度 */
.board { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55; overflow: hidden; }
.board svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.board .b-dots circle { fill: #1c2638; }
.board .b-wires path { fill: none; stroke: #16213a; stroke-width: 2; stroke-linejoin: round; }
.board .b-pulses path { fill: none; stroke: url(#bsig); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.board .b-vias circle { fill: #0a0f1c; stroke: #c98a3a; stroke-width: 1.5; stroke-opacity: .5; }
.page-green .board .b-wires path { stroke: #10241f; }
.page-copper .board .b-wires path { stroke: #211a10; }
.top nav a[aria-current="page"] { color: var(--text-1); border-bottom-color: var(--cyan); }

/* 知識：判準關聯圖（效果 I） */
.graph-wrap { margin-top: 2rem; padding: 1rem 1rem .6rem; }
.graph { width: 100%; height: auto; display: block; overflow: visible; }
.graph .edge { stroke: #1f2b40; stroke-width: 1.5; transition: stroke .25s, stroke-width .25s; }
.graph .edge.hot1 { stroke: var(--neon); stroke-width: 2.5; filter: url(#glow); }
.graph .edge.hot2 { stroke: var(--magenta); stroke-width: 2; opacity: .8; }
.graph .gnode { cursor: pointer; outline: none; }
.graph .halo { fill: rgba(16,185,129,.08); transition: fill .25s, r .25s; }
.graph .core { fill: var(--green); stroke: #0a1a18; stroke-width: 3; transition: fill .2s; }
.graph text { fill: var(--text-2); font-size: 12.5px; text-anchor: middle; font-family: var(--font-ui); transition: fill .2s; }
.graph .gnode:hover text, .graph .gnode.src text { fill: var(--text-1); font-weight: 600; }
.graph .gnode.src .core { fill: #fff; filter: url(#glow); }
.graph .gnode.src .halo { fill: rgba(94,234,212,.22); }
.graph .gnode.hop1 .core { fill: var(--neon); filter: url(#glow); }
.graph .gnode.hop1 .halo { fill: rgba(94,234,212,.16); }
.graph .gnode.hop2 .core { fill: var(--magenta); }
.graph .gnode.hop2 .halo { fill: rgba(232,121,249,.14); }
.graph-hint { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .15em; color: var(--text-3); text-align: center; margin-top: .3rem; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.rule { --glow: 16,185,129; transition: border-color .25s, transform .25s; }
.rule.on { border-color: rgba(94,234,212,.7); transform: translateY(-2px); }
.rule h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.rule p { color: #cbd5e1; font-size: .92rem; }
.rule-links { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.rule-links span { font-size: .7rem; color: var(--green-3); background: rgba(16,185,129,.12); padding: .05rem .5rem; border-radius: 4px; }
.kgroup.card { color: var(--text-1); }

/* 路線：時間軸 */
.timeline { position: relative; padding-left: 2.6rem; }
.rail { position: absolute; left: 1.1rem; top: 0; bottom: 0; width: 2px; background: var(--line); }
.rail-lit { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--signal); box-shadow: 0 0 12px rgba(34,211,238,.5); transition: height .8s ease; }
.station { position: relative; margin-bottom: 2.4rem; opacity: .35; transform: translateX(8px); transition: opacity .5s, transform .5s; }
.station.on { opacity: 1; transform: none; }
.st-node { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.st-dot { position: absolute; left: -2.6rem; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; background: var(--bg-1); border: 2px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.station.on .st-dot { border-color: var(--copper); box-shadow: 0 0 0 4px rgba(201,138,58,.22); background: var(--copper); }
.st-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .25em; color: var(--cyan); }
.st-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.st-card p { color: #cbd5e1; }
.st-card ol { margin-top: .6rem; padding-left: 1.2rem; color: #cbd5e1; }
.st-card li { margin: .3rem 0; }

/* 合作 */
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.term h3 { font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.term p { color: #cbd5e1; font-size: .9rem; }
.term.no { opacity: .8; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 1.55rem; height: 1px; background: var(--signal); opacity: .35; }
.step { --glow: 59,130,246; }
.step[data-kind="human"] { --glow: 201,138,58; }
.step[data-kind="loop"] { --glow: 16,185,129; }
.step .pill { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: .15rem .55rem; border-radius: 5px; position: relative; }
.step h3 { font-size: 1.02rem; margin: .8rem 0 .35rem; }
.step p { color: #cbd5e1; font-size: .9rem; }
.formwrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 820px) { .formwrap { grid-template-columns: 1fr; } }
form label { display: block; font-size: .85rem; color: var(--text-2); margin: .9rem 0 .3rem; }
form label i { font-style: normal; color: var(--text-3); font-size: .75rem; }
form input, form textarea, form select { width: 100%; font: inherit; font-size: .95rem; color: var(--text-1); background: var(--bg-0); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; outline: none; }
form input:focus, form textarea:focus, form select:focus { border-color: var(--copper); }
form textarea { min-height: 92px; resize: vertical; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.toast { min-height: 1.4em; font-size: .85rem; margin-top: .6rem; }
.toast.ok { color: var(--green-2); } .toast.bad { color: #f87171; }
.formside h3 { font-size: 1rem; margin-bottom: .5rem; }
.formside ul { padding-left: 1.1rem; color: #cbd5e1; font-size: .9rem; }
.formside li { margin: .3rem 0; }
.direct { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px dashed var(--line); color: var(--text-2); font-size: .88rem; }

/* 首頁的路線縮圖／合作四步：水平訊號線＋依序點亮的節點 */
.mini-rail { margin-top: 1.6rem; padding: 1.4rem 1.4rem 1.1rem; }
.mr-line { position: relative; height: 2px; background: var(--line); margin: .6rem .5rem 1.2rem; border-radius: 2px; }
.mr-lit { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--signal); box-shadow: 0 0 10px rgba(34,211,238,.6); transition: width .5s ease; }
.mr-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.mr-node { position: relative; opacity: .35; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.mr-node.on { opacity: 1; transform: none; }
.mr-node .dot { position: absolute; top: -1.95rem; left: .3rem; width: 14px; height: 14px; }
.mr-node.on .dot.human { box-shadow: 0 0 0 4px rgba(201,138,58,.28); }
.mr-node b { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; color: var(--cyan); margin-bottom: .2rem; }
.mr-node span { font-size: .88rem; color: #cbd5e1; line-height: 1.5; display: block; }
/* 手機：縮圖改成直的，圓點掛在每個節點左側，訊號線變成左邊一條 */
@media (max-width: 640px) {
  .mini-rail { padding: 1.2rem 1.2rem 1.2rem 2.6rem; position: relative; }
  .mr-line { position: absolute; left: 1.25rem; top: 1.4rem; bottom: 1.4rem; width: 2px; height: auto; margin: 0; }
  .mr-lit { width: 100% !important; height: var(--lit, 0); transition: height .5s ease; }
  .mr-nodes { grid-template-columns: 1fr; gap: 1.1rem; }
  .mr-node .dot { top: .2rem; left: -1.9rem; }
}

/* 手機的圖：不等比例縮小，改直排、字級固定 */
.trace.v { margin: .8rem 0 .4rem; }
.trace.v text { font-size: 14px; text-anchor: start; }   /* CSS 的 text-anchor 會蓋過屬性，直排要靠左 */
.trace.v text.state { font-size: 12px; }
.trace.v .loop-arc { stroke-width: 1.5; }
.graph.v text { font-size: 14.5px; }
.graph.v .halo { r: 20; }
@media (max-width: 640px) {
  .flow { padding: 1.2rem 1rem 1.1rem; }
  .graph-wrap { padding: .6rem .4rem .4rem; }
  .flow-cols { gap: 1rem; }
}