/* towow.ai 首页。一镜到底的下潜：夜海上空的网络 → 一座港 → 三十二个候选 → 一条事件 → 写它的程序 → 一个字 → 纸。
   色与 通爻网/web/DESIGN.md 同一套：夜海、钠灯、朱信号只给"拿不准"、蓝图白只给"定案"、灰痕、字幕白。 */
:root {
  --sea: #05080C; --text: #EDE6DA; --dim: rgba(237, 230, 218, 0.62); --faint: rgba(237, 230, 218, 0.34);
  --sodium: #FFB35C; --sodium-hi: #FFE2B0; --ver: #FF5A36; --blue: #D6E6FF; --ash: #46505A; --ash-hi: #6B7680; --flight: #C9D3DC;
  --paper: #EDE6DA; --ink: #0A0E14; --ink-2: #4A5058; --ink-line: rgba(10, 14, 20, 0.22);
  --m: 64px; --x: 112px;
  --sans: "Familjen Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --serif: "Songti SC", "Noto Serif SC", "STSong", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sea); color: var(--text); }
body { font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.005em; text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
html[lang="zh-CN"] { line-break: strict; hanging-punctuation: allow-end; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 { letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--mono); font-feature-settings: "liga" 0, "calt" 0; }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; font-size: 15px; }
.links a { border-bottom: 1px solid rgba(237, 230, 218, 0.35); padding-bottom: 1px; transition: border-color 0.25s; }
.links a:hover { border-color: var(--text); }
.facts { display: grid; gap: 10px; margin: 26px 0 0; }
.facts div { display: grid; grid-template-columns: 5em 1fr; gap: 14px; align-items: baseline; }
.facts dt { font-size: 22px; font-weight: 500; color: var(--sodium-hi); font-variant-numeric: tabular-nums; }
.facts dd { margin: 0; font-size: 14px; color: var(--dim); }
.facts.small dt { font-size: 18px; }

/* 顶栏：只在第一屏 */
.top { position: absolute; z-index: 6; top: 22px; left: var(--m); right: var(--m); display: flex; align-items: baseline; gap: 22px; font-size: 14px; }
.top .mark { font-size: 18px; font-weight: 500; letter-spacing: 0.02em; margin-right: auto; }
.top nav { display: flex; gap: 22px; }
.top nav a { color: var(--dim); transition: color 0.25s; }
.top nav a:hover { color: var(--text); }

/* 底：通爻网的实时 3D */
.stage { position: fixed; inset: 0; z-index: 0; }
.stage { background: var(--sea) url(poster.jpg) center / cover no-repeat; }
.stage iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: transparent; opacity: 0; transition: opacity 1.2s; }
.stage.ready iframe { opacity: 1; }
.stage .poster { position: absolute; inset: 0; background: url(poster.jpg) center / cover no-repeat; transform-origin: 50% 50%; }
.stage.ready .poster { display: none; }
/* 字区压暗：画面越忙越暗（--busy 由网络每 2 秒报来），只压字那一边，另一边留给画面 */
.stage .scrim { position: absolute; inset: 0; pointer-events: none; opacity: calc(0.6 + 0.4 * var(--busy, 0)); transition: opacity 1.5s; background: linear-gradient(90deg, rgba(5, 8, 12, 0.96) 0, rgba(5, 8, 12, 0.88) 34%, rgba(5, 8, 12, 0.5) 52%, rgba(5, 8, 12, 0) 70%); }
.stage .veil { position: absolute; inset: 0; background: var(--sea); opacity: 0; pointer-events: none; }
.stage.off { visibility: hidden; }

