:root{
  --paper:#faf9f5;--paper-2:#f0eee6;--ink:#141413;--muted:#5e5d59;--quiet:#6b6a64;--line:#dad8ce;--line-2:#e8e6dc;
  --blue:#b4532f;--blue-hover:#9c4526;--blue-soft:#f6e5dc;
  --night:#1a1918;--night-2:#24221f;--night-line:#36332e;--night-ink:#f0eee6;--night-muted:#a8a59c;
  --cyan:#e8a083;--amber:#f0b35a;--green:#4a6b2f;--green-soft:#e8eedb;--amber-ink:#8a5a00;--amber-soft:#f7ebd3;--red:#b3362f;--red-soft:#f6e1dc;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  --max:1280px;--gutter:56px;--ease:cubic-bezier(.2,.7,.2,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:73px}
body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#f3d6c9;color:#3d1a0d}
a{color:inherit;text-decoration:none}
button,summary,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ol,ul{margin:0;padding:0}
code{font-family:var(--mono);font-size:.86em;background:rgba(180,83,47,.08);padding:1px 5px;border-radius:3px;white-space:nowrap}
[data-lang="zh"] .en,[data-lang="en"] .zh{display:none!important}
.wrap{width:calc(100% - var(--gutter)*2);max-width:var(--max);margin-inline:auto}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:16px;z-index:100;background:var(--blue);color:#fff;padding:10px 16px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.icon{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat;vertical-align:middle}
.i-up{--icon:url(icons/arrow-up-right.svg)}.i-right{--icon:url(icons/arrow-right.svg)}.i-plus{--icon:url(icons/plus.svg)}.i-menu{--icon:url(icons/list.svg)}.i-play{--icon:url(icons/play.svg)}.i-pause{--icon:url(icons/pause.svg)}.i-reset{--icon:url(icons/arrow-counter-clockwise.svg)}.i-copy{--icon:url(icons/copy.svg)}.i-x{--icon:url(icons/x.svg)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(250,249,245,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:28px}
.brand{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:-1.1px;white-space:nowrap}
.brand span{color:var(--blue)}
.site-nav{display:flex;gap:30px;font-size:14px;font-weight:500}
.site-nav a{position:relative;padding:8px 0}
.site-nav a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--blue)}
.site-nav a[aria-current]:after{transform:scaleX(1)}
.nav-tools{display:flex;align-items:center;gap:26px}
.languages{display:flex;align-items:center;gap:2px}
.languages button{position:relative;border:0;padding:7px 0;background:none;font-size:13px;font-family:var(--mono);min-width:44px;min-height:44px}
.languages [aria-pressed="true"]{color:var(--blue);font-weight:700}
.languages [aria-pressed="true"]:after{content:"";position:absolute;bottom:4px;left:50%;width:14px;height:2px;background:var(--blue);transform:translateX(-50%)}
.nav-mobile-only{display:none}
.nav-contact{display:flex;align-items:center;gap:8px;font-size:14px}.nav-contact:hover{color:var(--blue)}
.menu-toggle{display:none;border:0;background:none;padding:10px;line-height:1}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;min-height:calc(100vh - 73px);min-height:calc(100dvh - 73px);padding-top:36px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;margin-block:auto;width:100%}
.eyebrow{font:12px/1.6 var(--mono);letter-spacing:.09em;color:var(--muted);margin-bottom:22px}
h1{font-size:clamp(44px,5.6vw,84px);font-weight:800;line-height:1.12;letter-spacing:-.06em}
h1 .zh{display:block;white-space:nowrap}h1 .en{display:block;line-height:1.06;letter-spacing:-.045em}
.period{color:var(--blue)}
.identity{font-size:21px;font-weight:650;margin-top:22px;letter-spacing:-.02em}
.hero-lede{font-size:16px;line-height:1.85;color:var(--muted);max-width:540px;margin-top:14px}
.hero-lede-2{margin-top:6px}
.hero-ticker dt .tag{margin-left:4px;vertical-align:.05em}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:28px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 22px;background:var(--blue);color:#fff;border:1px solid var(--blue);font-size:14px;font-weight:600;transition:background .18s,transform .18s var(--ease),box-shadow .18s}
.button:hover{background:var(--blue-hover);border-color:var(--blue-hover);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(180,83,47,.7)}
.text-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13.5px;padding-block:8px}.text-link:hover{color:var(--blue)}
.text-link .icon{width:15px;height:15px;transition:transform .2s var(--ease)}.text-link:hover .i-right{transform:translateX(3px)}

.scan{position:relative;aspect-ratio:1.08/1;max-height:calc(100dvh - 250px);min-height:340px;width:100%;background:radial-gradient(120% 90% at 50% 20%,#2a211b 0%,var(--night) 62%);color:var(--night-ink);overflow:hidden;isolation:isolate}
.scan:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 100%;mask:radial-gradient(90% 80% at 50% 50%,#000 30%,transparent 80%);-webkit-mask:radial-gradient(90% 80% at 50% 50%,#000 30%,transparent 80%);pointer-events:none;z-index:-1}
.scan canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.scan canvas:active{cursor:grabbing}
.scan-label{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:none;opacity:0;transition:opacity .4s}
.scan-label.is-on{opacity:1}
.scan-label span{display:block;font:11px/1 var(--mono);color:#0c1a2b;background:#8cbcf5;padding:5px 7px;white-space:nowrap;margin-bottom:6px}
.scan-hud{position:absolute;top:16px;right:18px;display:flex;align-items:center;gap:6px;font:11px/1 var(--mono);color:var(--night-muted);letter-spacing:.04em}
.hud-dot{width:7px;height:7px;border-radius:50%;background:#8fd18a;box-shadow:0 0 0 0 rgba(143,209,138,.6);animation:pulse 2s infinite}
.hud-sep{opacity:.5}
.scan-hud{white-space:nowrap;font-variant-numeric:tabular-nums}
#scan-points{display:inline-block;min-width:6ch;text-align:right}#scan-fps{display:inline-block;min-width:3ch;text-align:right}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,209,138,.55)}70%{box-shadow:0 0 0 8px rgba(143,209,138,0)}100%{box-shadow:0 0 0 0 rgba(143,209,138,0)}}
.scan-toggle{position:absolute;top:10px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid rgba(168,165,156,.35);background:rgba(26,25,24,.55);color:var(--night-muted);font:11px/1 var(--mono);letter-spacing:.04em;transition:color .2s,border-color .2s}
.scan-toggle:hover{color:var(--night-ink);border-color:rgba(168,165,156,.7)}
.scan-toggle .icon{width:12px;height:12px}
.scan-toggle .i-play,.scan-toggle.is-paused .i-pause{display:none}
.scan-toggle.is-paused .i-play{display:inline-block}
.scan-toggle .when-off,.scan-toggle.is-paused .when-on{display:none}
.scan-toggle.is-paused .when-off{display:inline}
.scan-fallback{position:absolute;inset:0;display:none;place-items:center;text-align:center;font-size:14px;color:var(--night-muted);padding:24px}
.scan.no-webgl .scan-fallback{display:grid}.scan.no-webgl .scan-hud{display:none}
html:not(.js) .scan-fallback{display:grid}
.scan-caption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:40px 18px 15px;background:linear-gradient(transparent,rgba(18,17,16,.88));font-size:12.5px;line-height:1.55;color:var(--night-muted);pointer-events:none}
.scan-caption .mono{font-size:10.5px;letter-spacing:.12em;color:var(--cyan)}

.hero-ticker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:30px;border-top:1px solid var(--line);position:relative}
.hero-ticker>div{padding:16px 20px 4px 0}
.hero-ticker>div+div{padding-left:20px;border-left:1px solid var(--line-2)}
.hero-ticker dt{font-size:12px;color:var(--quiet)}
.hero-ticker dd{font-size:clamp(20px,2.1vw,28px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px}
.ticker-note{font-size:10.5px;letter-spacing:.06em;color:var(--quiet);margin-top:8px}

/* ---------- sections ---------- */
.section{padding:88px 0;border-bottom:1px solid var(--line);scroll-margin-top:-64px}
.section-label{display:flex;align-items:center;gap:16px;font:12px/1.5 var(--mono);letter-spacing:.12em;color:var(--quiet);text-transform:uppercase}
.section-label .number{font-family:var(--sans);font-size:16px;font-weight:650;color:var(--blue);letter-spacing:0}
.section-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end;margin-top:26px;margin-bottom:44px}
.section-intro h2{font-size:clamp(30px,3.9vw,50px);font-weight:760;line-height:1.26;letter-spacing:-.045em}
.section-intro p{font-size:15.5px;line-height:1.9;color:var(--muted);max-width:560px}
.tag{display:inline-flex;align-items:center;font:600 10.5px/1 var(--mono);letter-spacing:.06em;padding:4px 6px;border-radius:3px;vertical-align:.1em;white-space:nowrap}
.tag.prod{background:var(--green-soft);color:var(--green)}
.tag.lab{background:var(--amber-soft);color:var(--amber-ink)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- 01 year ---------- */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:8px;padding:22px 18px 22px 0}
.stat+.stat{padding-left:18px;border-left:1px solid var(--line-2)}
.stat strong{font-size:clamp(28px,3.1vw,44px);font-weight:760;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;line-height:1.5;color:var(--muted)}
.heatmap-card{margin-top:40px;padding:24px 26px 22px;background:#fff;border:1px solid var(--line)}
.heatmap-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.heatmap-head figcaption{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.heatmap-head strong{font-size:15px}
#heat-readout{font-size:12px;color:var(--quiet);min-width:220px}
.heat-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--quiet)}
.heat-legend span{margin:0 4px}
.heat-legend i,.heat-cell{width:11px;height:11px;border-radius:2px;display:inline-block}
.l0{background:#eeece4}.l1{background:#eecbbb}.l2{background:#e3a68c}.l3{background:#cf7a58}.l4{background:#b4532f}.l5{background:#7a3520}
.heatmap-scroll{overflow-x:auto;scrollbar-width:thin;padding:5px 5px 6px;margin:-5px}
.heatmap{min-width:720px}
.heat-body{display:flex;flex-direction:column;gap:6px}
.heat-months{position:relative;height:13px;font:10px/13px var(--mono);color:var(--quiet)}
.heat-months span{position:absolute;top:0;white-space:nowrap;transform:translateX(0)}
.heat-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);grid-auto-columns:1fr;gap:3px}
.heat-cell{width:100%;height:auto;aspect-ratio:1;border:0;padding:0;cursor:default;transition:transform .12s,box-shadow .12s}
.heat-cell:hover,.heat-cell:focus-visible,.heat-cell.is-hot{transform:scale(1.35);box-shadow:0 0 0 2px var(--ink);outline:none;position:relative;z-index:1}
.heat-cell.pad{visibility:hidden}
.js .heat-cell{opacity:0;animation:cellIn .5s var(--ease) forwards;animation-delay:calc(var(--i)*1.6ms)}
.heatmap:not(.is-in) .heat-cell{animation-play-state:paused}
@keyframes cellIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.heat-note{font-size:13px;line-height:1.8;color:var(--muted);margin-top:16px;max-width:880px}
.milestones{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:44px;position:relative}
.milestones:before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line)}
.milestones li{position:relative;padding:26px 18px 0 0}
.milestones li:before{content:"";position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--blue)}
.milestones li:last-child:before{background:var(--blue)}
.milestones time{display:block;font:12px var(--mono);color:var(--blue);letter-spacing:.04em}
.milestones strong{display:block;font-size:15px;font-weight:680;margin-top:6px;letter-spacing:-.01em}
.milestones p{font-size:13px;line-height:1.75;color:var(--muted);margin-top:6px}

