:root{
  --bg:#ffffff;
  --fg:#222222;
  --muted:#8a8a8d;
  --link:#787878;
  --rule:#eaeaea;
  --surface:#fafafa;
  --accent:#fe5186;
  --mono:"SF Mono",Menlo,Consolas,"Ubuntu Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1b1c1d; --fg:#a9a9b3; --muted:#6f7276; --link:#a9a9b3; --rule:#3b3d42; --surface:#232427;
  }
}
:root[data-theme="dark"]{
  --bg:#1b1c1d; --fg:#a9a9b3; --muted:#6f7276; --link:#a9a9b3; --rule:#3b3d42; --surface:#232427;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:1rem;line-height:1.54;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:684px;margin:0 auto;padding-inline:20px;padding-block:0 5rem}
img{max-width:100%;height:auto;display:block}

/* 页头 */
.masthead{
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:space-between;
  padding-block:2.5rem 3.25rem;
}
.prompt{font-family:var(--mono);font-size:1.125rem;white-space:nowrap;display:flex;align-items:center}
.prompt a{text-decoration:none;color:var(--fg)}
.prompt .mark{margin-right:5px;color:var(--muted)}
.cursor{display:inline-block;width:10px;height:1rem;background:var(--accent);margin-left:5px;border-radius:1px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.masthead nav{display:flex;gap:1.1rem;font-family:var(--mono);font-size:.875rem}
.masthead nav a{text-decoration:none;color:var(--link);padding-bottom:2px;border-bottom:1px solid transparent}
.masthead nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
.masthead nav a:hover{color:var(--fg)}

a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--fg)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* 标题与正文 */
h1{font-size:2rem;line-height:1.25;margin:0 0 .75rem;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:1.375rem;font-weight:700;margin:0 0 1.25rem;letter-spacing:-.005em;text-wrap:balance}
h3{font-size:1.0625rem;font-weight:700;margin:0 0 .25rem}
p{margin:0 0 1.1em;max-width:36em}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--fg)}
section{padding-block:3.25rem 0;border-top:1px solid var(--rule);margin-top:3.25rem}
section:first-of-type{border-top:none;margin-top:0;padding-top:0}
.lede{font-size:1.25rem;line-height:1.4;margin:0 0 1rem;max-width:30em;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin:0 0 .5rem}
.src{font-family:var(--mono);font-size:.75rem;color:var(--muted);white-space:nowrap}
.meta{font-family:var(--mono);font-size:.8125rem;color:var(--muted);margin:0 0 1rem}
.note{color:var(--muted)}