/* 镜 */
.lens { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; overflow: hidden; }
.lens.off { visibility: hidden; }
.lens.off .L { visibility: hidden !important; }
.L { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; }
.port-glow { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 176, 1) 0, rgba(255, 179, 92, 0.75) 12%, rgba(255, 179, 92, 0.18) 34%, rgba(255, 179, 92, 0) 62%); }
.far { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ash-hi); opacity: 0.55; }
.far.lit { background: var(--sodium); opacity: 0.5; box-shadow: 0 0 6px rgba(255, 179, 92, 0.6); animation: breathe var(--dur, 12s) ease-in-out var(--delay, 0s) infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.75; } }
.port-ring.pulse { animation: pulse 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes pulse { 0% { transform: scale(1.35); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
.port-ring { position: absolute; left: -54px; top: -54px; width: 108px; height: 108px; border-radius: 50%; border: 1px solid rgba(237, 230, 218, 0.55); }
.ring { position: absolute; left: -300px; top: -300px; overflow: visible; }
.ring .probe { stroke: var(--flight); stroke-width: 0.6; fill: none; opacity: 0; }
.ring .tick { fill: var(--ash); opacity: 0; }
.ring .tick.unsure { fill: var(--ver); }
.ring .tick.gone, .ring .tick.route { fill: var(--sodium); }
.ring .ask { stroke: var(--ver); stroke-width: 0.8; fill: none; opacity: 0; }
.ring .reply { stroke: var(--sodium); stroke-width: 0.8; fill: none; opacity: 0; }
.ring .route { stroke: var(--sodium); stroke-width: 1.6; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 179, 92, 0.9)); }
.ring .head { fill: var(--flight); opacity: 0; }
.ring .flare { fill: var(--ver); opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 90, 54, 0.9)); }
.ring .back { fill: var(--sodium-hi); opacity: 0; }
.ring .ship { fill: var(--sodium-hi); opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 226, 176, 0.9)); }
.ring .count { font: 12px var(--sans); fill: var(--dim); opacity: 0; transition: opacity 0.5s; }
.ring .count.on { opacity: 1; }
.ring .count tspan.n { font-weight: 500; fill: var(--text); font-variant-numeric: tabular-nums; }
.ring .count.route tspan.n { fill: var(--sodium-hi); }
.ring .me { fill: var(--sodium-hi); filter: drop-shadow(0 0 6px rgba(255, 226, 176, 0.9)); }
.ring .me-ring { fill: none; stroke: rgba(237, 230, 218, 0.7); stroke-width: 0.8; }
.ring text { font: 11.5px var(--sans); fill: var(--dim); opacity: 0; transform: translateX(var(--dx, 0px)); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.ring text.on { opacity: 1; transform: none; }
.tape { position: absolute; left: 0; top: 0; width: 470px; font: 13px/1.6 var(--mono); color: var(--dim); }
.rec { margin-bottom: 28px; opacity: 0.32; transition: opacity 0.4s; }
.rec.real, .rec.on { opacity: 1; }
.rec-type { font-size: 15px; color: var(--text); margin-bottom: 4px; }
.rec-type .st { color: var(--dim); font-size: 13px; margin-left: 8px; }
.rec.real .rec-type, .rec.on .rec-type { color: var(--sodium-hi); }
.rec-type.sub { margin-top: 10px; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.kv em { font-style: normal; color: var(--text); }
.kv u { text-decoration: none; color: var(--faint); margin-left: 10px; }
.kv .chg, .kv b.chg { font-weight: 400; color: var(--text); transition: color 0.5s, text-shadow 0.5s; }
.rec.on .kv .chg, .rec.on .kv b.chg { color: var(--sodium-hi); text-shadow: 0 0 10px rgba(255, 226, 176, 0.55); }
.kv.q span:last-child { font-family: var(--serif); font-size: 13.5px; color: var(--text); }
.tape .divider { font: 12px var(--sans); color: var(--faint); border-top: 1px solid var(--ash); padding-top: 10px; margin: 6px 0 24px; }
.code { position: absolute; left: 0; top: 0; margin: 0; font: 13px/1.75 var(--mono); color: var(--dim); white-space: pre; }
.code .kw { font-weight: 400; color: var(--text); }
.code q { quotes: none; color: var(--sodium); opacity: 0.55; transition: opacity 0.4s; }
.code q.on { opacity: 1; }
.code .target { color: var(--text); }
.code .ln { display: block; position: relative; padding-left: 44px; }
.code .ln::before { content: attr(data-n); position: absolute; left: 0; width: 30px; text-align: right; color: var(--ash-hi); font-variant-numeric: tabular-nums; }
.code .ln.cur { color: var(--text); }
.code .ln.cur::before { color: var(--sodium); }
.code .rd { font-style: normal; margin-left: 18px; color: var(--sodium-hi); opacity: 0; transition: opacity 0.4s; }
.code .rd.on { opacity: 1; }
.code .rd::before { content: attr(data-rd); }
.question { position: absolute; left: 0; top: 0; margin: 0; width: 560px; font: 26px/1.7 var(--serif); color: var(--text); letter-spacing: 0.02em; }
.question .target { color: var(--sodium-hi); }
.question .answer { display: block; margin-top: 18px; font: 14px var(--mono); color: var(--sodium-hi); opacity: 0; transition: opacity 0.5s; }
.question .answer.on { opacity: 1; }
.glyph { position: absolute; left: -420px; top: -420px; width: 840px; height: 840px; display: flex; align-items: center; justify-content: center; font: 620px/1 var(--serif); color: var(--paper); filter: url(#grain); }

/* 镜旁的话 */
.say { position: fixed; z-index: 3; left: var(--x); top: 20vh; width: min(430px, 34vw); pointer-events: none; }
.cap { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; text-shadow: 0 0 18px rgba(5, 8, 12, 0.95), 0 0 3px rgba(5, 8, 12, 0.9); }
.cap.on { opacity: 1; transform: none; pointer-events: auto; }
.cap h2 { font-size: 30px; line-height: 1.25; }
.cap h3 { font-size: 22px; line-height: 1.3; }
.cap p { margin-top: 16px; color: var(--dim); }
.cap .when { margin-top: 0; font-size: 13.5px; color: var(--faint); margin-bottom: 8px; }
/* 结果清单：一行一个事实，点的颜色和环上的点一致 */
.outcome { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.outcome li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 12px; align-items: baseline; position: relative; padding-left: 18px; opacity: 0.35; transition: opacity 0.4s; }
.outcome li.on, .outcome.plain li { opacity: 1; }
.outcome li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ash-hi); }
.outcome li[data-k="ignore"]::before { background: var(--ash); }
.outcome li[data-k="unsure"]::before { background: var(--ver); box-shadow: 0 0 6px rgba(255, 90, 54, 0.6); }
.outcome li[data-k="gone"]::before { background: var(--ash-hi); }
.outcome li[data-k="route"]::before { background: var(--sodium); box-shadow: 0 0 8px rgba(255, 179, 92, 0.7); }
.outcome b { font-weight: 500; font-size: 22px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.outcome li > span { font-size: 15px; color: var(--dim); line-height: 1.5; }
.outcome i { font-style: normal; color: var(--text); margin-right: 8px; }
.outcome em { font-style: normal; }
.outcome .anchor { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); letter-spacing: 0.01em; }
/* 还能往下：停稳收层落定后、以及第一屏停留几秒后，底部中间一道短线，一点光往下走 */
.more { position: fixed; z-index: 3; left: 50%; bottom: 22px; width: 1px; height: 30px; margin-left: -0.5px; background: rgba(237, 230, 218, 0.14); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.more.on { opacity: 1; }
.more i { position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--sodium-hi); box-shadow: 0 0 8px 2px rgba(255, 226, 176, 0.6); animation: drop 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes drop { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
.outcome.plain li { padding-left: 0; grid-template-columns: minmax(5.5em, max-content) minmax(0, 1fr); }
.outcome.plain li::before { display: none; }
.outcome.plain b { font: 500 14px var(--mono); color: var(--sodium-hi); }
.cap .facts + .facts { margin-top: 14px; }
.cap[data-cap="3"] { width: 360px; }
.cap .facts dt { white-space: nowrap; }
.cap .facts div { grid-template-columns: minmax(5em, max-content) 1fr; }

/* 深度读数与引线 */
.depth { position: fixed; z-index: 3; left: var(--x); bottom: 26px; display: flex; gap: 18px; font-size: 13px; line-height: 1; color: var(--faint); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.4s; }
.depth.on { opacity: 1; }
.depth > span:first-child { color: var(--dim); min-width: 5.5em; }
.thread { position: fixed; z-index: 3; left: var(--m); top: 18vh; bottom: 12vh; width: 1px; background: rgba(237, 230, 218, 0.08); pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.thread.on { opacity: 1; }
.thread .lit { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--sodium); box-shadow: 0 0 6px rgba(255, 179, 92, 0.8); }
.thread .head { position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--sodium-hi); box-shadow: 0 0 12px 2px rgba(255, 226, 176, 0.8); }
.thread i.mark { position: absolute; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ash-hi); transition: background 0.3s, box-shadow 0.3s; }
.thread i.mark.cur { background: var(--sodium-hi); box-shadow: 0 0 8px 1px rgba(255, 226, 176, 0.6); }
.thread i.mark::after { content: attr(data-name); position: absolute; left: 16px; top: -6px; white-space: nowrap; font-style: normal; font-size: 12px; line-height: 16px; color: var(--dim); opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.thread i.mark:hover::after { opacity: 1; transform: none; }
.depth .dig { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -0.12em; }
.depth .dig i { display: block; font-style: normal; white-space: pre; line-height: 1; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.lens .seep { position: absolute; inset: -140px; z-index: 1; opacity: 0; pointer-events: none; filter: url(#fiber); }

main { position: relative; z-index: 1; }
section { position: relative; }

/* 表：夜海上空 */
.sky { height: 100vh; }
.hero { position: absolute; left: var(--x); top: 25vh; max-width: 600px; transition: opacity 0.4s; animation: rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero h1 { font-size: 40px; line-height: 1.18; max-width: 13em; text-shadow: 0 0 24px rgba(5, 8, 12, 0.9); }
.hero .lede { margin-top: 20px; color: var(--dim); max-width: 30em; text-shadow: 0 0 16px rgba(5, 8, 12, 0.9); }
.cmd { display: inline-block; margin-top: 34px; padding: 0 0 3px; border: 0; border-bottom: 1px solid rgba(255, 179, 92, 0.55); background: none; color: var(--sodium); font: 500 15px/1.5 var(--mono); font-feature-settings: "liga" 0, "calt" 0; cursor: pointer; text-align: left; transition: color 0.25s, border-color 0.25s; }
.cmd:hover, .cmd.done { color: var(--sodium-hi); border-color: var(--sodium-hi); }
.hint { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--faint); }
.hint code { font-size: 12px; color: var(--dim); user-select: all; }
.status { margin-top: 22px; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; min-height: 1.6em; }
.spacer { height: 1000vh; }

/* 地：纸上的账 */
.paper .flow { grid-column: 1 / -1; max-width: 1100px; min-width: 0; }
.paper .flow h2 { position: relative; }
.paper .flow h2::before { content: ""; position: absolute; left: -26px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--sodium); box-shadow: 0 0 14px 4px rgba(255, 179, 92, 0.55); opacity: 0; }
.paper .flow.land h2::before { animation: land 2.2s ease-out both; }
@keyframes land { 0% { opacity: 0; transform: translateY(-40px) scale(0.6); } 25% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; } }
.paper .note { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.paper .flow > p { margin-top: 16px; color: var(--ink-2); max-width: 640px; }
/* 八阶段小图：一条线，八个阶段，四件交接物（简报、任务包、胶囊、信封）在线上。过去灰、当前亮 */
.stages { margin: 40px 0 0; max-width: 1000px; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.stages svg { display: block; width: 100%; min-width: 720px; height: auto; font-family: var(--sans); }
.stages .st circle { fill: var(--paper); stroke: rgba(10, 14, 20, 0.35); stroke-width: 1.2; transition: stroke 0.3s, fill 0.3s; }
.stages .st text { fill: rgba(10, 14, 20, 0.45); font-size: 12px; transition: fill 0.3s; }
.stages .st .n { font-size: 11px; font-variant-numeric: tabular-nums; }
.stages .st.done circle { stroke: var(--ink-2); fill: var(--ink-2); }
.stages .st.done text { fill: var(--ink-2); }
.stages .st.on circle { stroke: var(--sodium); fill: var(--sodium); }
.stages .st.on text { fill: var(--ink); }
.stages .line { stroke: var(--ink-line); stroke-width: 1; }
.stages .ho path, .stages .ho rect { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.1; }
.stages .ho text { fill: var(--ink-2); font-size: 12px; }
.stages .ho line { stroke: var(--ink-line); stroke-width: 1; stroke-dasharray: 2 3; }
.run { display: grid; grid-template-columns: 170px 1fr; gap: 48px; margin-top: 48px; align-items: start; }
.rail { position: sticky; top: 12vh; list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 2; color: rgba(10, 14, 20, 0.35); counter-reset: st; }
.rail li { counter-increment: st; display: flex; gap: 12px; transition: color 0.3s; }
.rail li::before { content: counter(st, decimal-leading-zero); font-variant-numeric: tabular-nums; }
.rail li.done { color: var(--ink-2); }
.rail li.on { color: var(--ink); }
.rail li.on::before { color: var(--sodium); }
.ledger { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--ink-line); }
.ledger li { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 40px; padding: 26px 0 26px 32px; position: relative; opacity: 0.45; transition: opacity 0.4s; }
.ledger li.on { opacity: 1; }
.ledger li::before { content: ""; position: absolute; left: -4px; top: 34px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-line); transition: background 0.4s, box-shadow 0.4s; }
.ledger li.on::before { background: var(--sodium); box-shadow: 0 0 10px rgba(255, 179, 92, 0.8); }
.ledger .rec { opacity: 1; margin: 0; font: 13px/1.6 var(--mono); color: var(--ink-2); }
.ledger .rec-type { color: var(--ink); }
.ledger .kv em { color: var(--ink); }
.ledger .why h3 { font-size: 20px; line-height: 1.3; }
.ledger .why .when { font-size: 13px; color: rgba(10, 14, 20, 0.5); margin: 0 0 6px; }
.ledger .why p:last-child { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }

/* 地：纸 */
.paper { background: var(--paper); color: var(--ink); padding: 20vh 0 5vh; display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 400px); gap: 64px 96px; padding-left: var(--x); padding-right: var(--m); }
.paper h2 { font-size: 30px; line-height: 1.25; }
.paper .writing > p, .paper .nature > p { margin-top: 16px; color: var(--ink-2); }
.titles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; font-size: 18px; line-height: 1.4; }
.titles li { display: grid; grid-template-columns: 6.2em 4.2em minmax(0, 1fr); gap: 0 14px; align-items: baseline; }
.titles .d, .titles .sec { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.titles .tt p { margin-top: 6px; font-size: 15px; color: var(--ink-2); max-width: 36em; }
.titles a { border-bottom: 1px solid var(--ink-line); transition: border-color 0.25s; }
.titles a:hover { border-color: var(--ink); }
.paper .links a { border-color: var(--ink-line); }
.paper .links a:hover { border-color: var(--ink); }
.desk { margin-top: 56px; }
.desk h3 { font-size: 13.5px; color: var(--ink-2); font-weight: 500; letter-spacing: 0.01em; }
.room { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.room p { margin-top: 8px; }
.room b { font-weight: 500; color: var(--ink); }
.room a { border-bottom: 1px solid var(--ink-line); }
.pool { width: 160px; }
.pool i { display: block; height: 2px; margin: 7px 0; background: rgba(10, 14, 20, 0.18); transform-origin: left; }
.pool i.live { background: var(--sodium); }
.sketch { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed rgba(10, 14, 20, 0.45); position: relative; }
.sketch::before, .sketch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70px; border-top: 1px dashed rgba(10, 14, 20, 0.3); transform-origin: 0 0; }
.sketch::before { transform: rotate(-28deg); }
.sketch::after { transform: rotate(31deg); }
.paper footer { grid-column: 1 / -1; margin-top: 12vh; display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--ink-2); }
.paper footer nav { display: flex; gap: 20px; }
.paper footer nav a:hover { color: var(--ink); }

/* 静态版（系统开了减少动态）：不下潜，不放大，五层按顺序平铺在夜海上，话在左、图在右 */
body.flat .lens, body.flat .say, body.flat .depth, body.flat .thread, body.flat .spacer { display: none; }
body.flat .stage { position: absolute; height: 100vh; }
body.flat .stage .scrim { opacity: 1; }
.flat-lay { position: relative; z-index: 1; background: var(--sea); padding: 10vh var(--m) 12vh; display: grid; gap: 12vh; }
.flat-lay .lay { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.flat-lay .lay .cap { position: static; opacity: 1; transform: none; width: auto; text-shadow: none; }
.flat-lay .lay .cap + .cap { margin-top: 28px; }
.flat-lay .fig { position: relative; min-height: 320px; overflow: hidden; }
.flat-lay .fig .L { position: absolute; opacity: 1 !important; visibility: visible !important; will-change: auto; }
@media (max-width: 860px) { .flat-lay .lay { grid-template-columns: 1fr; } .flat-lay .fig { min-height: 260px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 860px) {
  :root { --m: 20px; --x: 44px; }
  body { font-size: 16px; }
  .top { top: 16px; gap: 14px; font-size: 13px; }
  .top nav { gap: 14px; }
  .top nav a:nth-child(3), .top nav a:nth-child(5) { display: none; }
  .hero { top: 20vh; right: 20px; max-width: none; }
  .hero h1 { font-size: 28px; }
  .cmd { font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
  .say { left: 20px; right: 20px; top: auto; bottom: 10vh; width: auto; }
  .cap { top: auto; bottom: 0; font-size: 14px; }
  .cap h2 { font-size: 23px; }
  .stage .scrim { background: linear-gradient(180deg, rgba(5, 8, 12, 0.96) 0, rgba(5, 8, 12, 0.88) 50%, rgba(5, 8, 12, 0.55) 70%, rgba(5, 8, 12, 0) 90%); }
  .outcome { gap: 8px; margin-top: 14px; }
  .outcome b { font-size: 18px; }
  .outcome span { font-size: 14px; }
  .cap h3 { font-size: 18px; }
  .cap p { margin-top: 10px; }
  .cap[data-cap="3"] { width: auto; }
  .facts { margin-top: 14px; gap: 6px; }
  .facts dt { font-size: 18px; }
  .links { margin-top: 12px; font-size: 14px; }
  .depth { left: 20px; bottom: 14px; font-size: 12px; }
  .thread { top: 14vh; bottom: 40vh; }
  .thread i.mark::after { display: none; }
  .titles li { grid-template-columns: 6.2em minmax(0, 1fr); gap: 2px 12px; }
  .titles .sec { grid-column: 2; order: -1; }
  .titles .d { grid-row: 1 / span 2; }
  .paper { grid-template-columns: 1fr; gap: 56px; padding-right: 20px; }
  .run { grid-template-columns: 1fr; gap: 24px; }
  .rail { position: static; display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .ledger li { grid-template-columns: 1fr; gap: 14px; padding-left: 20px; }
  .paper h2 { font-size: 25px; }
  .paper footer { flex-wrap: wrap; }
}

/* towow.net：实验室与档案（临时版） */