/* ---------- 02 architecture ---------- */
.arch-paths{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px}
.arch-paths .mono{font-size:11px;letter-spacing:.08em;color:var(--quiet);margin-right:4px}
.arch-paths button{border:1px solid var(--line);background:#fff;padding:6px 12px;font-size:13px;color:var(--ink);transition:border-color .2s,background .2s}
.arch-paths button:hover{border-color:var(--blue)}
.arch-paths button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.arch-path-note{flex:1 0 100%;font-size:13.5px;line-height:1.7;color:var(--muted);min-height:0}
.arch{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0;background:#fff;color:var(--ink);border:1px solid var(--line)}
.arch-map{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:repeat(5,auto);gap:22px 18px;padding:30px 28px;background:radial-gradient(110% 90% at 30% 0%,#2a211b 0%,#1a1918 55%,#141312 100%);color:#f0eee6}
.arch-map:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/100% 26px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/26px 100%;mask:radial-gradient(90% 80% at 50% 45%,#000 30%,transparent 85%);-webkit-mask:radial-gradient(90% 80% at 50% 45%,#000 30%,transparent 85%);pointer-events:none}
.arch-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.arch-wires .wire{fill:none;stroke:#e8a083;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:6 6;animation:wire-flow 1s linear infinite}
.arch-wires .wire.is-drawing{animation:wire-draw .9s var(--ease) both,wire-flow 1s linear .9s infinite}
.arch-wires .wire-glow{fill:none;stroke:#d97757;stroke-width:8;stroke-linejoin:round;opacity:.16;filter:blur(3px)}
.arch-wires .packet{fill:#ffd9c7;filter:drop-shadow(0 0 6px #d97757)}
@keyframes wire-flow{to{stroke-dashoffset:-12}}
@keyframes wire-draw{from{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)}to{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:0}}
.arch-layer{grid-column:1;display:flex;gap:12px;align-items:stretch;position:relative;z-index:1}
.arch-layer+.arch-layer:before{content:"";position:absolute;left:calc(50% + 44px);top:-22px;height:22px;width:1px;background:rgba(255,255,255,.14)}
.arch-map.has-path .arch-layer:before{opacity:0}
.arch-layer .layer-name,.arch-rail .layer-name{font-size:10.5px;letter-spacing:.12em;color:#8f8c84}
.arch-rail{grid-column:2;grid-row:1/6;display:flex;flex-direction:column;gap:12px;padding-left:18px;border-left:1px dashed rgba(255,255,255,.16);position:relative;z-index:1}
.arch-rail .arch-node{flex:none}
.arch-rail .layer-name{flex:none;align-self:flex-start;margin-bottom:2px}
.arch-node{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;background:#24221f;border:1px solid #3a3631;border-radius:6px;color:#f0eee6;box-shadow:0 10px 24px -18px #000;transition:border-color .25s,background .25s,opacity .3s,transform .25s var(--ease),box-shadow .25s}
.arch-node b{font-size:14px;font-weight:620;line-height:1.35}
.arch-node small{font:10.5px/1.5 var(--mono);color:#a8a59c;overflow-wrap:break-word;text-wrap:balance}
.arch-node:hover{border-color:#75736c;transform:translateY(-2px)}
.arch-node.on-path{border-color:rgba(217,119,87,.75);background:#3a281f;box-shadow:0 0 0 1px rgba(217,119,87,.2),0 0 22px -6px rgba(217,119,87,.55)}
.arch-node.off-path{background:#1d1c1a;border-color:#2c2a27;color:#75736c;box-shadow:none}.arch-node.off-path small{color:#57554f}
.arch-node[aria-pressed="true"]{opacity:1;border-color:#e8a083;background:linear-gradient(180deg,#5a3626,#3a281f);box-shadow:0 0 0 1px #d97757,0 0 30px -4px rgba(217,119,87,.7)}
.arch-node[aria-pressed="true"]:before{content:"";position:absolute;right:10px;top:10px;width:7px;height:7px;border-radius:50%;background:#ffd9c7;box-shadow:0 0 8px #d97757;animation:hx-blink 1.6s ease-in-out infinite}
.arch-node[aria-pressed="true"] small{color:#e8c9b8}
.arch-node:focus-visible{outline:2px solid #e8a083;outline-offset:2px}
.arch-detail{padding:32px 30px;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:100%}
.arch-kicker{font-size:11px;letter-spacing:.14em;color:var(--blue)}
.arch-detail h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:10px;line-height:1.35}
.arch-detail>p#arch-body{font-size:14.5px;line-height:1.85;color:var(--muted);margin-top:14px}
.arch-facts{list-style:none;margin-top:20px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.arch-facts li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--quiet)}
.arch-facts li strong{color:var(--ink);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.arch-facts .tag{margin-left:6px}

.arch-hint{margin-top:auto;padding-top:22px;font-size:10.5px;letter-spacing:.1em;color:var(--quiet)}
.js .arch-detail.is-swapping>*{animation:fadeUp .35s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 03 cases ---------- */
.case-dir{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--line);margin-bottom:44px}
.case-dir li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-dir a{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 20px 20px;transition:background .2s}
.case-dir a:hover{background:#fff}
.case-dir .mono{font-size:12px;color:var(--blue);font-weight:600}
.case-dir strong{font-size:15.5px;font-weight:680;line-height:1.5;letter-spacing:-.01em}
.case-dir a:hover strong{color:var(--blue)}
.dir-result{font-size:13px;line-height:1.6;color:var(--muted);margin-top:auto}
.casebook{display:block;border-top:1px solid var(--ink)}
.js .casebook{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0}
html:not(.js) .case-tabs{display:none}
html:not(.js) .case{padding-left:0;border-bottom:1px solid var(--line)}
.case-tabs{display:flex;flex-direction:column;border-right:1px solid var(--line);padding-top:8px;position:sticky;top:80px;align-self:start}
.case-tabs button{display:flex;align-items:baseline;gap:12px;text-align:left;border:0;background:none;padding:14px 18px 14px 0;font-size:14.5px;font-weight:560;color:var(--muted);border-bottom:1px solid var(--line-2);position:relative;transition:color .2s}
.case-tabs button .mono{font-size:12px;color:var(--quiet);width:14px}
.case-tabs button:hover{color:var(--ink)}
.case-tabs button[aria-selected="true"]{color:var(--blue)}
.case-tabs button[aria-selected="true"] .mono{color:var(--blue)}
.case-tabs button[aria-selected="true"]:after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:2px;background:var(--blue)}
.case{padding:30px 0 10px 44px;scroll-margin-top:90px}
.js .case[hidden]{display:none}
.js .case.is-active{animation:fadeUp .45s var(--ease)}
.case:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.case-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;padding-bottom:26px;border-bottom:1px solid var(--line)}
.case-kicker{font-size:11px;letter-spacing:.14em;color:var(--blue)}
.case-head h3{font-size:clamp(22px,2.3vw,31px);font-weight:740;line-height:1.42;letter-spacing:-.035em;margin-top:10px}
.case-metric{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:flex-end;font-weight:720;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;white-space:nowrap;text-align:right;max-width:340px}
.case-metric .before{color:#75736c}.case-metric .icon{width:22px;height:22px;color:#75736c}.case-metric .after{color:var(--blue)}
.case-metric .unit{font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);white-space:normal;max-width:180px;text-align:left;line-height:1.4}
.case-metric .tag{align-self:center}
.notes{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;counter-reset:n}
.notes-main{margin-top:6px;counter-reset:n 2}
.case-more{margin-top:4px;border-bottom:1px solid var(--line-2)}
.case-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:14px 0;font:12px var(--mono);letter-spacing:.06em;color:var(--quiet)}
.case-more summary::-webkit-details-marker{display:none}
.case-more summary:before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);font-size:13px;color:var(--ink);transition:transform .2s}
.case-more[open] summary:before{content:"−"}
.case-more summary:hover{color:var(--ink)}
.case-more .notes li:first-child b:before{background:var(--ink)}
.case-more .notes{counter-reset:n}
.notes li{counter-increment:n;padding:24px 28px 24px 0;border-bottom:1px solid var(--line-2)}
.notes li:nth-child(even){padding-left:28px;padding-right:0;border-left:1px solid var(--line-2)}
.notes b{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;color:var(--ink);text-transform:uppercase}
.notes b:before{content:counter(n,decimal-leading-zero);font:600 11px var(--mono);color:#fff;background:var(--ink);padding:3px 5px;border-radius:2px}
.notes li:nth-child(3) b:before{background:var(--blue)}
.notes li:nth-child(4) b:before{background:var(--green)}
.notes-main li:nth-child(1) b:before{background:var(--blue)}
.notes-main li:nth-child(2) b:before{background:var(--green)}
.notes p{font-size:14.5px;line-height:1.9;color:#3e3c38;margin-top:10px}
.figure-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:22px;border:1px solid var(--line);background:#fff}
.mini-stat{padding:18px 20px}.mini-stat+.mini-stat{border-left:1px solid var(--line-2)}
.mini-stat strong{display:block;font-size:26px;font-weight:740;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mini-stat span{font-size:12.5px;color:var(--muted);line-height:1.55}
.bars{margin-top:22px;padding:18px 22px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.bar-row{display:grid;grid-template-columns:130px minmax(0,1fr) 88px;gap:14px;align-items:center;font-size:12.5px;color:var(--muted)}
.bar-row .mono{text-align:right;font-size:12px;color:var(--ink)}
.bar{height:10px;background:var(--line-2);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:#a8a59c;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.bar-row.after .bar i{background:var(--blue)}
.bar.warn i{background:repeating-linear-gradient(45deg,#e0a33a 0 6px,#f2c46b 6px 12px)}
.bar-row+.bar-row:not(.after){margin-top:8px}
.case.is-active .bar i,html:not(.js) .bar i{transform:scaleX(1)}

/* delivery machine */
.machine{margin-top:26px;background:#fff;color:var(--ink);border:1px solid var(--line);padding:22px 24px 18px}
.machine-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.machine-head .mono{font-size:11px;letter-spacing:.14em;color:var(--blue)}
.machine-play{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 16px;background:transparent;border:1px solid #bdbab1;color:var(--ink);font-size:13px;transition:border-color .2s,background .2s}
.machine-play:hover{border-color:var(--blue);background:rgba(180,83,47,.06)}
.machine-play .icon{width:15px;height:15px}
.machine-rail{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:18px}
.machine-rail li{position:relative;font:10.5px/1 var(--mono);letter-spacing:0;padding:12px 3px;text-align:center;background:var(--paper);border:1px solid var(--line);color:var(--quiet);transition:all .3s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.machine-rail li.done{color:var(--green);border-color:#cfe0bf;background:var(--green-soft)}
.machine-rail li.now{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:0 6px 16px -8px rgba(180,83,47,.8)}
.machine-rail li.fail{color:#1b0f06;background:var(--amber);border-color:var(--amber)}
.machine-log{margin:14px 0 0;min-height:152px;max-height:152px;overflow:hidden;font:12px/1.75 var(--mono);color:var(--muted);white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);padding:12px 14px}
.machine-log .ok{color:var(--green)}.machine-log .warn{color:var(--amber-ink)}.machine-log .dim{color:var(--quiet)}
.machine-note{font-size:11.5px;color:var(--quiet);margin-top:10px}

/* figures (assets/figures.js) */
.fig{margin-top:26px;background:#fff;color:var(--ink);border:1px solid var(--line);padding:20px 22px 16px}
.fig-head{display:flex;align-items:center;gap:8px}
.fig-head .fig-kicker{margin-right:auto}
.fig-kicker{font-size:11px;letter-spacing:.14em;color:var(--blue)}
.fig-replay{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;background:transparent;border:1px solid #c9c6be;color:var(--ink);font-size:12.5px;transition:border-color .2s,background .2s}
.fig-replay:hover{border-color:var(--blue);background:rgba(180,83,47,.06)}
.fig-replay .icon{width:14px;height:14px}
.fig-replay{white-space:nowrap}
.fig-replay[hidden],.scan-toggle[hidden]{display:none}
.fig-say{font-size:14.5px;line-height:1.75;color:var(--ink);margin-top:10px;min-height:3.5em;max-width:880px}
.fig-readout{font-size:11px;color:var(--quiet);margin-top:8px;min-height:1.7em}
.fig-stage{position:relative;aspect-ratio:var(--ar,16/8);margin-top:10px}
.fig-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fig-foot{margin-top:14px}
.fig-progress{position:relative;height:2px;background:var(--line-2)}
.fig-progress i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.fig-tick{position:absolute;top:-3px;width:1px;height:8px;background:#bdbab1}
.fig-chapters{list-style:none;display:flex}
.fig-chapters li{flex:1 1 0;min-width:0}
.fig-chapters button{display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;border:0;background:none;padding:9px 10px 2px 0;font-size:12.5px;line-height:1.4;color:var(--quiet);transition:color .2s}
.fig-chapters button .mono{font-size:10px;letter-spacing:.04em}
.fig-chapters button:hover{color:var(--ink)}
.fig-chapters button.is-past{color:var(--muted)}
.fig-chapters button[aria-current]{color:var(--blue);font-weight:600}
.fig-code{font-size:12.5px;line-height:2;color:var(--muted);margin-top:12px}
.fig-code code{white-space:nowrap}
.fig-code-k{color:var(--green);font-weight:600;margin-right:4px}
.fig-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:10px}
.fig-legend .lg{display:inline-flex;align-items:center;gap:6px}
.fig-legend i{width:10px;height:10px;display:inline-block}
.fig-note{font-size:12px;line-height:1.8;color:var(--quiet);margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.fig-note .tag{margin-right:6px}
.fig.machine{padding:20px 22px 16px}
.fig .machine-rail{margin-top:14px}
.fig .machine-rail{margin-top:16px}
.machine-rail li.now{box-shadow:none}
.machine-now{font-size:12px;line-height:1.7;color:var(--muted);margin-top:10px;min-height:3.4em;white-space:pre-wrap}
.machine-now.warn{color:var(--amber-ink)}.machine-now.ok{color:var(--green)}
.machine-details{margin-top:6px;font-size:12px}
.machine-details summary{cursor:pointer;color:var(--quiet);font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 0}
.machine-details summary:hover{color:var(--ink)}
.fig .machine-log{min-height:0;max-height:none;height:auto;margin-top:6px}

/* ---------- 04 method (dark) ---------- */
.section-dark{padding:0;border-bottom:0}
.section-dark>.wrap{padding:88px 0;border-bottom:1px solid var(--line)}
.loop{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);counter-reset:none}
.loop li{position:relative;padding:24px 26px 24px 0}
.loop li+li{padding-left:26px;border-left:1px solid var(--line)}
.loop li:not(:last-child):after{content:"";position:absolute;right:-7px;top:30px;width:12px;height:12px;border-top:1px solid var(--blue);border-right:1px solid var(--blue);transform:rotate(45deg);background:var(--paper);z-index:1}
.loop .mono{font-size:11px;color:var(--blue);letter-spacing:.1em}
.loop strong{display:block;font-size:19px;margin-top:6px;letter-spacing:-.01em}
.loop p{font-size:13.5px;line-height:1.8;color:var(--muted);margin-top:6px}
.method-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;margin-top:48px;align-items:start}
.ledger{background:#fff;border:1px solid var(--line)}
.ledger-head{padding:26px 28px 20px}
.ledger-head .mono{font-size:11px;letter-spacing:.14em;color:var(--blue)}
.ledger-head h3{font-size:clamp(20px,2vw,26px);font-weight:720;letter-spacing:-.03em;line-height:1.4;margin-top:10px}
.ledger-head>p:not(.mono){font-size:13.5px;line-height:1.85;color:var(--muted);margin-top:10px}
.ledger table{width:100%;border-collapse:collapse;font-size:13.5px}
.ledger th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);padding:10px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ledger th+th,.ledger td+td{padding-left:0}
.ledger td{padding:14px 28px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.7;color:var(--muted)}
.ledger td:first-child{color:var(--ink);font-weight:560;width:31%}
.ledger td:last-child{width:30%;color:var(--ink)}
.ledger tr{transition:background .2s}.ledger tbody tr:hover{background:rgba(180,83,47,.03)}
.verdict{display:inline-block;font:600 11px/1 var(--mono);padding:5px 8px;border-radius:3px;letter-spacing:.04em}
.verdict.no{background:var(--red-soft);color:var(--red)}
.verdict.weak{background:var(--amber-soft);color:var(--amber-ink)}
.ledger-foot{font-size:11px;letter-spacing:.06em;color:var(--quiet);padding:14px 28px 18px}
.principles{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.principle{padding:20px 0;border-bottom:1px solid var(--line)}
.principle .mono{font-size:10.5px;letter-spacing:.14em;color:var(--blue)}
.principle h4{font-size:16px;font-weight:660;line-height:1.5;margin-top:6px;letter-spacing:-.01em}
.principle p:not(.mono){font-size:13.5px;line-height:1.8;color:var(--muted);margin-top:6px}

/* ---------- 05 projects ---------- */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.card{position:relative;padding:28px 26px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);transition:background .25s}
.card:hover{background:#fff}
.card:before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--blue);transition:width .4s var(--ease)}
.card:hover:before{width:100%}
.card-meta{font-size:10.5px;letter-spacing:.1em;color:var(--quiet)}
.card h3{font-size:21px;font-weight:720;letter-spacing:-.025em;margin-top:12px}
.card p:not(.card-meta){font-size:14px;line-height:1.85;color:var(--muted);margin-top:10px}
.card-feature{grid-column:span 1;background:var(--blue-soft)}
.card-feature:hover{background:#f3ddd2}
.card-shot{padding:0;display:flex;flex-direction:column;background:#fff}
.card-shot:hover{background:#fff}
.shot{height:360px;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line);display:flex;justify-content:center;padding:28px 28px 0}
.shot img{width:auto;max-width:100%;height:auto;object-fit:cover;object-position:top;align-self:flex-start;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;box-shadow:0 18px 40px -24px rgba(20,20,19,.35)}
.card-body{padding:24px 26px 28px}
.card .shot-note{font-size:10.5px;letter-spacing:.06em;color:var(--quiet);margin-top:12px}
.project-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--line)}
.project-list li{padding:22px 24px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-list h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.project-list p:not(.card-meta){font-size:13.5px;line-height:1.8;color:var(--muted);margin-top:6px}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:13px var(--mono);color:var(--blue)}
.card-link .icon{width:15px;height:15px;transition:transform .2s}.card-link:hover .icon{transform:translateX(3px)}

/* ---------- 06 capabilities ---------- */
.capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--ink);padding-top:28px}
.capability>.mono{font-size:11px;color:var(--quiet);letter-spacing:.1em}
.capability h3{font-size:21px;font-weight:720;margin-top:12px;letter-spacing:-.02em}
.capability>p{font-size:14.5px;line-height:1.85;color:var(--muted);margin-top:10px}
.capability .stack{font:12px/1.9 var(--mono);color:var(--ink);margin-top:14px}
.evidence{display:flex;flex-direction:column;margin-top:18px;border-top:1px solid var(--line)}
.evidence a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:560;transition:color .2s,padding .2s var(--ease)}
.evidence a:hover{color:var(--blue);padding-left:6px}
.evidence .icon{width:15px;height:15px}

/* ---------- 07 experience ---------- */
.experience{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:56px;margin-top:26px}
.experience-aside h2{font-size:clamp(30px,3.6vw,46px);font-weight:760;line-height:1.3;letter-spacing:-.045em}
.experience-aside p{font-size:15px;line-height:1.9;color:var(--muted);margin-top:18px;max-width:360px}
.timeline{border-top:1px solid var(--ink)}
.job{border-bottom:1px solid var(--line)}
.job summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer}
.job summary::-webkit-details-marker{display:none}
.job-summary-copy{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 24px;align-items:baseline}
.job-date{font:12.5px var(--mono);color:var(--quiet);grid-row:span 2}
.job-title{font-size:18px;font-weight:700;letter-spacing:-.01em}
.company{font-size:14px;color:var(--muted)}
.job summary .icon{transition:transform .25s var(--ease)}
.job[open] summary .icon{transform:rotate(45deg)}
.job summary:hover .job-title{color:var(--blue)}
.job-body{padding:0 0 24px 174px}
.job-body>p{font-size:14.5px;line-height:1.85}
.job-body ul{margin:10px 0 0;padding-left:18px}
.job-body li{font-size:14px;line-height:1.85;color:#3e3c38;margin-top:4px}
.job-body .stack{font:12px/1.8 var(--mono);color:var(--quiet);margin-top:14px}
.education{margin-top:56px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:56px}
.education h3{font-size:14px;font-family:var(--mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.education-list{display:grid;gap:24px}
.education-item{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--ink);padding-top:18px}
.education-item h4{font-size:18px;font-weight:700}
.education-item p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:4px}
.education-date{font:12.5px var(--mono);color:var(--quiet);white-space:nowrap}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:end;padding:96px 0}
.contact h2{font-size:clamp(34px,4.6vw,62px);font-weight:800;line-height:1.2;letter-spacing:-.055em;margin-top:26px}
.contact h2+p{font-size:15.5px;line-height:1.9;color:var(--muted);margin-top:20px}
.contact-actions{display:flex;flex-direction:column;gap:14px}
.email-link{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;padding:16px 0;border-bottom:2px solid var(--ink);transition:color .2s,border-color .2s;word-break:break-all}
.email-link:hover{color:var(--blue);border-color:var(--blue)}
.contact-secondary{display:flex;gap:26px;align-items:center}
.copy-email{display:inline-flex;align-items:center;gap:9px;border:0;background:none;font:13.5px var(--mono);padding:8px 0}
.copy-email:hover{color:var(--blue)}
.copy-status{font-size:13px;color:var(--green);min-height:22px}
.site-footer{border-top:1px solid var(--line);padding:24px 0}
.footer-wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:var(--quiet);flex-wrap:wrap}
.footer-wrap .mono{font-size:11px;letter-spacing:.06em}
.footer-wrap a{display:inline-flex;align-items:center;gap:6px}.footer-wrap a:hover{color:var(--blue)}
.footer-wrap .icon{width:13px;height:13px}

/* ---------- responsive ---------- */
@media (min-width:1640px){
  :root{--max:1400px}
  .hero-grid{gap:72px}
}
@media (max-width:1180px){
  :root{--gutter:40px}
  .site-nav{gap:22px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat:nth-child(4){padding-left:0;border-left:0}
  .stat:nth-child(n+4){border-top:1px solid var(--line-2)}
  .milestones{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .milestones:before{display:none}
  .arch{grid-template-columns:1fr}
  .arch-detail{border-left:0;border-top:1px solid var(--line)}
  .method-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .nav-contact{display:none}
  .menu-toggle{display:inline-flex}
  .site-nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .site-nav.is-open{transform:none;opacity:1;visibility:visible}
  .site-nav a{padding:13px 0;border-bottom:1px solid var(--line-2);font-size:16px}
  .site-nav a:after{display:none}
  .nav-mobile-only{display:block}
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .scan{aspect-ratio:1.35/1;max-height:none;min-height:0}
  .hero-ticker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-ticker>div:nth-child(3){padding-left:0;border-left:0}
  .section-intro{grid-template-columns:1fr;gap:18px;align-items:start}
  .casebook,.js .casebook{grid-template-columns:1fr}
  .case-dir{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-tabs{position:static;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding-top:0;scrollbar-width:none}
  .case-tabs::-webkit-scrollbar{display:none}
  .case-tabs button{flex:none;padding:14px 18px 14px 0;margin-right:18px;border-bottom:0;white-space:nowrap}
  .case-tabs button[aria-selected="true"]:after{right:18px;left:0;top:auto;bottom:-1px;width:auto;height:2px}
  .case-tabs button:focus-visible{outline-offset:-3px}
  .case{padding-left:0}
  .loop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loop li:nth-child(3){padding-left:0;border-left:0}
  .loop li:nth-child(n+3){border-top:1px solid var(--line)}
  .loop li:nth-child(2):after{display:none}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capabilities{grid-template-columns:1fr;gap:34px}
  .experience,.education{grid-template-columns:1fr;gap:28px}
  .contact{grid-template-columns:1fr;gap:34px}
}
@media (max-width:700px){
  :root{--gutter:16px}
  body{font-size:15px}
  .nav-wrap{min-height:64px}
  .site-nav{top:64px}
  html{scroll-padding-top:64px}
  .brand{font-size:18px}
  .hero{padding-top:26px}
  h1{font-size:clamp(38px,11vw,54px)}
  h1 .zh{white-space:normal}
  .identity{font-size:18px}
  .hero-actions{gap:18px}
  .scan{aspect-ratio:1/1}
  .scan-caption{font-size:11.5px}
  .hero-ticker>div{padding-right:10px}
  .hero-ticker>div+div{padding-left:12px}
  .section{padding:64px 0;scroll-margin-top:-44px}
  .section-dark{padding:0}.section-dark>.wrap{padding:64px 0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat,.stat+.stat{padding:18px 12px 18px 0}
  .stat:nth-child(even){padding-left:14px;border-left:1px solid var(--line-2)}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line-2)}
  .heatmap-card{padding:18px 14px}
  .milestones{grid-template-columns:1fr;row-gap:0;padding-left:20px}
  .milestones:before{display:block;left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .milestones li{padding:0 0 22px}
  .milestones li:before{left:-20px;top:4px}
  .arch-map{grid-template-columns:1fr;padding:18px 14px;gap:14px}
  .arch-layer{flex-wrap:wrap;gap:8px}
  .layer-name{flex:0 0 100%;align-self:flex-start}
  .arch-layer+.arch-layer:before,.arch-layer+.arch-layer:after{display:none}
  .arch-node{flex:1 1 calc(50% - 4px);padding:10px 11px}
  .arch-node.wide{flex-basis:100%}
  .arch-rail{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;gap:8px;padding:14px 0 0;border-left:0;border-top:1px dashed var(--line)}
  .arch-rail .layer-name{flex:0 0 100%}
  .arch-detail{padding:24px 18px}
  .case-head{grid-template-columns:1fr;gap:16px}
  .case-metric{justify-content:flex-start;text-align:left;max-width:none}
  .notes{grid-template-columns:1fr}
  .notes li,.notes li:nth-child(even){padding:20px 0;border-left:0}
  .figure-row{grid-template-columns:1fr}
  .mini-stat+.mini-stat{border-left:0;border-top:1px solid var(--line-2)}
  .bar-row{grid-template-columns:92px minmax(0,1fr) 70px;gap:10px;font-size:11.5px}
  .machine,.fig.machine,.fig{padding:16px 14px 14px}
  .fig-stage{aspect-ratio:var(--ar-m,4/5)}
  .machine-now{min-height:5.2em}
  .fig-say{font-size:13.5px;min-height:5.3em}
  .fig-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .fig-chapters button{padding-top:8px}
  .fig-kicker{font-size:10px;letter-spacing:.1em}
  .fig-head{flex-wrap:wrap}
  .fig-head .fig-kicker{flex:1 0 100%;margin-bottom:4px}
  .fig-replay{min-height:34px;padding:5px 12px;font-size:12px}
  .machine-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .machine-log{font-size:11px;min-height:172px;max-height:172px}
  .loop{grid-template-columns:1fr}
  .loop li,.loop li+li{padding:20px 0;border-left:0}
  .loop li+li{border-top:1px solid var(--line)}
  .loop li:after{display:none}
  .ledger-head{padding:22px 18px 16px}
  .ledger table,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto!important}
  .ledger thead{display:none}
  .ledger tr{padding:14px 18px;border-top:1px solid var(--line)}
  .ledger td{padding:0;border:0}
  .ledger td+td{margin-top:6px}
  .ledger-foot{padding:14px 18px 18px}
  .project-grid{grid-template-columns:1fr}
  .case-dir{grid-template-columns:1fr}
  .project-list{grid-template-columns:1fr}
  .shot{height:300px;padding:20px 20px 0}
  .job-summary-copy{grid-template-columns:1fr}
  .job-date{grid-row:auto}
  .job-body{padding-left:0}
  .education-item{flex-direction:column;gap:6px}
  .contact{padding:72px 0}
}
@media (max-width:380px){
  .machine-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .heat-cell{opacity:1}
}
/* ---------- print: a two-page, résumé-like summary ---------- */

/* ---------- resume and case reading ---------- */
.hero-copy{min-width:0}
@media screen and (min-width:981px){.hero h1 .en{font-size:clamp(40px,4vw,60px);line-height:1.12}}
.button-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.button-secondary:hover{background:#fff;border-color:var(--ink);color:var(--ink);box-shadow:none}
.ticker-note{font:12px/1.7 var(--sans);letter-spacing:0;max-width:850px}
.reading-paths{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding:0 0 16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.reading-paths-label{font:12px/1.7 var(--mono);color:var(--quiet)}
.role-routes{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.role-routes a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:550;color:var(--ink)}
.role-routes .icon{width:14px;height:14px;color:var(--quiet)}
.role-routes a:hover{text-decoration:underline;text-underline-offset:5px}
.case-index{margin:0 0 28px}
.case-index>summary{cursor:pointer;font-size:14px;min-height:44px;display:flex;align-items:center;gap:10px;list-style:none}
.case-index>summary:before,.case-evidence>summary:before{content:"+";font:20px/1 var(--mono);color:var(--blue)}
.case-index[open]>summary:before,.case-evidence[open]>summary:before{content:"−"}
.case-index>summary::-webkit-details-marker,.case-evidence>summary::-webkit-details-marker{display:none}
.case-summary{margin:24px 0}
.case-summary>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.case-summary dt{font-size:13px;line-height:1.8;color:var(--muted);font-weight:600}
.case-summary dd{font-size:15px;line-height:1.85;overflow-wrap:anywhere}
.case-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.copy-case{border:0;background:transparent;display:inline-flex;align-items:center;gap:8px;padding:8px 0;min-height:44px;font-size:14px;color:var(--blue)}
.case-share-status{font-size:13px;color:var(--green)}
.case-evidence{border-top:1px solid var(--line);margin-top:12px}
.case-evidence>summary{cursor:pointer;display:flex;align-items:center;gap:12px;min-height:56px;list-style:none;font-size:14px;font-weight:600}
.case-evidence[open]>summary{margin-bottom:18px}
.case-head h3{font-size:clamp(22px,2.2vw,30px);line-height:1.4}
.resume-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:32px 0 0;margin-top:24px;border-top:1px solid var(--ink)}
.resume-panel h2{font-size:clamp(26px,3.2vw,40px);line-height:1.3;letter-spacing:-.035em}
.resume-panel p{font-size:15px;line-height:1.8;margin-top:12px;color:var(--muted)}
.resume-panel .resume-note{font-size:13px;margin-top:10px}
.resume-downloads{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.resume-downloads .button{white-space:normal;text-align:center}
@media(max-width:1180px){.site-nav{gap:18px}.nav-tools{gap:16px}}
@media(max-width:980px){
  .hero-ticker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-ticker>div:nth-child(3){padding-left:0;border-left:0}
  .hero-ticker>div:nth-child(n+3){border-top:1px solid var(--line-2)}
  .resume-panel{grid-template-columns:1fr}
  .resume-downloads{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:700px){
  .nav-wrap{gap:12px}
  .nav-tools{gap:8px}
  .hero .hero-lede{font-size:15px;line-height:1.8}
  .hero-ticker{grid-template-columns:1fr;gap:0}
  .hero-ticker>div,.hero-ticker>div+div,.hero-ticker>div:nth-child(3){padding:12px 0;border-left:0;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
  .hero-ticker dd{font-size:23px;white-space:nowrap}
  .hero-ticker dt{font-size:11px}
  .reading-paths{gap:4px;padding-bottom:12px}
  .reading-paths-label{flex:0 0 100%}
  .role-routes{gap:4px 20px}
  .role-routes a{font-size:13px;gap:6px}
  .role-routes .icon{display:none}
  .case-summary>div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .case-summary dd{font-size:15px}
  .resume-panel{padding:24px 0 0;gap:24px}
  .resume-downloads{flex-direction:column}
}
@media print{
  .hero h1{font-size:20pt}
  .reading-paths,.case-index,.case-tools,#resume{display:none!important}
  .case-evidence>summary{display:none}
  .case-summary{margin:4pt 0}
  .case-summary>div{padding:3pt 0;gap:8pt;grid-template-columns:65pt 1fr}
  .case-summary dt,.case-summary dd{font-size:8.5pt;line-height:1.5}
}

@media print{
  @page{size:A4;margin:12mm 14mm}
  :root{--gutter:0px;--max:none}
  html{scroll-padding-top:0}
  body{font-size:9.5pt;line-height:1.5;background:#fff;color:#000}
  *,*:before,*:after{animation:none!important;transition:none!important;box-shadow:none!important}
  .js .reveal{opacity:1;transform:none}
  .wrap{width:auto}
  /* Interactive exhibits, and headlines the section labels already cover, do not print. */
  .scan-toggle,.case-dir,.arch-paths,.case-more,.fig-code,.fig-legend,.hero-lede-2,.skip-link,.site-header,.scan,.hero-actions,.heatmap-card,.milestones,.section-intro h2,#year .section-intro,.contact,#platform,#method,#projects,.case-tabs,.case .notes,.case .figure-row,.case .bars,.machine,.fig,.capabilities .evidence,.contact-secondary,.copy-status,.site-footer,.job summary .icon,.section-label .number{display:none!important}
  .section,.section-dark>.wrap{padding:0;border:0}
  .section{margin-top:12pt}
  .section-label{font-size:7.5pt;letter-spacing:.12em;color:#444;border-bottom:.5pt solid #999;padding-bottom:2pt;break-after:avoid}
  #skills{break-inside:avoid}
  .section-intro{display:block;margin:5pt 0 6pt}
  .section-intro p{font-size:9pt;line-height:1.5;max-width:none;margin-top:2pt;color:#222}
  /* Hero becomes the résumé header. */
  .hero{min-height:0;padding:0;border:0;display:block}
  .hero-grid{display:block;margin:0}
  .eyebrow{font-size:7.5pt;margin:0 0 3pt}
  h1{font-size:20pt;line-height:1.15;letter-spacing:-.03em}
  h1 .zh,h1 .en{display:inline;white-space:normal}
  .identity{font-size:11pt;margin-top:3pt}
  .hero-lede{font-size:9.5pt;line-height:1.55;max-width:none;margin-top:3pt;color:#222}
  .hero-ticker{margin-top:6pt;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-ticker>div,.hero-ticker>div+div{padding:4pt 8pt 0 0;border-left:0}
  .hero-ticker dt{font-size:7.5pt;color:#444}
  .hero-ticker dd{font-size:12pt}
  .ticker-note{font-size:7pt;margin-top:3pt;color:#444}
  /* The year: numbers and milestones. */
  .stats{grid-template-columns:repeat(6,minmax(0,1fr));border-top:.5pt solid #000}
  .stat,.stat+.stat{padding:5pt 6pt 5pt 0;border:0;gap:2pt}
  .stat strong{font-size:13pt}
  .stat span{font-size:7.5pt;color:#333}
  .milestones{grid-template-columns:repeat(3,minmax(0,1fr));gap:4pt 12pt;margin-top:8pt;padding:0}
  .milestones:before,.milestones li:before{display:none}
  .milestones li{padding:0}
  .milestones time{font-size:7.5pt}
  .milestones strong{font-size:9pt;margin-top:1pt}
  .milestones p{font-size:8pt;line-height:1.45;margin-top:1pt;color:#333}
  /* Cases: headline and metric only, as a compact list. */
  .casebook{display:block;border-top:.5pt solid #000}
  .js .case[hidden]{display:block}
  .case{padding:4pt 0;animation:none;break-inside:avoid;border-bottom:.5pt solid #ccc}
  .case-head{grid-template-columns:minmax(0,1fr) auto;gap:10pt;padding:0;border:0;align-items:baseline}
  .case-kicker{font-size:7pt}
  .case-head h3{font-size:9.5pt;line-height:1.4;margin-top:1pt;letter-spacing:0}
  .case-metric{font-size:11pt;gap:4pt;max-width:none}
  .case-metric .unit{font-size:7.5pt;max-width:120pt}
  .case-metric .icon{width:10pt;height:10pt}
  .tag{font-size:6.5pt;padding:1pt 3pt;border:.5pt solid currentColor}
  /* Capabilities: three columns of text. */
  .capabilities{grid-template-columns:repeat(3,minmax(0,1fr));gap:14pt;padding-top:6pt;border-top:.5pt solid #000}
  .capability h3{font-size:10pt;margin-top:2pt}
  .capability>p{font-size:8.5pt;line-height:1.45;margin-top:2pt}
  .capability .stack{font-size:7.5pt;line-height:1.5;margin-top:3pt}
  /* Experience: every job open, compact. */
  .case-head h3{break-inside:avoid}
  .experience{display:block;margin-top:4pt}
  .experience-aside{display:none}
  .timeline{border-top:0}
  .job{break-inside:avoid;border-bottom:.5pt solid #ccc}
  .job summary{padding:5pt 0 2pt}
  .job-summary-copy{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10pt}
  .job-summary-copy .job-date{order:2;margin-left:auto}
  .job-date{font-size:8pt;color:#333}
  .job-title{font-size:10.5pt}
  .company{font-size:9pt;color:#222}
  .job-body{padding:0 0 5pt}
  .job-body>p{font-size:9pt;line-height:1.45}
  .job-body ul{margin-top:2pt}
  .job-body li{font-size:8.5pt;line-height:1.42;margin-top:1pt;color:#111}
  .job-body .stack{font-size:7.5pt;margin-top:3pt;color:#444}
  .education{display:block;margin-top:8pt}
  .education h3{font-size:7.5pt;margin-bottom:3pt}
  .education-list{gap:4pt}
  .education-item{flex-direction:row;padding-top:4pt;border-top:.5pt solid #000;break-inside:avoid}
  .education-item>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8pt}
  .education-item h4{font-size:10pt}
  .education-item p{font-size:8.5pt;line-height:1.45;margin-top:0;color:#222}
  /* Contact details sit in the header, as on a résumé; the closing section does not print. */
  .identity:after{content:"  ·  zchaw127@gmail.com  ·  hire.jiawis.com  ·  github.com/chaw1";font:400 8.5pt var(--mono);letter-spacing:0;color:#222}
  a{color:#000}
}

/* ---------- 01 Solar Harness film (the one dark block besides the hero) ---------- */
.hf{margin-top:8px;background:#0f0e0d;color:#f0eee6;--hx-blue:#d97757}
.hx-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#2a211b 0%,#121110 55%,#0d0c0b 100%)}
.hx-gl,.hx-over{position:absolute;inset:0;width:100%;height:100%;display:block}
.hx-hud{position:absolute;inset:0;pointer-events:none;font-size:14px}
.hx-hud:before,.hx-hud:after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.hx-hud:before{top:0;height:150px;background:linear-gradient(rgba(13,12,11,.78),rgba(13,12,11,0))}
.hx-hud:after{bottom:0;height:150px;background:linear-gradient(rgba(13,12,11,0),rgba(13,12,11,.82))}
.hx-brand{position:absolute;left:24px;top:20px;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;color:#f0eee6;font-weight:700}
.hx-brand i{width:8px;height:8px;border-radius:50%;background:#8fd18a;box-shadow:0 0 10px #8fd18a;animation:hx-blink 2s ease-in-out infinite}
.hx-brand span{font-weight:400;color:#8f8c84;letter-spacing:.1em}
@keyframes hx-blink{50%{opacity:.35}}
.hx-step{position:absolute;left:24px;top:52px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
.hx-step-n{font-size:13px;color:var(--hx-blue);font-weight:700}
.hx-step-t{font-size:clamp(22px,2.6vw,34px);font-weight:760;letter-spacing:-.03em;line-height:1.15}
.hx-step-s{grid-column:2;font-size:11.5px;color:#a8a59c;margin-top:6px;letter-spacing:.02em}
.hx-step.is-new .hx-step-t,.hx-step.is-new .hx-step-s{animation:hx-rise .6s var(--ease)}
@keyframes hx-rise{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.hx-metrics{position:absolute;right:24px;top:20px;display:flex;gap:22px;margin:0;opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s var(--ease)}
.show-metrics .hx-metrics{opacity:1;transform:none}
.hx-metrics div{text-align:right}
.hx-metrics dt{font-size:10px;letter-spacing:.14em;color:#85827a}
.hx-metrics dd{margin:2px 0 0;font-size:20px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hx-metrics [data-m="ver"]{color:#a8a59c}
.is-v3 .hx-metrics [data-m="ver"]{color:#8fd18a;text-shadow:0 0 12px rgba(143,209,138,.6)}
.hx-prompt{position:absolute;left:50%;bottom:16%;width:min(760px,80%);transform:translateX(-50%);display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:16px 18px;background:rgba(30,27,24,.72);border:1px solid rgba(217,119,87,.35);box-shadow:0 0 0 1px rgba(217,119,87,.08),0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(217,119,87,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .8s var(--ease)}
.hx-prompt-k{font-size:10.5px;letter-spacing:.14em;color:var(--hx-blue);padding-top:4px}
.hx-typed{font-size:clamp(14px,1.45vw,18px);line-height:1.65;color:#faf9f5;min-height:1.65em}
.is-typing .hx-typed:after{content:"";display:inline-block;width:8px;height:1.1em;margin-left:3px;vertical-align:-.18em;background:var(--hx-blue);box-shadow:0 0 8px var(--hx-blue);animation:hf-caret 1s steps(1) infinite}
@keyframes hf-caret{50%{opacity:0}}
.hx-send{width:30px;height:30px;background:var(--hx-blue);-webkit-mask:url(icons/arrow-up-right.svg) center/18px no-repeat;mask:url(icons/arrow-up-right.svg) center/18px no-repeat}
.is-docked .hx-prompt{bottom:auto;top:20px;left:50%;width:min(520px,44%);padding:9px 12px;opacity:.0;transform:translate(-50%,-8px) scale(.96);visibility:hidden;transition:all .8s var(--ease),visibility 0s .8s}
.is-gone .hx-prompt{display:none}
.hx-approve{position:absolute;left:50%;top:50%;width:min(380px,70%);transform:translate(-50%,-40%) scale(.96);opacity:0;padding:18px 20px;background:rgba(30,22,8,.82);border:1px solid rgba(255,170,51,.5);box-shadow:0 0 50px rgba(255,170,51,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .35s,transform .45s var(--ease),border-color .3s,background .3s}
.hx-approve.is-in{opacity:1;transform:translate(-50%,-50%)}
.hx-approve p.mono{font-size:10.5px;letter-spacing:.14em;color:#ffaa33}
.hx-approve p+p{margin-top:8px;font-size:15px;line-height:1.6;color:#fff}
.hx-approve-b{display:inline-block;margin-top:14px;padding:6px 18px;background:#ffaa33;color:#140d02;font-weight:700;font-size:13px}
.hx-approve-ok{display:none;margin-top:14px;font-size:11.5px;letter-spacing:.1em;color:#8fd18a}
.hx-approve.is-ok{border-color:rgba(143,209,138,.55);background:rgba(22,30,18,.82);box-shadow:0 0 50px rgba(143,209,138,.2)}
.hx-approve.is-ok p.mono{color:#8fd18a}
.hx-approve.is-ok .hx-approve-b{display:none}.hx-approve.is-ok .hx-approve-ok{display:block}
.hx-log{position:absolute;left:24px;bottom:18px;list-style:none;margin:0;padding:0;display:grid;gap:5px;max-width:min(560px,60%)}
.hx-log li{display:flex;gap:9px;font-size:12px;line-height:1.5;color:#c9c5bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:hx-in .4s var(--ease)}
.hx-log li b{width:12px;flex:none;font-weight:700}
.hx-log li.run{color:#fff}.hx-log li.run b{color:var(--hx-blue)}
.hx-log li.ok b{color:#8fd18a}
.hx-log li:not(:last-child){opacity:.55}
@keyframes hx-in{from{opacity:0;transform:translateX(-8px)}}
.hx-final{position:absolute;right:5%;top:50%;width:min(360px,34%);transform:translate(20px,-46%);opacity:0;padding:20px 22px;background:rgba(26,24,22,.78);border:1px solid rgba(143,209,138,.4);box-shadow:0 0 60px rgba(143,209,138,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .6s,transform .8s var(--ease)}
.hx-final.is-in{opacity:1;transform:translate(0,-50%)}
.hx-final-k{font-size:10.5px;letter-spacing:.14em;color:#8fd18a}
.hx-final-name{font-size:13px;font-weight:700;color:#fff;margin-top:8px;word-break:break-all}
.hx-lineage{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.hx-lineage li{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#d6d2c8;padding-left:16px;position:relative}
.hx-lineage li:before{content:"";position:absolute;left:3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--hx-blue)}
.hx-lineage li+li:after{content:"";position:absolute;left:5.5px;top:-8px;height:10px;width:1px;background:rgba(255,255,255,.2)}
.hx-lineage li:last-child:before{background:#8fd18a;box-shadow:0 0 8px #8fd18a}
.hx-lineage b{font-weight:600;color:#fff}
.hx-final-note{font-size:12.5px;line-height:1.7;color:#a8a59c;margin-top:14px}
.hx-fade{position:absolute;inset:0;background:#0d0c0b;opacity:0}
.hx-nogl{display:none;position:absolute;inset:0;place-items:center;text-align:center;color:#a8a59c;font-size:14px;padding:24px}
.hf.no-webgl .hx-nogl{display:grid}.hf.no-webgl .hx-hud,.hf.no-webgl canvas{display:none}
.hf-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 18px 0;border-top:1px solid #2a2723}
.hf-play{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #3a3631;background:#111a25;color:#fff;padding:0}
.hf-play:hover{border-color:var(--hx-blue)}
.hf-play .i-play{display:inline-block}.hf-play .i-pause{display:none}
.hf.is-playing .hf-play .i-play{display:none}.hf.is-playing .hf-play .i-pause{display:inline-block}
.hf-range{width:100%;margin:0;accent-color:var(--hx-blue);height:24px;cursor:pointer}
.hf-time{font:11px/1 var(--mono);color:#8f8c84;min-width:78px;text-align:right}
.hf-chapters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:6px 18px 14px}
.hf-chapters button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-top:2px solid #2c2925;background:none;padding:9px 8px 4px 0;font-size:12.5px;color:#85827a;text-align:left;transition:color .2s,border-color .2s}
.hf-chapters button .mono{font-size:10px;letter-spacing:.08em}
.hf-chapters button.is-past{border-top-color:#7a4330;color:#a8a59c}
.hf-chapters button.is-on{border-top-color:var(--hx-blue);color:#fff;font-weight:600}
.hf-chapters button:hover{color:var(--hx-blue)}
.hf-chapters button:focus-visible,.hf-play:focus-visible{outline-color:var(--hx-blue)}
.hf-note{font-size:12px;line-height:1.8;color:var(--quiet);margin-top:14px;max-width:880px}
.hf-credits{margin-top:8px;font-size:11.5px;color:var(--quiet);max-width:880px}
.hf-credits summary{cursor:pointer;font-size:11px;letter-spacing:.06em;padding:6px 0}
.hf-credits ol{margin:6px 0 0 18px;display:grid;gap:3px;line-height:1.6}
.hf-credits a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;overflow-wrap:anywhere}
.hf-proof{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--ink)}
.hf-proof li{padding:20px 22px 4px 0;min-width:0}
.hf-proof li+li{padding-left:22px;border-left:1px solid var(--line)}
.hf-proof .mono{font-size:10.5px;letter-spacing:.08em;color:var(--blue)}
.hf-proof strong{display:block;font-size:24px;font-weight:760;letter-spacing:-.03em;line-height:1.3;margin-top:10px}
.hf-proof p{font-size:13px;line-height:1.75;color:var(--muted);margin-top:8px}
.hf-proof .tag{margin-left:2px}
@media (max-width:900px){
  .hx-stage{aspect-ratio:4/3.4}
  .hx-metrics{gap:14px}.hx-metrics dd{font-size:16px}
  .hx-final{width:min(340px,48%)}
  .hf-chapters{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
  .hf-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-proof li:nth-child(3){padding-left:0;border-left:0}
  .hf-proof li:nth-child(n+3){border-top:1px solid var(--line-2)}
}
@media (max-width:560px){
  .hx-stage{aspect-ratio:4/5.4}
  .hx-brand{left:14px;top:14px;font-size:10px}.hx-brand span{display:none}
  .hx-step{left:14px;top:40px}.hx-step-s{font-size:10.5px}
  .hx-metrics{right:auto;left:14px;top:auto;bottom:88px;gap:16px}
  .hx-metrics dd{font-size:15px}
  .hx-prompt{width:calc(100% - 28px);bottom:30%;padding:12px 14px;gap:10px;grid-template-columns:1fr}
  .hx-prompt-k{padding-top:0}.hx-send{display:none}
  .hx-log{left:14px;bottom:12px;max-width:calc(100% - 28px)}.hx-log li{font-size:11px}.hx-log li:nth-child(-n+2):not(:last-child){display:none}
  .hx-approve{width:calc(100% - 40px)}
  .hx-final{left:14px;right:14px;top:auto;bottom:118px;width:auto;padding:14px 16px;transform:translateY(20px)}
  .hx-final.is-in{transform:none}
  .hx-lineage{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .hx-lineage li{flex-direction:column;align-items:flex-start;padding-left:0;font-size:10.5px}
  .hx-lineage li:before,.hx-lineage li+li:after{display:none}
  .hx-final-note{display:none}
  .hf-controls{padding:10px 12px 0;gap:10px}.hf-chapters{padding:4px 12px 10px}
  .hf-proof{grid-template-columns:1fr}
  .hf-proof li,.hf-proof li+li{padding:18px 0 4px;border-left:0}
  .hf-proof li+li{border-top:1px solid var(--line-2)}
}
@media (prefers-reduced-motion:reduce){.hx-step.is-new .hx-step-t,.hx-step.is-new .hx-step-s,.hx-log li{animation:none}.hx-brand i{animation:none}}
@media print{#agent .hf,#agent .hf-note{display:none!important}}

/* ---------- 01 AI chapter: part headers, harness anatomy, agent workbench ---------- */
.ai-part{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px 48px;align-items:end;margin:72px 0 24px;padding-top:28px;border-top:1px solid var(--line)}
.ai-part:first-of-type{margin-top:8px}
.ai-k{grid-column:1/-1;font-size:11px;letter-spacing:.14em;color:var(--blue)}
.ai-part h3{font-size:clamp(22px,2.3vw,30px);line-height:1.35;letter-spacing:-.03em}
.ai-part p:not(.ai-k){font-size:14.5px;line-height:1.85;color:var(--muted)}
#agent .hf-note{margin-top:12px}

.ax{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0;border:1px solid var(--line);background:#fff}
.ax-map{padding:28px 30px 26px;border-right:1px solid var(--line);min-width:0}
.ax-groups{display:flex;font-size:10.5px;letter-spacing:.06em;color:var(--quiet);margin-bottom:8px}
.ax-groups>span{width:var(--w);padding:0 6px 6px 0;border-bottom:2px solid var(--ink);margin-right:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-groups>span:nth-child(1){border-color:#b4532f}.ax-groups>span:nth-child(2){border-color:#5e5d59}.ax-groups>span:nth-child(3){border-color:#4f7fae;margin-right:0}
.ax-bar{display:flex;height:132px;gap:2px;margin-top:6px}
.ax-seg{position:relative;flex:0 0 calc(var(--w) - 2px);min-width:0;border:0;padding:8px 6px;background:var(--c);color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;overflow:hidden;transform-origin:bottom;transform:scaleY(.04);opacity:.2;transition:transform .9s var(--ease) var(--d),opacity .6s var(--d),filter .2s,box-shadow .2s}
.ax.is-in .ax-seg,html:not(.js) .ax-seg{transform:none;opacity:1}
.ax-seg span{font-size:10px;line-height:1.25;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.92;white-space:nowrap}
.ax-seg b{font-size:12px;font-weight:700}
.ax-seg[style*="#d2d0c6"],.ax-seg[style*="#bdbab1"],.ax-seg[style*="#eecbbb"],.ax-seg[style*="#e8e6dc"],.ax-seg[style*="#e3a68c"],.ax-seg[style*="#8db4dc"]{color:var(--ink)}
.ax-seg:hover,.ax-seg.is-on{filter:saturate(1.15) brightness(1.04);box-shadow:inset 0 0 0 2px var(--ink)}
.ax-tip{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:3.4em;margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.ax-tip i{width:10px;height:10px;align-self:center}
.ax-tip .mono{font-size:12px;font-weight:700}
.ax-tip-g{flex-basis:100%;font-size:12px;color:var(--quiet)}
.ax-cache{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.ax-cache>p.mono{font-size:10.5px;letter-spacing:.12em;color:var(--quiet);margin-bottom:10px}
.ax-gauge{display:grid;grid-template-columns:72px minmax(0,1fr) 56px;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);margin-top:6px}
.ax-gauge i{height:8px;background:linear-gradient(90deg,var(--blue) var(--w),var(--line-2) var(--w))}
.ax-gauge.ref i{background:linear-gradient(90deg,#97958d var(--w),var(--line-2) var(--w))}
.ax-gauge b{font-size:12.5px;text-align:right;color:var(--ink)}
.ax-cache>p:last-child{font-size:13px;line-height:1.75;color:var(--muted);margin-top:12px}
.ax-side{padding:28px 30px 24px;min-width:0;background:linear-gradient(180deg,#fff,var(--paper))}
.ax-side-k{font-size:10.5px;letter-spacing:.12em;color:var(--quiet)}
.ax-res{list-style:none;margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 22px}
.ax-res li>p:first-child{font-size:13px;color:var(--ink);font-weight:600}
.ax-pair{display:grid;gap:3px;margin-top:7px}
.ax-b{display:block;height:7px;width:0;transition:width 1.2s var(--ease)}
.ax-before{background:#d2d0c6}.ax-after{background:var(--blue)}
.ax-res li.up .ax-after{background:#4a6b2f}
.ax.is-in .ax-b,html:not(.js) .ax-b{width:var(--w)}
.ax.is-in .ax-after{transition-delay:.5s}
.ax-num{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:12px;color:var(--quiet)}
.ax-num s{text-decoration-color:rgba(20,20,19,.35)}
.ax-num strong{font-size:18px;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ax-res li.up .ax-num strong{color:#4a6b2f}
.ax-foot{font-size:12.5px;line-height:1.75;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}

.wb{border:1px solid var(--line);background:#fff}
.wb-flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.wb-flow li{position:relative;padding:20px 24px 18px}
.wb-flow li+li{border-left:1px solid var(--line-2)}
.wb-flow li:not(:last-child):after{content:"";position:absolute;right:-6px;top:26px;width:10px;height:10px;border-top:1.5px solid var(--blue);border-right:1.5px solid var(--blue);transform:rotate(45deg);background:#fff;z-index:1}
.wb-flow .mono{font-size:10.5px;letter-spacing:.12em;color:var(--blue)}
.wb-flow strong{display:block;font-size:16px;margin-top:6px}
.wb-flow p{font-size:12.5px;line-height:1.7;color:var(--muted);margin-top:4px}
.wb-mcp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 24px;border-bottom:1px solid var(--line);font-size:11px;background:var(--paper)}
.wb-mcp>span{font-weight:700;color:var(--ink);letter-spacing:.1em;margin-right:6px}
.wb-mcp i{font-style:normal;padding:4px 9px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px}
.wb-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}
.wb-skills{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:20px;align-content:start;border-right:1px solid var(--line)}
.wb-skills button{width:100%;min-height:64px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:1px solid var(--line);background:var(--paper);text-align:left;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--ease)}
.wb-skills button .mono{font-size:10.5px;color:var(--quiet)}
.wb-skills button strong{font-size:14px}
.wb-skills button:hover{border-color:var(--blue);transform:translateY(-1px)}
.wb-skills button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.wb-skills button[aria-pressed="true"] .mono{color:var(--blue)}
.wb-term{display:flex;flex-direction:column;min-width:0;background:#1a1918;color:#f0eee6}
.wb-term-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;border-bottom:1px solid #36332e}
.wb-term-bar i{width:9px;height:9px;border-radius:50%;background:#3e3c38}
.wb-term-bar i:first-child{background:#d97757}
.wb-term-title{margin-left:10px;font-size:12px;color:#f0eee6}
.wb-demo{margin-left:auto;font-size:10px;letter-spacing:.1em;color:#8f8c84}
.wb-term-body{flex:1;min-height:300px;padding:18px 20px;font-size:12.5px;line-height:1.75}
.wb-term-body p{display:flex;gap:10px}
.wb-term-body b{flex:none;width:16px;text-align:center}
.wb-cmd{color:#fff}.wb-cmd b{color:#d97757}
.wb-line{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .4s var(--ease)}
.wb-line.is-in{opacity:1;transform:none}
.wb-line.ok b{color:#8fd18a}.wb-line.note{color:#bdbab1}.wb-line.note b{color:#8f8c84}
.wb-line.warn{color:#f0b35a}.wb-line.stop{color:#ffb39a}.wb-line.stop b{color:#ff8a65}
.wb-caret b{color:#d97757}.wb-caret i{display:inline-block;width:8px;height:1.1em;background:#d97757;vertical-align:-.2em;animation:hf-caret 1s steps(1) infinite}
.wb-guard{display:flex;gap:10px;align-items:baseline;padding:12px 20px 14px;border-top:1px solid #36332e;font-size:12.5px;line-height:1.6;color:#d6d2c8}
.wb-guard .mono{flex:none;font-size:10px;letter-spacing:.12em;color:#f0b35a}

.section-follow{padding-top:8px}
#platform{border-bottom:0}
.section-label-sub{color:var(--quiet)}
.resume-panel h3{font-size:clamp(24px,2.6vw,32px);line-height:1.3;letter-spacing:-.03em}
#work .resume-panel{margin-top:56px}

@media (max-width:900px){
  .ai-part{grid-template-columns:1fr;gap:10px}
  .ax{grid-template-columns:1fr}
  .ax-map{border-right:0;border-bottom:1px solid var(--line);padding:22px 18px}
  .ax-side{padding:22px 18px}
  .ax-bar{height:110px}
  .ax-res{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-flow li:nth-child(3){border-left:0}
  .wb-flow li:nth-child(n+3){border-top:1px solid var(--line-2)}
  .wb-flow li:nth-child(2):after{display:none}
  .wb-main{grid-template-columns:1fr}
  .wb-skills{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;scrollbar-width:none;padding:14px}
  .wb-skills::-webkit-scrollbar{display:none}
  .wb-skills li{flex:0 0 150px}
}
@media (max-width:560px){
  .ax-groups{font-size:9px}
  .ax-seg span{display:none}
  .ax-seg b{font-size:10px}
  .ax-res{grid-template-columns:1fr}
  .wb-flow li{padding:16px 14px}
  .wb-mcp{padding:10px 14px}
  .wb-term-body{min-height:260px;padding:14px;font-size:12px}
  .wb-guard{padding:10px 14px 12px}
}
@media (prefers-reduced-motion:reduce){.ax-seg,.ax-b,.wb-line{transition:none}.wb-caret i{animation:none}}
@media print{.ax,.wb,#anatomy-head{display:none!important}}

/* ---------- 01 capability map ---------- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cap{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.cap:hover{border-color:var(--blue);box-shadow:0 18px 40px -28px rgba(20,20,19,.4);transform:translateY(-2px)}
.cap-head{display:flex;align-items:center;gap:12px;padding:18px 20px 14px;border-bottom:2px solid var(--ink)}
.cap-head .mono{font-size:12px;font-weight:700;color:var(--blue)}
.cap-head h3{flex:1;font-size:18px;letter-spacing:-.02em}
.cap-head .icon{width:16px;height:16px;color:var(--quiet);transition:transform .25s var(--ease),color .2s}
.cap-head:hover .icon{transform:translateX(3px);color:var(--blue)}
.cap ul{list-style:none;padding:4px 20px 10px}
.cap li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.cap li:last-child{border-bottom:0}
.cap-kw{font-size:13.5px;font-weight:700;color:var(--ink)}
.cap-ev{grid-column:1;font-size:12.5px;line-height:1.7;color:var(--muted)}
.cap-num{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:5px;font-size:17px;font-weight:700;color:var(--blue);white-space:nowrap;letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding-top:1px}
.cap-num .tag{font-size:9.5px}
@media (max-width:1100px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.caps{grid-template-columns:1fr}.cap ul{padding:2px 16px 8px}.cap-head{padding:16px}}

/* ---------- 07 projects ---------- */
.pj-feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pj{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pj:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,20,19,.35)}
.pj-stage{position:relative;height:380px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;padding:36px 40px 0;isolation:isolate}
.pj-rk .pj-stage{background:radial-gradient(120% 90% at 20% 0%,#f6e5dc 0%,#f0eee6 55%,#e8eedb 100%)}
.pj-hola .pj-stage{background:radial-gradient(120% 90% at 80% 0%,#fbe9c6 0%,#f0eee6 50%,#f3ddd2 100%)}
.pj-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(20,20,19,.045) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(20,20,19,.045) 1px,transparent 1px) 0 0/28px 100%;mask:radial-gradient(80% 70% at 50% 40%,#000,transparent);-webkit-mask:radial-gradient(80% 70% at 50% 40%,#000,transparent)}
.pj-device{width:min(78%,340px);margin:0;padding:8px 8px 0;background:#141413;border-radius:16px 16px 0 0;box-shadow:0 30px 60px -28px rgba(20,20,19,.55);transform:translateY(14px) rotate(-1.2deg);transition:transform .5s var(--ease)}
.pj-phone{width:min(56%,232px);border-radius:26px 26px 0 0;padding:9px 9px 0;transform:translateY(14px) rotate(1.5deg)}
.pj-device img{width:100%;height:auto;border-radius:10px 10px 0 0;display:block}
.pj-phone img{border-radius:18px 18px 0 0}
.pj:hover .pj-device{transform:translateY(4px) rotate(0)}
.pj-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 10px 24px -14px rgba(20,20,19,.4);animation:pj-float 6s ease-in-out infinite;white-space:nowrap}
.pj-chip b{font:800 15px/1 var(--sans);color:var(--blue)}
.pj-chip i{font-style:normal;color:#4a6b2f;font-weight:800}
.pj-chip.c1{left:14px;top:118px}
.pj-chip.c2{right:14px;top:206px;animation-delay:-2s}
.pj-chip.c3{left:22px;bottom:34px;animation-delay:-4s;font-family:var(--mono);font-size:11px}
@keyframes pj-float{50%{transform:translateY(-6px)}}
.pj-body{padding:24px 26px 26px;border-top:1px solid var(--line)}
.pj-body h3{font-size:22px;letter-spacing:-.02em;margin-top:8px}
.pj-body p:not(.card-meta):not(.shot-note){font-size:14px;line-height:1.85;color:var(--muted);margin-top:10px}
.pj-body .shot-note{font-size:10.5px;letter-spacing:.06em;color:var(--quiet);margin-top:12px}
.pj-mini{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.pj-mini li{background:#fff;border:1px solid var(--line);padding:0 0 20px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.pj-mini li:hover{transform:translateY(-3px);border-color:var(--blue)}

.pj-mini h3{font-size:16px;letter-spacing:-.02em;margin-top:6px}
.pj-mini p:not(.card-meta){font-size:13px;line-height:1.75;color:var(--muted);margin-top:6px}
.pj-mini .card-meta{margin-top:14px}
.pj-art{display:block;width:100%;height:auto;background:var(--paper-2);border-bottom:1px solid var(--line)}
.pj-art .a-panel{fill:#fff;stroke:var(--line)}
.pj-art .a-page2{fill:#faf9f5;stroke:var(--line)}.pj-art .a-page3{fill:#f0eee6;stroke:var(--line)}
.pj-art .a-bar{fill:#f0eee6}
.pj-art .a-dot{fill:#d2d0c6}.pj-art .a-dot1{fill:#d97757}
.pj-art .a-ink{fill:#141413}.pj-art .a-line{fill:#e1e0d9}.pj-art .a-hl{fill:#f3d6c9}
.pj-art .a-accent{fill:#b4532f}
.pj-art .a-spark{fill:none;stroke:#b4532f;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.4s var(--ease)}
.pj-mini li:hover .a-spark,.pj-mini.is-in .a-spark{stroke-dashoffset:0}
.pj-art .a-axis{stroke:#d2d0c6}
.pj-art .a-lock{fill:none;stroke:#4a6b2f;stroke-width:2}
.pj-art .a-edge{stroke:#d2d0c6;stroke-width:1.5;stroke-dasharray:4 4;animation:pj-dash 1.6s linear infinite}
.pj-art .a-flow{stroke:#b4532f;stroke-width:2;stroke-dasharray:4 4;animation:pj-dash 1.2s linear infinite}
@keyframes pj-dash{to{stroke-dashoffset:-16}}
.pj-art .a-hub{fill:#141413}
.pj-art .a-node rect{fill:#fff;stroke:var(--line)}
.pj-art .a-step rect{fill:#f6e5dc;stroke:#e3a68c}
.pj-art .a-t{font:600 10px var(--mono);fill:#3e3c38;text-anchor:middle}
.pj-art .a-tw{fill:#fff;font-size:12px}
.pj-art .a-tq{font-weight:400;font-size:8.5px;fill:#75736c}
.pj-art .a-wline{fill:#f0eee6}
@media (max-width:900px){
  .fit{grid-template-columns:1fr}
  .pj-feature{grid-template-columns:1fr}
}
@media (max-width:560px){
  .fit-col li a{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .fit-kw{grid-column:1}
  .fit-ev{grid-column:1/-1;grid-row:2}
  .fit-num{grid-column:2;grid-row:1;flex-direction:row;align-items:center}
  .pj-stage{height:320px;padding:28px 20px 0}
  .pj-chip{font-size:11px;padding:6px 10px}
  .pj-mini{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.pj-chip,.pj-art .a-edge,.pj-art .a-flow{animation:none}.pj,.pj-device{transition:none}}
@media print{.pj-stage,.pj-art{display:none!important}}

/* ---------- hero v3 ---------- */
.hero h1 .zh{white-space:nowrap}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:11.5px}
.hero-chips li{padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted)}
.hero-chips li:nth-child(-n+3){border-color:#e3a68c;background:var(--blue-soft);color:var(--blue)}
.scan-agent{position:absolute;left:16px;top:52px;width:min(330px,calc(100% - 32px));padding:12px 14px 10px;background:rgba(26,25,24,.78);border:1px solid rgba(217,119,87,.45);border-radius:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 30px -10px rgba(217,119,87,.5);font:11.5px/1.55 var(--mono);color:#d6d2c8;pointer-events:none;z-index:2}
.sa-q{color:#fff;font-family:var(--sans);font-size:13px;margin-bottom:6px}
.sa-q b{color:#d97757;margin-right:6px}
.sa-l{display:flex;gap:8px;opacity:0;animation:sa-in 9s infinite}
.sa-l b{color:#8fd18a}.sa-l i{font-style:normal;color:#8f8c84;margin-left:auto;white-space:nowrap}
.sa-2{animation-delay:.6s}.sa-3{animation-delay:1.2s}
.sa-1{animation-delay:0s}
@keyframes sa-in{0%,8%{opacity:0;transform:translateX(-6px)}14%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.hero-ticker dd{font-size:clamp(26px,2.8vw,38px)}
@media (max-width:560px){.scan-agent{top:48px;font-size:10.5px}.sa-q{font-size:12px}.hero h1 .zh{white-space:normal}}
@media (prefers-reduced-motion:reduce){.sa-l{animation:none;opacity:1}}
.hero h1{font-size:clamp(40px,4.6vw,68px)}
@media (max-width:560px){.hero h1{font-size:clamp(34px,9.4vw,44px)}}

.pj-mini li{display:flex;flex-direction:column;padding:0}
.pj-shot{margin:0;padding:18px 18px 0;background:linear-gradient(160deg,#f0eee6,#e8e6dc);border-bottom:1px solid var(--line);overflow:hidden;height:190px}
.pj-shot img{width:100%;height:auto;border-radius:8px 8px 0 0;box-shadow:0 14px 30px -18px rgba(20,20,19,.5);border:1px solid rgba(20,20,19,.08);transform:translateY(6px);transition:transform .45s var(--ease)}
.pj-mini li:hover .pj-shot img{transform:translateY(-4px) scale(1.02)}
.pj-mini-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pj-mini-body .card-meta{margin-top:0}
.pj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;font-size:10.5px}
.pj-tags span{padding:3px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
@media (max-width:980px){.pj-mini{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pj-mini{grid-template-columns:1fr}.pj-shot{height:auto}}

/* ---------- 05 verify: looked done / actually / rule ---------- */
.vf-legend{display:flex;gap:22px;font-size:11px;letter-spacing:.1em;margin-bottom:14px}
.vf-legend .l1{color:#8fd18a}.vf-legend .l2{color:#f0b35a}.vf-legend .l3{color:#e8a083}
.vfs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0}
.vf{display:flex;flex-direction:column;gap:12px;padding:20px 20px 22px;background:#24221f;border:1px solid #36332e;border-radius:8px}
.vf-k{font-size:11px;letter-spacing:.12em;color:#a8a59c}
.vf p:not(.vf-k){display:grid;grid-template-columns:20px 1fr;gap:6px;font-size:14px;line-height:1.65;margin:0}
.vf i{font-style:normal;font-weight:800;font-family:var(--mono)}
.vf-look{color:#8f8c84}.vf-look span{text-decoration:line-through;text-decoration-color:rgba(168,165,156,.5)}.vf-look i{color:#8fd18a}
.vf-real{color:#f4f1ea}.vf-real i{color:#f0b35a}
.vf-rule{margin-top:auto!important;padding-top:12px;border-top:1px solid #36332e;color:#ffd9c7;font-weight:600}.vf-rule i{color:#d97757}
.vf-rules{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0 0;padding:20px 0 0;border-top:1px solid #36332e}
.vf-rules li{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.7;color:#a8a59c}
.vf-rules strong{font-size:15px;color:#f0eee6}
@media (max-width:1000px){.vfs,.vf-rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vfs,.vf-rules{grid-template-columns:1fr}}
#method{background:#1a1918;color:#f0eee6}
#method>.wrap{border-bottom:0}
#method .section-label{color:#8f8c84}
#method .section-intro h2{color:#faf9f5}
#method .section-intro p{color:#bdbab1}
.vf-legend span{background:none!important;color:inherit}.vf-legend>span{display:inline-flex;gap:6px}.vf-legend .l1{color:#8fd18a!important}.vf-legend .l2{color:#f0b35a!important}.vf-legend .l3{color:#e8a083!important}