/* 行式列表：左内容右日期 */
.rows{display:flex;flex-direction:column;gap:0}
.row{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;padding-block:.5rem;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:none}
.row .what{flex:1}
.row .when{font-family:var(--mono);font-size:.8125rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 卡片组 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{border:1px solid var(--rule);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;background:var(--surface)}
.card h3{margin:0}
.card p{margin:0;flex:1;font-size:.9375rem}
.card a{font-family:var(--mono);font-size:.8125rem;text-decoration:none}
.card a::after{content:" \2192"}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* 三格 */
.scales{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.scale{border-top:2px solid var(--fg);padding-top:.75rem;display:flex;flex-direction:column;gap:.3rem}
.scale .k{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em}
.scale h3{margin:0}
.scale .t{font-family:var(--mono);font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.scale p{font-size:.9375rem;margin:.25rem 0 0}
@media (max-width:640px){.scales{grid-template-columns:1fr}}

/* 引文 */
.quotes{display:flex;flex-direction:column;gap:1.25rem}
blockquote{margin:0;padding-left:.9rem;border-left:2px solid var(--rule);color:var(--fg)}
blockquote .src{display:block;margin-top:.35rem;white-space:normal}

/* 案例四段 */
.case{display:flex;flex-direction:column;gap:1.5rem}
.qa{display:grid;grid-template-columns:5.5rem 1fr;gap:.7rem 1rem;margin:0}
.qa dt{font-family:var(--mono);font-size:.8125rem;color:var(--muted);line-height:1.7}
.qa dd{margin:0}
@media (max-width:520px){.qa{grid-template-columns:1fr;gap:.25rem}.qa dd{margin-bottom:.9rem}.qa dd:last-child{margin-bottom:0}}
figure{margin:0;display:flex;flex-direction:column;gap:.5rem}
figure img{border:1px solid var(--rule)}
figcaption{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1rem;margin:0 0 1rem}
.shots figure{margin:0}
@media (max-width:640px){.shots{grid-template-columns:1fr}}
.diagram{width:100%;height:auto;display:block}
.diagram text{font-family:var(--sans);fill:var(--fg)}
.diagram .lab{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.diagram .box{fill:var(--surface);stroke:var(--fg);stroke-width:1}
.diagram .soft{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.diagram .ln{stroke:var(--muted);stroke-width:1;fill:none}
.diagram .hi{stroke:var(--accent);stroke-width:1.5;fill:none}

/* 编号条目（用于有真实顺序的内容） */
.tastes{display:flex;flex-direction:column;gap:1.5rem;counter-reset:t}
.taste{display:grid;grid-template-columns:1.75rem 1fr;gap:1rem}
.taste::before{counter-increment:t;content:counter(t);font-family:var(--mono);font-size:.8125rem;color:var(--muted);line-height:1.8}
.taste .claim{font-weight:700;margin:0 0 .35rem}

.callout{margin-top:2rem;padding:1rem 1.15rem;background:var(--surface);border-left:2px solid var(--accent)}
.callout p{margin:0}

footer{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.8125rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between}

/* 页内目录 */
.toc{margin:1.5rem 0 0;padding:0 0 0 1.5rem;font-family:var(--mono);font-size:.8125rem;line-height:1.9;color:var(--muted);columns:2;column-gap:2rem}
.toc a{text-decoration:none}
@media (max-width:520px){.toc{columns:1}}

/* 表格 */
table.parts{width:100%;border-collapse:collapse;font-size:.9375rem}
table.parts th{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;font-weight:500;text-align:left;padding:.4rem .75rem .4rem 0;border-bottom:1px solid var(--fg)}
table.parts td{padding:.55rem .75rem .55rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.parts td:first-child{font-weight:700;white-space:nowrap}
table.parts tr:last-child td{border-bottom:none}
@media (max-width:520px){table.parts{display:block;overflow-x:auto}}

/* 作品入口 */
.entries{display:flex;flex-direction:column;gap:2rem}
.entry{display:grid;grid-template-columns:4.5rem 1fr;gap:.25rem 1rem}
.entry .k{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted);padding-top:.35rem}
.entry h2{margin:0 0 .25rem}
.entry .meta{margin:0 0 .5rem}
.entry p{margin:0 0 .5rem}
.entry a.go{font-family:var(--mono);font-size:.8125rem;text-decoration:none}
.entry a.go::after{content:" \2192"}
@media (max-width:520px){.entry{grid-template-columns:1fr}}

/* 组标题块：比部分高一级 */
section.group{border-top:2px solid var(--fg);margin-top:4.5rem;padding-block:2.5rem 0}
section.group h2{font-size:1.75rem;margin-bottom:.75rem}
section.group p{margin-bottom:.5rem}
section.group + section.case{border-top:none;margin-top:2.75rem;padding-top:0}
table.parts td .lab-td{font-family:var(--mono);font-size:.75rem;color:var(--muted);font-weight:400;white-space:normal;display:block;margin-top:.15rem;max-width:9em}

/* 金字塔：结论行 + 支撑点列表 */
.pts{margin:0;padding-left:1.15rem}
.pts li{margin:.3rem 0;max-width:36em}
.pts li::marker{color:var(--muted)}
p.top{font-weight:700;margin-bottom:.6rem}
.pts ul{list-style:none;padding-left:1rem;margin:.25rem 0 0}
.pts ul li{margin:.15rem 0}
.pts ul li::before{content:"– ";color:var(--muted)}
.qa dd ul{margin:0;padding-left:1.1rem}
.qa dd ul li{margin:.2rem 0}

/* 走一遍：一件东西走一遍的可走图（walk.js） */
.walk [id].on,.walk [id].dim{transition:opacity .35s,stroke-width .35s}
.walk .dim{opacity:.22}
.walk .on rect{stroke:var(--fg);stroke-width:1.5;fill:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.walk .on .ln{stroke:var(--fg);stroke-width:1.75}
.walk .on .hi{stroke-width:2.25}
.walk .on .lab{fill:var(--fg)}
.walk .on text{fill:var(--fg)}
.walk .cap{margin:0;font-size:.9375rem;line-height:1.5;min-height:1.5em;max-width:36em}
.walk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;font-family:var(--mono);font-size:.8125rem}
.walk-bar button{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--rule);padding:.3rem .75rem;border-radius:2px;cursor:pointer}
.walk-bar button:hover{border-color:var(--fg)}
.walk-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.walk-bar button:disabled{opacity:.4;cursor:default;border-color:var(--rule)}
.walk-bar button.play{border-color:var(--accent)}
.walk-bar button.play[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.walk-bar .idx{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}
@media (prefers-reduced-motion:reduce){.walk [id].on,.walk [id].dim{transition:none}}

/* 首屏：实物走一遍（hero-walk.js 只切 class，画面全在这里） */
.hero-walk{margin-top:.25rem}
.hero-walk .stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;transition:opacity .5s}
.hero-walk .scene{width:100%;height:auto;display:block;overflow:visible;transition:opacity .45s}
.hero-walk text{font-family:var(--sans);font-size:10px;fill:var(--fg)}
.hero-walk .tag,.hero-walk .mono{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.hero-walk .tag{font-size:10.5px}
.hero-walk .title{font-size:11px;font-weight:700;fill:var(--fg)}
.hero-walk .head{font-weight:700}
.hero-walk .mono.on{fill:var(--fg)}
.hero-walk .frame{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.hero-walk .bar{fill:var(--rule)}
.hero-walk .dot{fill:var(--muted);opacity:.6}
.hero-walk .soft{fill:var(--bg);stroke:var(--rule);stroke-width:1}
.hero-walk .ghost{fill:var(--rule)}
.hero-walk .input{fill:var(--bg);stroke:var(--muted);stroke-width:1}
.hero-walk .file{fill:none;stroke:var(--muted);stroke-width:1}
.hero-walk .file.on{stroke:var(--fg)}
.hero-walk .hot{fill:color-mix(in srgb,var(--accent) 12%,var(--surface));stroke:var(--accent);stroke-width:1}
.hero-walk .send circle{fill:var(--accent)}
.hero-walk .send path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-walk .send{transform-box:fill-box;transform-origin:center}
.hero-walk .fly,.hero-walk .bubble{transform-box:fill-box;transform-origin:center}
.hero-walk .s-links{grid-column:2}
.hero-walk .line{fill:none;stroke:var(--accent);stroke-width:1;stroke-linecap:round;stroke-dasharray:1}
.hero-walk .end{fill:var(--accent)}
.hero-walk .lbl text{fill:var(--link-hot);text-decoration:underline;text-underline-offset:2px}
.hero-walk a:hover .lbl text,.hero-walk a:focus-visible .lbl text{fill:var(--accent)}
@media (max-width:520px){.hero-walk .stage{grid-template-columns:1fr;gap:16px}.hero-walk .s-links{grid-column:auto}}

/* 无 JS、或不动画时：直接是终态，五个场景都在 */
.hero-walk.live .typed{opacity:1}
.hero-walk.live .k{opacity:0}
.hero-walk.live .bubble,.hero-walk.live .land,.hero-walk.live .fly{opacity:0}
.hero-walk.live .send{opacity:.45}
.hero-walk.live .s-links .line{stroke-dashoffset:1}
.hero-walk.live .s-links .lbl{opacity:0}
.hero-walk.live .scene{opacity:.36}
.hero-walk.live.s1 .s-phone,.hero-walk.live.s2 .s-inbox,.hero-walk.live.s3 .s-diary,.hero-walk.live.s4 .s-cards,.hero-walk.live.s5 .s-links{opacity:1}

/* 场景一：逐字打出，点发送，成为一条 */
.hero-walk.live.s1 .k{animation:hw-show 1ms step-end forwards;animation-delay:calc(.5s + var(--i) * .1s)}
.hero-walk.live.s1 .send{animation:hw-send .45s ease-out 2.35s forwards}
.hero-walk.live.s1 .typed{animation:hw-hide 1ms step-end 2.75s forwards}
.hero-walk.live.s1 .bubble{animation:hw-rise .35s ease-out 2.75s forwards}
/* 场景二三四：这行字飞过来，落下，底下的卡片、文件、日记行浮现 */
.hero-walk.live.s2 .s-inbox .fly,.hero-walk.live.s3 .s-diary .fly,.hero-walk.live.s4 .s-cards .fly{animation:hw-fly .6s cubic-bezier(.2,.7,.2,1) .15s forwards}
.hero-walk.live.s2 .s-inbox .land,.hero-walk.live.s3 .s-diary .land,.hero-walk.live.s4 .s-cards .land{animation:hw-show .3s ease-out .7s forwards}
/* 场景五：从那张卡引出三条线，各落到一个去处；线画到，标签淡入 */
.hero-walk.live.s5 .s-links .line{animation:hw-draw .5s ease-out var(--d) forwards}
.hero-walk.live.s5 .s-links .lbl{animation:hw-show .3s ease-out calc(var(--d) + .4s) forwards}
/* 收尾：整体淡出，再从头 */
.hero-walk.live.out .stage{opacity:0}
@keyframes hw-show{to{opacity:1}}
@keyframes hw-draw{to{stroke-dashoffset:0}}
@keyframes hw-hide{to{opacity:0}}
@keyframes hw-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hw-send{0%{opacity:.45;transform:scale(1)}40%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
@keyframes hw-fly{from{opacity:0;transform:translate(var(--fx),var(--fy))}35%{opacity:1}to{opacity:1;transform:none}}


/* 通用节拍件（信息获取页、日记页用；随手记页上面的专用规则不动）。
   活动场景按顺序号选：.sN 亮第 N 个 .scene。件：.seq 按 --i 逐个浮现（或 --t 指定时刻）；.fly 飞入；.land 落定；
   .tap 一次按下；.trk/.knob 一个拨上的开关；.gone 到时消失。不动画时全是终态。 */
.hero-walk.live.s1 .scene:nth-of-type(1),.hero-walk.live.s2 .scene:nth-of-type(2),.hero-walk.live.s3 .scene:nth-of-type(3),.hero-walk.live.s4 .scene:nth-of-type(4),.hero-walk.live.s5 .scene:nth-of-type(5){opacity:1}
.hero-walk .dim{fill:var(--muted)}
.hero-walk .small{font-size:8.5px}
.hero-walk .pill{fill:var(--bg);stroke:var(--rule);stroke-width:1}
.hero-walk .pill.on{fill:color-mix(in srgb,var(--accent) 12%,var(--surface));stroke:var(--accent)}
.hero-walk .ok{fill:#3fa96b}
.hero-walk .okline{fill:var(--surface);stroke:#3fa96b;stroke-width:1}
.hero-walk .oktext{fill:#3fa96b}
.hero-walk .dash{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.hero-walk .tap{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}
.hero-walk .trk{fill:var(--accent)}
.hero-walk .knob{fill:#fff;transform:translateX(8px)}
.hero-walk .gone{opacity:0}
.hero-walk .lbl.plain text{fill:var(--fg);text-decoration:none}
.hero-walk .seq{--i:0}
.hero-walk.live .seq{opacity:0}
.hero-walk.live .trk{fill:var(--rule)}
.hero-walk.live .knob{transform:none}
.hero-walk.live .gone{opacity:1}
.hero-walk.live.s1 .scene:nth-of-type(1) .seq,.hero-walk.live.s2 .scene:nth-of-type(2) .seq,.hero-walk.live.s3 .scene:nth-of-type(3) .seq,.hero-walk.live.s4 .scene:nth-of-type(4) .seq,.hero-walk.live.s5 .scene:nth-of-type(5) .seq{animation:hw-show .3s ease-out var(--t,calc(.4s + var(--i) * .6s)) forwards}
.hero-walk.live.s1 .scene:nth-of-type(1) .fly,.hero-walk.live.s2 .scene:nth-of-type(2) .fly,.hero-walk.live.s3 .scene:nth-of-type(3) .fly,.hero-walk.live.s4 .scene:nth-of-type(4) .fly,.hero-walk.live.s5 .scene:nth-of-type(5) .fly{animation:hw-fly .6s cubic-bezier(.2,.7,.2,1) var(--t,.15s) forwards}
.hero-walk.live.s1 .scene:nth-of-type(1) .land,.hero-walk.live.s2 .scene:nth-of-type(2) .land,.hero-walk.live.s3 .scene:nth-of-type(3) .land,.hero-walk.live.s4 .scene:nth-of-type(4) .land,.hero-walk.live.s5 .scene:nth-of-type(5) .land{animation:hw-show .3s ease-out var(--t,.7s) forwards}
.hero-walk.live.s1 .scene:nth-of-type(1) .tap,.hero-walk.live.s2 .scene:nth-of-type(2) .tap,.hero-walk.live.s3 .scene:nth-of-type(3) .tap,.hero-walk.live.s4 .scene:nth-of-type(4) .tap,.hero-walk.live.s5 .scene:nth-of-type(5) .tap{animation:hw-tap .7s ease-out var(--t,1s) forwards}
.hero-walk.live.s1 .scene:nth-of-type(1) .knob,.hero-walk.live.s2 .scene:nth-of-type(2) .knob,.hero-walk.live.s3 .scene:nth-of-type(3) .knob,.hero-walk.live.s4 .scene:nth-of-type(4) .knob,.hero-walk.live.s5 .scene:nth-of-type(5) .knob{animation:hw-knob .3s ease-out var(--t,.4s) forwards}
.hero-walk.live.s1 .scene:nth-of-type(1) .trk,.hero-walk.live.s2 .scene:nth-of-type(2) .trk,.hero-walk.live.s3 .scene:nth-of-type(3) .trk,.hero-walk.live.s4 .scene:nth-of-type(4) .trk,.hero-walk.live.s5 .scene:nth-of-type(5) .trk{animation:hw-on .3s ease-out var(--t,.4s) forwards}
.hero-walk.live.s1 .scene:nth-of-type(1) .gone,.hero-walk.live.s2 .scene:nth-of-type(2) .gone,.hero-walk.live.s3 .scene:nth-of-type(3) .gone,.hero-walk.live.s4 .scene:nth-of-type(4) .gone,.hero-walk.live.s5 .scene:nth-of-type(5) .gone{animation:hw-hide 1ms step-end var(--t,1s) forwards}
@keyframes hw-tap{0%{opacity:0;transform:scale(1.5)}30%{opacity:.9;transform:scale(1)}65%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.1)}}
@keyframes hw-knob{to{transform:translateX(8px)}}
@keyframes hw-on{to{fill:var(--accent)}}

/* 正文链接用强调色（Ryan 2026-09-17：链接用颜色突出）。导航、提示符、按钮类不改。
   亮色底下强调色本身对比只有 3.1:1，正文链接用压深一档的同色（5.2:1）；暗色底下用原强调色（5.5:1） */
:root{--link-hot:#be3d64}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--link-hot:var(--accent)}}
:root[data-theme="dark"]{--link-hot:var(--accent)}
.case a,.pts a,table.parts a,p.note a,figcaption a,.entry a:not(.go),.callout a{color:var(--link-hot)}
.case a:hover,.pts a:hover,table.parts a:hover,p.note a:hover,figcaption a:hover,.entry a:not(.go):hover,.callout a:hover{color:var(--accent)}

/* 系统生长图谱（graph.html）：节点按诞生日期出现，边随关系画出，播完停在全图 */
.graph{padding-top:2.25rem}
.gl{margin:0;display:flex;flex-direction:column;gap:.75rem;width:calc(100vw - 40px);max-width:1000px;position:relative;left:50%;transform:translateX(-50%)}
.gl-time,.gl figcaption{max-width:32rem;margin-inline:auto;width:100%}
.gl-svg{width:100%;height:auto;display:block;overflow:visible}
.gl-svg text{font-family:var(--sans);fill:var(--fg);pointer-events:none;user-select:none;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.gl-n .gl-lab{font-size:14px}
.gl-n.work .gl-lab{font-size:15px;font-weight:700}
.gl-n.os .gl-lab{font-size:16px}
.gl-n.part .gl-lab{font-size:14px;fill:var(--fg)}
.gl-n.tool .gl-lab{font-family:var(--mono);font-size:13px;fill:var(--muted)}
.gl-n .gl-shape{stroke-width:1.25;transition:fill .25s,stroke .25s}
.gl-n.work .gl-shape{fill:color-mix(in srgb,var(--accent) 16%,var(--surface));stroke:var(--fg)}
.gl-n.os .gl-shape{fill:color-mix(in srgb,var(--accent) 34%,var(--surface));stroke:var(--fg);stroke-width:1.75}
.gl-n.part .gl-shape{fill:var(--surface);stroke:var(--fg)}
.gl-n.tool .gl-shape{fill:var(--bg);stroke:var(--muted);stroke-width:1.25}
.gl-link{cursor:pointer}
.gl-link:focus-visible{outline:none}
.gl-link:focus-visible .gl-shape{stroke:var(--accent);stroke-width:2.5}
.gl-e{fill:none;stroke:var(--fg);stroke-width:1;opacity:.38;stroke-linecap:round}
.gl-e.call.done{stroke-dasharray:4 4}
.gl-e.method{stroke:var(--accent);stroke-width:2;opacity:.75}
/* 悬停：直接邻居留下，其余淡出 */
.gl-n,.gl-e{transition:opacity .3s}
.gl-n.dim{opacity:.18}
.gl-e.dim{opacity:.05}
.gl-e.hi{stroke:var(--fg);opacity:1;stroke-width:1.75}
.gl-e.method.hi{stroke:var(--accent);stroke-width:2.5}
.gl-n.hi .gl-shape{stroke:var(--accent);stroke-width:2}
.gl-n.hi .gl-lab{fill:var(--fg)}
/* 生长：未到日期的节点与边不在场 */
.gl.live .gl-n{opacity:0}
.gl.live .gl-n.on{opacity:1}
.gl.live .gl-n.on .gl-shape{animation:gl-pop .55s cubic-bezier(.2,.8,.2,1) both}
.gl.live .gl-n.on.now .gl-shape{animation:none}
.gl.live .gl-n.on.dim{opacity:.18}
.gl-shape{transform-box:fill-box;transform-origin:center}
@keyframes gl-pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.gl.live .gl-e{stroke-dasharray:1;stroke-dashoffset:1}
.gl.live .gl-e.on{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease-out,opacity .3s}
.gl.live .gl-e.on.now{transition:none}
.gl.live .gl-e.done{stroke-dasharray:none}
.gl.live .gl-e.call.done{stroke-dasharray:4 4}
/* 小件：围着所属作品的小点，三档色；不画线，不标名 */
.gl-p{r:2.5px;stroke:transparent;stroke-width:4.5;transition:opacity .35s,r .15s}
.gl-p.abil{fill:var(--accent);opacity:.85}
.gl-p.auto{fill:var(--fg);opacity:.7}
.gl-p.text{fill:var(--muted);opacity:.6}
.gl-p.dim{opacity:.12}
.gl-p.hi{r:4px;opacity:1;stroke:var(--bg);stroke-width:1.5}
.gl-ulab{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.gl.live .gl-p{opacity:0}
.gl.live .gl-p.abil.on{opacity:.85}
.gl.live .gl-p.auto.on{opacity:.7}
.gl.live .gl-p.text.on{opacity:.6}
.gl.live .gl-p.on.hi{opacity:1}
.gl.live .gl-p.on.dim{opacity:.12}
.gl-desc{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin:0;min-height:1.2em;max-width:32rem;margin-inline:auto;width:100%}
.gl-desc.has{color:var(--fg)}
@media (hover:none){.gl-desc{display:none}}
/* 时间轴 */
.gl-time{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.gl-axis{position:relative;height:1px;background:var(--rule);margin:.4rem 0 .35rem}
.gl-head{position:absolute;left:0;top:-5px;width:1px;height:11px;background:var(--accent)}
.gl-head::after{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.gl-ticks{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.gl-now{display:flex;gap:1rem;margin-top:.25rem;color:var(--fg);font-variant-numeric:tabular-nums}
.gl-now .gl-count{color:var(--muted)}
.gl.still .gl-head{transition:none}
@media (prefers-reduced-motion:reduce){
  .gl-p{transition:none}
  .gl.live .gl-n.on .gl-shape{animation:none}
  .gl.live .gl-e.on{transition:none}
  .gl-n,.gl-e{transition:none}
}
/* 窄屏（≤899px，首页首屏改单列的那档）：图缩到不足七百像素宽，左下角十五个小点糊成一团——藏起来，换成一个点，标签在它上方 */
.gl-p.u-all{display:none}
@media (max-width:899px){
  .gl-p.u{display:none}
  .gl-p.u-all{display:inline;r:9px}
  .gl-p.u-all.hi{r:11px}
  .gl-ulab{font-size:15px}
}
/* 手机（≤640px）：共用部件与外部工具的标签只在点按或聚焦时显示；作品名里「：」后的副题不显示，只留主名 */
@media (max-width:640px){
  .gl-n.part .gl-lab,.gl-n.tool .gl-lab{display:none}
  .gl-n.part.hi .gl-lab,.gl-n.tool.hi .gl-lab{display:block}
  .gl-sub{display:none}
}
@media (max-width:520px){
  .gl-n .gl-lab,.gl-n.part .gl-lab{font-size:20px}
  .gl-n.work .gl-lab{font-size:24px}
  .gl-n.os .gl-lab{font-size:26px}
  .gl-n.tool .gl-lab{font-size:20px}
  .gl-svg text{stroke-width:4px}
  .gl-e{stroke-width:1.75}
  .gl-e.method{stroke-width:3}
  .gl-p{r:3.6px}
  .gl-p.hi{r:5.5px}
  .gl-p.u-all{r:12px}
  .gl-p.u-all.hi{r:14px}
  .gl-ulab{font-size:24px}
}

/* 首屏动画：任务管理页（data-walk="tasks"）与知识库页（data-walk="wiki"）。
   两页各是一张整图分几拍讲清系统的逻辑，不是一件东西走五格：元素按 .b1–.b4 归到某一拍，按 --d 在那一拍里浮现；.grow 是画出的线；
   .kq 是逐字打出的问题；.sweep 是感知代理扫过两轨的一道光；.s-links 是最后那格。只挂在带 data-walk 的 figure 上，随手记页不受影响。 */
.hero-walk[data-walk] .arr,.hero-walk[data-walk] .bridge-hot{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-walk[data-walk] .eye{fill:none;stroke:var(--fg);stroke-width:1}
.hero-walk[data-walk] .pupil{fill:var(--fg)}
.hero-walk[data-walk] .ring{fill:none;stroke:var(--accent);stroke-width:1.5}
.hero-walk[data-walk] .sweep{fill:var(--accent);opacity:0}
.hero-walk[data-walk] .sw-off{fill:var(--bg);stroke:var(--muted);stroke-width:1}
.hero-walk[data-walk] .sw-on{fill:var(--accent);stroke:var(--accent);stroke-width:1}
.hero-walk[data-walk] .grow{stroke-dasharray:1}
.hero-walk[data-walk] .s-links{align-self:end}
/* 动画中：先全隐，按拍点亮 */
.hero-walk[data-walk].live .b1,.hero-walk[data-walk].live .b2,.hero-walk[data-walk].live .b3,.hero-walk[data-walk].live .b4,.hero-walk[data-walk].live .kq{opacity:0}
.hero-walk[data-walk].live .grow{stroke-dashoffset:1;opacity:1}
.hero-walk[data-walk].live.s1 .sc1,.hero-walk[data-walk].live.s2 .sc2,.hero-walk[data-walk].live.s3 .sc3,.hero-walk[data-walk].live.s4 .sc4,.hero-walk[data-walk].live.s5 .sc5{opacity:1}
.hero-walk[data-walk].live:not(.s5) .s-links{opacity:.36}
.hero-walk[data-walk].live.s1 .b1,.hero-walk[data-walk].live.s2 .b2,.hero-walk[data-walk].live.s3 .b3,.hero-walk[data-walk].live.s4 .b4{animation:hw-show .3s ease-out var(--d) forwards}
.hero-walk[data-walk].live.s1 .b1.grow,.hero-walk[data-walk].live.s2 .b2.grow,.hero-walk[data-walk].live.s3 .b3.grow,.hero-walk[data-walk].live.s4 .b4.grow{animation:hw-draw .5s ease-out var(--d) forwards}
.hero-walk[data-walk="tasks"].live.s4 .b4.sweep{animation:hw-sweep 1.3s ease-in-out var(--d) forwards}
.hero-walk[data-walk="wiki"].live.s3 .kq{animation:hw-show 1ms step-end forwards;animation-delay:calc(.3s + var(--i) * .1s)}
@keyframes hw-sweep{0%{opacity:0;transform:translateX(0)}15%{opacity:.35}85%{opacity:.35}100%{opacity:0;transform:translateX(214px)}}

/* 作品页「小件」节：表多、行多，字号略小，日期列等宽 */
#pieces table.parts{font-size:.875rem;margin-bottom:.5rem}
#pieces table.parts td:last-child{font-family:var(--mono);font-size:.8125rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#pieces h3{margin-top:2.5rem;margin-bottom:.75rem}
#pieces .rows{margin-bottom:.5rem}

/* 首屏动画：信息获取页（data-flow="info"）与日记页（data-flow="journal"），figure 带 class flow。
   不分五格，画的是系统的逻辑本身：信息获取是漏斗加回路，日记是一天的闭环加向上聚合。节拍名写在各页 figure 的 data-beats 里，
   每个名字点亮一段，段与段累加。件与上面的通用件共用（.seq/.fly/.land/.tap/.line/.lbl/.end），另加：
   .drop 落下来的点；.screen 筛；.tk/.mk 筛上的刻度与游标；.loop 回流线；.d2 第二天才出现的东西（不动画时不显示）；.swiped 划过后变淡；
   .hand 一天的指针；.pt 圈上的四个点；.me/.mebar 我写的行；.p1/.p2 两天的日记页。随手记页、任务页、知识库页不受影响。 */
.hero-walk.flow .stage{align-items:end}
.hero-walk.flow.live .scene{opacity:1}
.hero-walk.flow .funnel{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.hero-walk.flow .screen{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:5 3}
.hero-walk.flow .tk{fill:none;stroke:var(--muted);stroke-width:1}
.hero-walk.flow .mk{fill:var(--accent);transform:translateX(10px)}
.hero-walk.flow .drop{fill:var(--fg);opacity:.7}
.hero-walk.flow .drop.pass{fill:var(--accent);opacity:1}
.hero-walk.flow .z3 .drop{opacity:0}
.hero-walk.flow .loop{fill:none;stroke:var(--accent);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.hero-walk.flow .okedge{fill:none;stroke:#3fa96b;stroke-width:1}
.hero-walk.flow .swiped{opacity:.4}
.hero-walk.flow .d2,.hero-walk.flow .drop.d2,.hero-walk.flow .drop.pass.d2{opacity:0}
.hero-walk.flow .ringc{fill:none;stroke:var(--rule);stroke-width:1.5}
.hero-walk.flow .pt{fill:var(--accent)}
.hero-walk.flow .hub{fill:var(--fg)}
.hero-walk.flow .hand{stroke:var(--fg);stroke-width:1.5;stroke-linecap:round;transform-box:view-box;transform-origin:56px 118px;transform:rotate(180deg)}
.hero-walk.flow .mebar,.hero-walk.flow .lg-me{fill:var(--accent)}
.hero-walk.flow .lg-ai{fill:var(--muted)}
.hero-walk.flow text.me{fill:var(--link-hot)}
.hero-walk.flow .up{fill:none;stroke:var(--muted);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
/* 动画中的起点 */
.hero-walk.flow.live .drop,.hero-walk.flow.live .mark,.hero-walk.flow.live .loop-end,.hero-walk.flow.live .loop-tag{opacity:0}
.hero-walk.flow.live .mk{transform:none}
.hero-walk.flow.live .loop{stroke-dashoffset:1}
.hero-walk.flow.live .swiped{opacity:1}
.hero-walk.flow.live .s-links,.hero-walk.flow.live .s-tower{opacity:.36}
.hero-walk.flow.live .pt{fill:var(--rule)}
.hero-walk.flow.live .hand{transform:none}
/* 信息获取：进来 → 两道筛 → 一批 → 我的动作 → 留下的出去 → 回流到筛 → 第二天再来一遍 */
.hero-walk.flow.live.in .z1 .drop{animation:hw-drop .45s ease-out calc(.2s + var(--i) * .05s) forwards}
.hero-walk.flow.live.sift .z2 .drop{animation:hw-drop .45s ease-out calc(.2s + var(--i) * .1s) forwards}
.hero-walk.flow.live.sift .z3 .drop{animation:hw-drop .45s ease-out calc(1.3s + var(--i) * .15s) forwards}
.hero-walk.flow.live.batch .z3 .drop{animation:hw-hide 1ms step-end forwards}
.hero-walk.flow.live.batch .z4 .fly{animation:hw-fly .6s cubic-bezier(.2,.7,.2,1) var(--t) forwards}
.hero-walk.flow.live.batch .z4 .seq{animation:hw-show .3s ease-out var(--t) forwards}
.hero-walk.flow.live.act .z4 .mark{animation:hw-show .3s ease-out var(--t) forwards}
.hero-walk.flow.live.act .z4 .swiped{animation:hw-dim .4s ease-out var(--t) forwards}
.hero-walk.flow.live.act .z4 .tap{animation:hw-tap .7s ease-out var(--t) forwards}
.hero-walk.flow.live.exit .s-links{opacity:1}
.hero-walk.flow.live.exit .s-links .line{animation:hw-draw .5s ease-out var(--d) forwards}
.hero-walk.flow.live.exit .s-links .lbl{animation:hw-show .3s ease-out calc(var(--d) + .4s) forwards}
.hero-walk.flow.live.back .loop{animation:hw-draw 1s ease-out .1s forwards}
.hero-walk.flow.live.back .loop-end{animation:hw-show .2s ease-out var(--t) forwards}
.hero-walk.flow.live.back .loop-tag{animation:hw-show .3s ease-out .1s forwards}
.hero-walk.flow.live.back .mk{animation:hw-mk .35s ease-out var(--t) forwards}
.hero-walk.flow.live.back .screen{animation:hw-tint .9s ease-in-out var(--t)}
.hero-walk.flow.live.next .day1{animation:hw-hide 1ms step-end .2s forwards}
.hero-walk.flow.live.next .day2{animation:hw-show 1ms step-end .2s forwards}
.hero-walk.flow.live.next .z1 .drop{animation:hw-drop2 .45s ease-out calc(.4s + var(--i) * .05s) forwards}
.hero-walk.flow.live.next .z2 .drop{animation:hw-hide 1ms step-end forwards}
.hero-walk.flow.live.next .z2b .drop{animation:hw-drop .45s ease-out calc(1.9s + var(--i) * .1s) forwards}
.hero-walk.flow.live.next .z3b .drop{animation:hw-drop .45s ease-out calc(2.9s + var(--i) * .15s) forwards}
.hero-walk.flow.live.next .z3b .note{animation:hw-show .3s ease-out 3.5s forwards}
/* 日记：早 → 日间 → 晚 → 没开口的那天 23:00 → 进塔往上聚 → 出口 */
.hero-walk.flow.live.morn .pt-1{animation:hw-on .3s ease-out .1s forwards}
.hero-walk.flow.live.morn .p1 .m .seq{animation:hw-show .3s ease-out var(--t) forwards}
.hero-walk.flow.live.day .hand{animation:hw-hand-a .5s ease-in-out forwards}
.hero-walk.flow.live.day .pt-2{animation:hw-on .3s ease-out .4s forwards}
.hero-walk.flow.live.day .p1 .dd .seq{animation:hw-show .3s ease-out var(--t) forwards}
.hero-walk.flow.live.day .p1 .dd .fly{animation:hw-fly .6s cubic-bezier(.2,.7,.2,1) var(--t) forwards}
.hero-walk.flow.live.eve .hand{animation:hw-hand-b .5s ease-in-out forwards}
.hero-walk.flow.live.eve .pt-3{animation:hw-on .3s ease-out .4s forwards}
.hero-walk.flow.live.eve .p1 .e .seq{animation:hw-show .3s ease-out var(--t) forwards}
.hero-walk.flow.live.late .hand{animation:hw-hand-c 2.4s ease-in-out forwards}
.hero-walk.flow.live.late .p1{animation:hw-hide .3s ease-out .8s forwards}
.hero-walk.flow.live.late .p2{animation:hw-show .3s ease-out 1s forwards}
.hero-walk.flow.live.late .pt-4{animation:hw-on .3s ease-out 2.4s forwards}
.hero-walk.flow.live.late .p2 .seq{animation:hw-show .3s ease-out var(--t) forwards}
.hero-walk.flow.live.agg .s-tower{opacity:1}
.hero-walk.flow.live.agg .s-tower .fly{animation:hw-fly .6s cubic-bezier(.2,.7,.2,1) var(--t) forwards}
.hero-walk.flow.live.agg .s-tower .seq{animation:hw-show .3s ease-out var(--t) forwards}
@keyframes hw-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes hw-drop2{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes hw-dim{to{opacity:.4}}
@keyframes hw-mk{to{transform:translateX(10px)}}
@keyframes hw-tint{0%{stroke:var(--muted)}35%{stroke:var(--accent)}100%{stroke:var(--muted)}}
@keyframes hw-hand-a{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@keyframes hw-hand-b{from{transform:rotate(90deg)}to{transform:rotate(180deg)}}
@keyframes hw-hand-c{from{transform:rotate(180deg)}to{transform:rotate(630deg)}}

/* 首屏动画：个人 AI 操作系统页（data-walk="os"）与六十人公司页（data-walk="harness"）。
   两页都用上面的 data-walk 通用件（.b1–.b4 按拍浮现、.grow 画线、.sc1–.sc5、.s-links）。这里只补两件：.kq 是第二拍里逐字打出的那句任务；
   .wait 是「问我」之后停下来等我点头的那行字，亮起后闪几下再停住。不动画时全是终态。随手记、任务、知识库、信息获取、日记页不受影响。 */
.hero-walk[data-walk="os"].live.s2 .kq,.hero-walk[data-walk="harness"].live.s2 .kq{animation:hw-show 1ms step-end forwards;animation-delay:calc(.3s + var(--i) * .1s)}
.hero-walk[data-walk="os"] .wait{fill:var(--accent)}
.hero-walk[data-walk="os"].live.s2 .wait{animation:hw-show .3s ease-out var(--d) forwards,hw-blink .8s step-end calc(var(--d) + .3s) 3}
@keyframes hw-blink{50%{opacity:0}}

/* 首屏动画：Open Learning 页（data-walk="openlearning"）与 Praxis 页（data-walk="praxis"）。
   两页都用上面的 data-walk 通用件（.b1–.b4 按拍浮现、.grow 画线、.arr 箭头、.sc1–.sc5、.s-links）。这里只补四件：
   .tmp 是 Open Learning 第一拍里的章节面板，第二拍让位给正文，不动画时不显示；.app 是第四拍关上再打开的整个窗口；.pop 是关上那一下浮出的小卡；
   .notext/.noline 是 Praxis 页裁决不通过的红。不动画时全是终态（面板不在，窗口是打开的，两份裁决都在）。别的页不受影响。 */
.hero-walk[data-walk="openlearning"] .tmp{opacity:0}
.hero-walk[data-walk="openlearning"].live.s1 .tmp{opacity:1}
.hero-walk[data-walk="openlearning"].live.s2 .tmp{animation:hw-hide .3s ease-out forwards}
.hero-walk[data-walk="openlearning"] .pop{opacity:0}
.hero-walk[data-walk="openlearning"].live.s4 .app{animation:hw-reopen 1.6s ease-in-out forwards}
.hero-walk[data-walk="openlearning"].live.s4 .pop{animation:hw-pop 1.6s ease-in-out forwards}
@keyframes hw-reopen{0%{opacity:1}25%{opacity:.1}60%{opacity:.1}100%{opacity:1}}
@keyframes hw-pop{0%{opacity:0}20%{opacity:1}60%{opacity:1}100%{opacity:0}}
.hero-walk[data-walk="praxis"] .notext{fill:#d9534f}
.hero-walk[data-walk="praxis"] .noline{fill:var(--surface);stroke:#d9534f;stroke-width:1}

/* 首屏动画：心理咨询分析页（data-walk="mind"）与 OpenCanvas 页（data-walk="canvas"）。
   两页都用上面的 data-walk 通用件（.b1–.b4 按拍浮现、.grow 画线、.sc1–.sc5、.s-links、.dash、.pill、.hot）。这里只补四件：
   .read 是新稿并行回读历史的细灰线，两条命中的另用强调色 .line 叠在上面；.blink 是教练卡在两次咨询之间闪一下；
   .addr 是 Agent 指回文件夹的地址线（灰，只给地址）；.kq 是画布上逐字打出的那个问题；.b4.fly 是整棵树飞进文件夹成为一份文件。
   不动画时全是终态。随手记、任务、知识库、信息获取、日记、操作系统、六十人公司页不受影响。 */
.hero-walk[data-walk="mind"] .read,.hero-walk[data-walk="canvas"] .addr{fill:none;stroke:var(--muted);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.hero-walk[data-walk="mind"].live.s3 .b3.blink{animation:hw-show .3s ease-out var(--d) forwards,hw-blink .7s step-end calc(var(--d) + .3s) 3}
.hero-walk[data-walk="canvas"].live.s1 .kq{animation:hw-show 1ms step-end forwards;animation-delay:calc(.3s + var(--i) * .1s)}
.hero-walk[data-walk="canvas"].live.s4 .b4.fly{animation:hw-fly .6s cubic-bezier(.2,.7,.2,1) var(--d) forwards}

/* 首页（index.html）：首屏是生长图谱，左列是首句与「此刻」一行；下面依次是三张带动画的卡、一条横线的三个尺度。
   图谱本身沿用上面 .gl 那套（graph.js 画），这里只管它在首页的位置与高度。 */
.home-hero{position:relative;width:calc(100vw - 40px);max-width:1000px;left:50%;transform:translateX(-50%)}
.home-hero .gl{width:100%;left:auto;transform:none;gap:.5rem}
.home-hero .gl-svg{max-height:calc(100vh - 17rem);min-height:300px}
.home-hero .gl-time,.home-hero .gl-desc{margin-inline:auto 0}
.home-lead{max-width:36em;margin:0 0 1.25rem}
.home-lead h1{font-size:1.875rem;margin-bottom:.75rem}
.home-sub{font-size:1rem;line-height:1.5;color:var(--muted);margin:0;max-width:34em;text-wrap:pretty}
.home-more{margin:.5rem 0 0;font-family:var(--mono);font-size:.8125rem}
.home-more a{text-decoration:none;color:var(--link-hot)}
.home-more a:hover{color:var(--accent)}
/* 手机：首屏纵向排——首句、图（含时间轴、说明）、链接，「此刻」排到最后 */
@media (max-width:899px){
  .home-hero{display:flex;flex-direction:column}
  .home-now{order:1;margin-top:3.25rem;padding-top:3.25rem;border-top:1px solid var(--rule)}
}
/* 桌面：两列网格。figure 用 display:contents，让图、时间轴、说明直接进网格；
   左列 20rem 从上到下是首句、此刻、时间轴、说明、链接，正常文档流，末尾一行 1fr 吃掉余量；
   图横跨两列、纵跨全部行、垂直居中，靠右对齐（svg 的 xMax），高度封顶 */
@media (min-width:900px){
  .home-hero{display:grid;grid-template-columns:20rem 1fr;grid-template-rows:repeat(5,auto) 1fr;column-gap:2rem;padding-bottom:1.5rem}
  .home-hero .gl{display:contents}
  /* 图按高度缩放：一屏 = 100vh 减页头（上 2.5rem + 下 3.25rem + 一行 ≈ 7.5rem）减首屏下边距 1.5rem 再留 2rem，宽随比例（1140:900）得出，最宽不过 1000px */
  .home-hero .gl-svg{grid-column:1/3;grid-row:1/7;align-self:center;justify-self:end;height:min(calc(100vh - 11rem),780px);max-height:none;min-height:0;width:auto;max-width:100%}
  .home-lead,.home-now,.home-hero .gl-time,.home-hero .gl-desc,.home-more{grid-column:1;position:relative;z-index:1;margin:0}
  .home-lead{grid-row:1;pointer-events:none}
  .home-lead h1{font-size:1.75rem}
  .home-sub{font-size:.9375rem}
  .home-now{grid-row:2;margin-top:1.25rem;pointer-events:none}
  .home-now .home-term{font-size:.875rem}
  .home-now .home-typed{min-height:3.4em}
  .home-hero .gl-time{grid-row:3;width:14rem;margin-top:1.5rem}
  .home-hero .gl-desc{grid-row:4;width:14rem;margin-top:.5rem;font-size:.6875rem;line-height:1.45}
  .home-more{grid-row:5;margin-top:.75rem}
}
/* 桌面且窗口矮（≤700px 高）：左列压间距，保证首句、此刻、时间轴、链接和图一起在一屏内 */
@media (min-width:900px) and (max-height:700px){
  .home-lead h1{font-size:1.5rem;margin-bottom:.5rem}
  .home-now{margin-top:.75rem}
  .home-now .home-typed{min-height:1.7em}
  .home-hero .gl-time{margin-top:.75rem}
  .home-more{margin-top:.5rem}
}

/* 此刻：页头那个提示符的样子，下面一行逐字打出；.live 由脚本加，加了才藏静态列表 */
.home-term{font-family:var(--mono);font-size:.9375rem;line-height:1.7}
.home-prompt{margin:0;color:var(--fg)}
.home-prompt .mark{margin-right:5px;color:var(--muted)}
.home-typed{display:none;margin:0;min-height:1.7em;white-space:pre-wrap;color:var(--fg)}
.home-typed .cursor{vertical-align:-2px}
.home-term.live .home-typed{display:block}
.home-term.live .home-lines{display:none}
.home-lines{list-style:none;margin:.15rem 0 0;padding:0;color:var(--fg)}
.home-lines .when{display:inline-block;min-width:4.5em;color:var(--muted);font-variant-numeric:tabular-nums}

/* 代表作：三张卡放宽到 1000px，各带那一页首屏动画的缩小版；只看不点。
   三卡等高（grid 拉伸），卡内纵向 flex，「看案例」贴底对齐。
   缩小版只留主画面：第五格「它接上了什么」（.s-links）是一组链接，缩小版里点不了、又在前四拍里以 .36 透明度压成一块空的暗色矩形，整格去掉；第五拍改为主画面保持亮着。 */
.home-cards{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:1rem;width:calc(100vw - 40px);max-width:1000px;position:relative;left:50%;transform:translateX(-50%)}
.home-card{display:flex;flex-direction:column}
.home-card p{max-width:none}
.home-card>a{margin-top:auto}
.home-mini{pointer-events:none;margin:.25rem 0 .5rem;max-width:340px;width:100%;min-width:0;overflow:hidden}
.home-mini .hero-walk{margin:0}
.home-mini .stage{grid-template-columns:1fr;gap:0}
.home-mini .s-links{display:none}
.home-mini .hero-walk[data-walk].live.s5 .sc4{opacity:1}
.home-others{margin-top:1.25rem}
@media (max-width:899px){.home-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){.home-cards{grid-template-columns:1fr}}

/* 三个尺度：一条横线三段，当前那段（一个人 · 今）的点用强调色；窄屏变成竖线 */
.home-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.home-line li{position:relative;padding:1.1rem 1.25rem 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:.2rem}
.home-line li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--fg)}
.home-line li.now::before{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.home-line .k{font-weight:700}
.home-line .t{font-family:var(--mono);font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.home-line p{font-size:.9375rem;margin:.2rem 0 0}
.home-line-end{margin-top:1.5rem}
@media (max-width:640px){
  .home-line{grid-template-columns:1fr;border-left:1px solid var(--rule);padding-left:1.1rem}
  .home-line li{border-top:none;padding:0 0 1.25rem 0}
  .home-line li:last-child{padding-bottom:0}
  .home-line li::before{left:calc(-1.1rem - 4px);top:.5em}
}