/* 共用组件样式（cssmerge，2026-11-07 起）
   来源：各画板 <style> 里多页逐字相同的规则，原样搬到这里（方案：求职\作品集网站\清点\_work\cssmerge\方案.md）。
   加载顺序：fonts.css → kit.css → 页内 <style> → adapt.css → m-d.css → m/<slug>.css。
     页内写法在 kit.css 之后，所以页面可以照旧覆盖这里的任何一条。
   套（data-kit）：同名不同义的组件按“套”分开。页面根节点 <div class="sp …" data-kit="flow-r ov-d …"> 写本页用哪些套；
     这里写成 .sp:where([data-kit~="套"]) …，:where() 不计权重，和原来页内的 .sp … 权重一样。没有冲突的规则不加限定。
   每一节开头的注释列出这一节的套 → 页。改这里会同时影响列出的所有页面：改完用 build_page.py 重建这些页，再把本文件复制到 W\site\assets。 */

/* ===== 批 T：模板块（导航、进度栏、舞台、字号等，15–17 页逐字相同）及站点蓝、作品色的几种写法（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   t-cnt4: about,archive,darwinism,economist,floundering,grading,home,iceland,photobook,retrieval,shuttle,soap,stylize
   t-home: about,home
   t-nxs: archive,economist,retrieval,stylize
   t-ph: about,archive,darwinism,economist,floundering,grading,home,huangquan,iceland,inverted,photobook,realtime,retrieval,revelation,soap,stylize
   t-site: archive,darwinism,economist,floundering,grading,iceland,photobook,retrieval,shuttle,soap,stylize
   t-siteb: huangquan,inverted,realtime,revelation
   t-w: archive,darwinism,economist,floundering,grading,huangquan,iceland,inverted,photobook,realtime,retrieval,revelation,shuttle,soap,stylize
   t-wa: about,archive,darwinism,economist,floundering,grading,huangquan,iceland,inverted,photobook,realtime,retrieval,revelation,shuttle,soap,stylize
   t-wk: darwinism,floundering,grading,iceland,photobook,shuttle,soap
   t-wl: archive,economist,huangquan,inverted,realtime,retrieval,revelation,stylize */
body{margin:0;background:#040507}
a{color:#e7ebf1;text-decoration:none}
:where(body:has(.sp[data-kit~="t-home"])) a:hover{color:#7cc4ff}
:where(body:has(.sp[data-kit~="t-site"])) a:hover{color:var(--site)}
:where(body:has(.sp[data-kit~="t-siteb"])) a:hover{color:var(--site-blue)}
.sp{font-family:"Noto Sans SC","PingFang SC",sans-serif}
.sp .serif{font-family:"Noto Serif SC","Songti SC",serif;font-weight:700}
.sp .num{font-variant-numeric:tabular-nums}
.sp .dnum{font-family:"Noto Serif SC","Songti SC",serif;font-weight:600}
.sp .stage{position:sticky;top:0;height:900px;overflow:hidden;background:#000}
.sp .layer{position:absolute;inset:0}
.sp .layer img,.sp .layer video{display:block;width:100%;height:100%;object-fit:cover}
.sp .shade{position:absolute;left:0;right:0;bottom:0;height:520px;background:linear-gradient(to top,rgba(4,5,7,0.9),rgba(4,5,7,0.55) 45%,rgba(4,5,7,0))}
.sp .topshade{position:absolute;left:0;right:0;top:0;height:220px;background:linear-gradient(to bottom,rgba(4,5,7,0.65),rgba(4,5,7,0))}
.sp .chap{position:absolute;top:92px;left:72px;font-size:12px;letter-spacing:0.18em;color:#a3acba}
.sp:where([data-kit~="t-home"]) .chap b{color:#7cc4ff;font-weight:500}
.sp:where([data-kit~="t-w"]) .chap b{color:var(--work);font-weight:500}
.sp .kw{position:absolute;left:72px;bottom:72px;width:660px}
.sp:where([data-kit~="t-home"]) .kicker{font-size:13px;letter-spacing:0.14em;color:#7cc4ff}
.sp:where([data-kit~="t-w"]) .kicker{font-size:13px;letter-spacing:0.14em;color:var(--work)}
.sp .kword{font-size:60px;line-height:1.12;margin-top:10px}
.sp .kline{font-size:18px;line-height:1.65;color:#d2d8e0;margin-top:14px}
.sp .dock{position:absolute;right:232px;bottom:72px;width:420px;display:flex;flex-direction:column;gap:14px}
.sp .fact{border-top:1px solid rgba(231,235,241,0.18);padding-top:10px;font-size:15px;line-height:1.6;color:#d2d8e0}
.sp .fact small{display:block;font-size:12px;letter-spacing:0.12em;color:#8d96a5;margin-bottom:2px}
.sp .chips{display:flex;flex-wrap:wrap;gap:8px}
.sp .chip{font-size:13px;padding:4px 12px;border-radius:999px;border:1px solid rgba(231,235,241,0.22);color:#d2d8e0}
.sp:where([data-kit~="t-home"]) .chip.on{border-color:#7cc4ff;color:#7cc4ff}
.sp:where([data-kit~="t-w"]) .chip.on{border-color:var(--work);color:var(--work)}
.sp .glass{isolation:isolate;-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);box-shadow:0 6px 20px rgba(0,0,0,0.28)}
.sp[data-lg="on"] .rail{-webkit-backdrop-filter:url(#lg-rail);backdrop-filter:url(#lg-rail)}
.sp .g-tint{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:rgba(14,18,26,0.36)}
.sp .rail .g-body{text-shadow:0 1px 2px rgba(0,0,0,0.45)}
.sp .g-spec{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background-repeat:no-repeat;background-position:left top,center top,right top,left center,right center,left bottom,center bottom,right bottom}
.sp .g-body{position:relative;z-index:1}
.sp .topnav{position:fixed;top:0;left:0;right:0;z-index:40;height:56px;box-sizing:border-box;padding:0 72px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid transparent;transition:background-color 250ms,border-color 250ms}
.sp .topnav[data-solid="true"],.sp .topnav:hover,.sp .topnav:focus-within{background:rgba(4,5,7,0.94);border-bottom-color:rgba(231,235,241,0.08)}
.sp .dnav{display:flex;align-items:center;gap:28px;height:56px}
.sp .nv-a,.sp .nv-t{display:flex;align-items:center;height:56px;box-sizing:border-box;padding:0;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:14px;color:#d2d8e0;cursor:pointer}
.sp .nv-a:hover,.sp .nv:hover .nv-t,.sp .nv:focus-within .nv-t{color:#ffffff}
.sp .nv:hover .nv-t,.sp .nv:focus-within .nv-t{border-bottom-color:rgba(255,255,255,0.85)}
.sp:where([data-kit~="t-home"]) .nv[data-on="true"] .nv-t,.sp:where([data-kit~="t-home"]) .nv-a[data-on="true"]{color:#7cc4ff;border-bottom-color:#7cc4ff}
.sp:where([data-kit~="t-home"]) .nv-t:focus-visible,.sp:where([data-kit~="t-home"]) .nv-a:focus-visible,.sp:where([data-kit~="t-home"]) .nv-i:focus-visible{outline:2px solid #7cc4ff;outline-offset:3px}
.sp:where([data-kit~="t-site"]) .nv[data-on="true"] .nv-t,.sp:where([data-kit~="t-site"]) .nv-a[data-on="true"]{color:var(--site);border-bottom-color:var(--site)}
.sp:where([data-kit~="t-site"]) .nv-t:focus-visible,.sp:where([data-kit~="t-site"]) .nv-a:focus-visible,.sp:where([data-kit~="t-site"]) .nv-i:focus-visible{outline:2px solid var(--site);outline-offset:3px}
.sp:where([data-kit~="t-siteb"]) .nv[data-on="true"] .nv-t,.sp:where([data-kit~="t-siteb"]) .nv-a[data-on="true"]{color:var(--site-blue);border-bottom-color:var(--site-blue)}
.sp:where([data-kit~="t-siteb"]) .nv-t:focus-visible,.sp:where([data-kit~="t-siteb"]) .nv-a:focus-visible,.sp:where([data-kit~="t-siteb"]) .nv-i:focus-visible{outline:2px solid var(--site-blue);outline-offset:3px}
.sp .nv{position:relative}
.sp .nv-panel{position:absolute;top:56px;left:-20px;width:360px;box-sizing:border-box;padding:8px 0 10px;background:#06080b;border:1px solid rgba(231,235,241,0.1);border-top:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 150ms,transform 150ms,visibility 0s linear 150ms}
.sp .nv[data-align="end"] .nv-panel{left:auto;right:-20px}
.sp .nv:hover .nv-panel,.sp .nv:focus-within .nv-panel{opacity:1;visibility:visible;transform:none;transition:opacity 150ms,transform 150ms}
.sp .nv-i{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:2px;padding:10px 20px;color:#e7ebf1}
.sp .nv-i b{font-weight:500;font-size:15px}
.sp .nv-i small{grid-column:1;font-size:12px;line-height:1.5;color:#8d96a5}
.sp .nv-i .yr{grid-column:2;grid-row:1;justify-self:end;font-size:12px;color:#8d96a5;white-space:nowrap}
.sp .nv-i .tag{grid-column:2;grid-row:2;justify-self:end;align-self:start;font-size:12px;line-height:18px;letter-spacing:0.08em;color:#8d96a5;white-space:nowrap}
.sp a.nv-i:hover{background:rgba(231,235,241,0.06)}
.sp:where([data-kit~="t-home"]) .nv-i[data-cur="true"] b,.sp:where([data-kit~="t-home"]) .nv-i[data-cur="true"] .tag{color:#7cc4ff}
.sp:where([data-kit~="t-site"]) .nv-i[data-cur="true"] b,.sp:where([data-kit~="t-site"]) .nv-i[data-cur="true"] .tag{color:var(--site)}
.sp:where([data-kit~="t-siteb"]) .nv-i[data-cur="true"] b,.sp:where([data-kit~="t-siteb"]) .nv-i[data-cur="true"] .tag{color:var(--site-blue)}
.sp .nv-i[data-todo="true"] b{color:#a3acba}
.sp .mnav{display:none}
.sp .mnav summary{list-style:none;display:flex;align-items:center;height:44px;padding:0 4px;font-size:14px;color:#d2d8e0;cursor:pointer}
.sp .mnav summary::-webkit-details-marker{display:none}
.sp .mpanel{position:fixed;top:56px;left:0;right:0;bottom:0;overflow:auto;padding:12px 20px 40px;background:#040507}
.sp .mcat{padding:16px 0 8px;border-bottom:1px solid rgba(231,235,241,0.1)}
.sp .mcat .nv-i{padding:10px 0}
.sp .rail{position:fixed;right:24px;bottom:calc(50% - var(--rail-hc, 226px) / 2);z-index:30;box-sizing:border-box;width:44px;padding:16px 0;border-radius:22px;overflow:hidden;transition:width 360ms cubic-bezier(0.2,0,0,1)}
.sp .rail[data-open="true"],.sp .rail:hover,.sp .rail:focus-within{width:var(--rail-w, 248px)}
.sp .rail-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:20px;align-items:baseline;height:0;overflow:hidden;font-size:12px;line-height:20px;letter-spacing:0.12em;color:#a3acba;white-space:nowrap;opacity:0;transition:opacity 200ms,height 360ms cubic-bezier(0.2,0,0,1)}
.sp .rail-head::after{content:"";position:absolute;left:0;right:0;top:31px;height:1px;background:rgba(255,255,255,0.12)}
.sp .rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sp .rail-head .t,.sp .lab{display:flex;justify-content:flex-end;overflow:hidden}
.sp .rail-head .t{margin-right:-0.12em}
.sp .rail-head .num{text-align:center;letter-spacing:0}
.sp .ri{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;min-height:24px;color:#a3acba;font-size:13px;white-space:nowrap}
.sp .ri[data-on="true"]{color:#ffffff}
.sp .dot{grid-column:2;grid-row:1;justify-self:center;width:6px;height:6px;border-radius:3px;background:rgba(231,235,241,0.5);transition:height 300ms cubic-bezier(0.2,0,0,1),background 300ms}
.sp:where([data-kit~="t-home"]) .ri[data-on="true"] .dot{height:24px;background:#7cc4ff}
.sp:where([data-kit~="t-wl"]) .ri[data-on="true"] .dot{height:24px;background:var(--work-line)}
.sp:where([data-kit~="t-wk"]) .ri[data-on="true"] .dot{height:24px;background:var(--work)}
.sp .lab{grid-column:1;grid-row:1;opacity:0;transition:opacity 200ms}
.sp:where([data-kit~="t-home"]) .lab .num{color:#7cc4ff;margin-left:8px}
.sp:where([data-kit~="t-w"]) .lab .num{color:var(--work);margin-left:8px}
.sp .bar{position:absolute;left:18px;right:44px;bottom:-6px;display:flex;justify-content:flex-end;height:2px;background:rgba(255,255,255,0.14)}
.sp:where([data-kit~="t-home"]) .bar i{display:block;height:100%;background:#7cc4ff}
.sp:where([data-kit~="t-wl"]) .bar i{display:block;height:100%;background:var(--work-line)}
.sp:where([data-kit~="t-wk"]) .bar i{display:block;height:100%;background:var(--work)}
.sp .rail[data-open="true"] .lab,.sp .rail:hover .lab,.sp .rail:focus-within .lab,.sp .rail[data-open="true"] .rail-head,.sp .rail:hover .rail-head,.sp .rail:focus-within .rail-head{opacity:1}
.sp .rail[data-open="true"] .rail-head,.sp .rail:hover .rail-head,.sp .rail:focus-within .rail-head{height:42px}
.sp .mix{position:absolute;inset:0;isolation:isolate}
.sp .mix .layer{mix-blend-mode:plus-lighter}
.sp .fwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}
.sp .fwrap::before,.sp .fwrap::after{content:"";flex:1}
.sp .fwrap.hi::before{flex:28}
.sp .fwrap.hi::after{flex:72}
.sp .fbox{position:relative;flex:none;width:min(100%,2151px);aspect-ratio:4096/1714}
.sp .fbox img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sp .fbox .stars{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}
.sp .pair img{position:absolute;inset:0}
.sp .rw .topshade,.sp .rw .shade{z-index:4}
.sp .rw .kw,.sp .rw .dock,.sp .rw .chap,.sp .ov,.sp .ctag{z-index:6}
.sp .ov{position:absolute}
.sp .rw .kw{bottom:96px;width:auto;right:calc(232px + min(340px,23.6vw) + min(160px,11vw) + 56px)}
.sp .rw .kword{font-size:44px}
.sp .rw .kline{font-size:16px;line-height:1.7;margin-top:12px}
.sp .rw .ndock{bottom:96px}
.sp .ctag{position:absolute;top:128px;right:148px;font-size:12px;letter-spacing:0.12em;color:#a3acba}
.sp .vcount{top:120px;left:72px;max-width:460px}
.sp:where([data-kit~="t-home"]) .vcount .big{font-size:120px;line-height:1;margin-top:6px;color:#7cc4ff}
.sp:where([data-kit~="t-w"]) .vcount .big{font-size:120px;line-height:1;margin-top:6px;color:var(--work)}
.sp .vcount .vnote{font-size:17px;line-height:1.6;color:#d2d8e0;margin-top:14px}
.sp .method{bottom:120px;right:232px;width:340px}
.sp .method p{margin:10px 0 0;font-size:15px;line-height:1.8;color:#c3cad4}
.sp .ncard{bottom:96px;right:232px;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:16px}
.sp .ncard figure{margin:0;width:min(340px,23.6vw)}
.sp .ncard figure.sub{width:min(160px,11vw)}
.sp .ncard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0e14}
.sp .ncard figcaption{font-size:13px;line-height:1.6;color:#c3cad4;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,0.85)}
.sp:where([data-kit~="t-home"]) .ncard .tag{color:#7cc4ff;margin-right:8px}
.sp:where([data-kit~="t-w"]) .ncard .tag{color:var(--work);margin-right:8px}
.sp .ncard .sub figcaption{font-size:12px}
.sp .ruler{left:72px;right:148px;bottom:36px;display:grid;grid-template-columns:16fr 4fr 10fr 4fr minmax(64px,1fr);column-gap:12px}
.sp .ruler .ticks{display:flex;justify-content:space-between;align-items:flex-end;height:16px}
.sp .ruler .tk{display:block;width:2px;height:6px;background:rgba(231,235,241,0.32)}
.sp:where([data-kit~="t-home"]) .ruler .tk[data-node="true"]{height:10px;background:#7cc4ff}
.sp:where([data-kit~="t-wl"]) .ruler .tk[data-node="true"]{height:10px;background:var(--work-line)}
.sp:where([data-kit~="t-wk"]) .ruler .tk[data-node="true"]{height:10px;background:var(--work)}
.sp .ruler .tk[data-cur="true"]{width:3px;height:16px;background:#ffffff}
.sp .ruler .ph{margin-top:8px;font-size:13px;white-space:nowrap}
.sp .ruler .ph .num{font-size:12px;margin-left:6px;opacity:0.8}
.sp .fbox video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sp .film{display:block;margin-top:24px}
.sp .film img{display:block;width:100%;aspect-ratio:4096/1716;object-fit:cover}
.sp:where([data-kit~="t-w"]) .film > span{display:block;margin-top:12px;font-size:14px;color:var(--work)}
.sp .film:hover img{opacity:0.85}
.sp .after{transition:opacity 900ms cubic-bezier(0.2,0,0,1)}
.sp .lbox{position:absolute;left:calc(50% - 80px);top:104px;transform:translateX(-50%)}
.sp:where([data-kit~="t-ph"]) .ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;background:#0b0e14;border:1px dashed rgba(231,235,241,0.2);color:#8d96a5;font-size:14px;letter-spacing:0.08em;text-align:center;padding:0 24px}
.sp:where([data-kit~="t-wa"]) .layer .hv{position:absolute;left:50%;top:40px;width:min(78%,1123px);height:auto;aspect-ratio:16/9;transform:translateX(-50%);object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.sp:where([data-kit~="t-wa"]) .nxbar{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;letter-spacing:0.12em;color:#a3acba}
.sp:where([data-kit~="t-wa"]) .nxbar i{display:block;width:160px;height:2px;background:rgba(231,235,241,0.16)}
.sp:where([data-kit~="t-nxs"]) .nxbar b{display:block;height:100%;background:var(--site)}
.sp:where([data-kit~="t-wk"]) .nxbar b{display:block;height:100%;background:var(--work)}
.sp:where([data-kit~="t-siteb"]) .nxbar b{display:block;height:100%;background:var(--work-line)}
.sp:where([data-kit~="t-wa"]) .hero-t,.sp:where([data-kit~="t-wa"]) .next-t{font-size:64px;line-height:1.1;letter-spacing:0.04em}
.sp:where([data-kit~="t-wa"]) .next-t{display:block;margin-top:8px}
.sp:where([data-kit~="t-wa"]) .kword,.sp:where([data-kit~="t-wa"]) .rw .kword,.sp:where([data-kit~="t-wa"]) .cap .kword{font-size:40px;line-height:1.2}
.sp:where([data-kit~="t-wa"]) .kline,.sp:where([data-kit~="t-wa"]) .rw .kline,.sp:where([data-kit~="t-wa"]) .cap .kline{font-size:16px;line-height:1.75}
.sp:where([data-kit~="t-wa"]) .cover .kline{font-size:18px;line-height:1.7}
.sp:where([data-kit~="t-wa"]) .fact,.sp:where([data-kit~="t-wa"]) .cap .fact{font-size:14px;line-height:1.6}
.sp:where([data-kit~="t-wa"]) .rnum{font-size:72px;line-height:1}
.sp:where([data-kit~="t-w"]) .lst-n{font-size:20px;color:var(--work)}
.sp:where([data-kit~="t-wa"]) .lst-t{font-size:20px}
@media (max-width:760px){
  .sp:where([data-kit~="t-wa"]) .hero-t,.sp:where([data-kit~="t-wa"]) .next-t{font-size:40px}
  .sp:where([data-kit~="t-wa"]) .kword,.sp:where([data-kit~="t-wa"]) .rw .kword,.sp:where([data-kit~="t-wa"]) .cap .kword{font-size:28px}
  .sp:where([data-kit~="t-wa"]) .rnum{font-size:48px}
}
.sp:where([data-kit~="t-home"]) a:focus-visible{outline:2px solid #7cc4ff;outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .sp .nv-panel,.sp .rail,.sp .rail-head,.sp .dot,.sp .lab,.sp .topnav{transition:none}
}
@media (max-width:1100px){
  .sp .topnav{padding:0 32px}
  .sp .dnav{gap:18px}
  .sp .nv-a,.sp .nv-t{font-size:13px}
}
@media (max-width:900px){
  .sp .dock,.sp .ncard,.sp .method{display:none}
  .sp .rw .kw{right:80px}
  .sp .kw{width:auto;right:80px}
}
@media (max-width:760px){
  .sp .kw{left:20px;right:20px;bottom:40px}
  .sp .chap{left:20px}
  .sp .topnav{padding:0 20px}
  .sp .rail[data-open="true"]{width:44px}
  .sp .rail[data-open="true"] .rail-head{height:0;opacity:0}
}
@media (max-width:640px){
  .sp .dnav{display:none}
  .sp .mnav{display:block}
}
.sp .chap,.sp .chap-s{font-size:20px;line-height:1.3;letter-spacing:0.04em;color:#e7ebf1;font-weight:500}
.sp:where([data-kit~="t-home"]) .chap b,.sp:where([data-kit~="t-home"]) .chap-s b{color:#7cc4ff;font-weight:500}
.sp:where([data-kit~="t-cnt4"]) .chap .cnt{margin-left:4px;font-size:14px;letter-spacing:0.08em;color:#8d96a5;font-weight:400}
.sp .kicker{font-size:14px}
.sp .fact small{font-size:13px;color:#a3acba}
.sp .ch-t{font-size:14px}
.sp .ch-l small,.sp .ch-x span,.sp .tl-bands small,.sp .ruler .ph .num{font-size:13px}
.sp .nxbar,.sp .ctag,.sp .ttag{font-size:13px}
.sp .ncard figcaption,.sp .ncard .sub figcaption{font-size:14px}
.sp .nv-i small,.sp .nv-i .yr,.sp .nv-i .tag,.sp .rail-head{font-size:13px}
.sp .meta .yr,.sp .meta small{font-size:14px}
.sp .meta .tag,.sp .nums small{font-size:13px}
.sp .fwrap.hi::before,.sp .fwrap.hi::after{flex:1}
.sp .stage.wide{container-type:size;--inset:max(0px,calc((100cqh - min(100cqw, 2151px) / 2.3897) / 2))}
.sp .stage.wide .kw,.sp .stage.wide .dock,.sp .stage.wide .shade,.sp .stage.wide .ncard,.sp .stage.wide .ruler{translate:0 calc(-1 * var(--inset))}
.sp .stage.wide .topshade{translate:0 var(--inset)}
.sp .stage.wide .chap,.sp .stage.wide .vcount,.sp .stage.wide .method,.sp .stage.wide .ctag{translate:0 max(0px, calc(var(--inset) + 16px - 92px))}
.sp[data-lg="on"][data-sc="true"] .rail{-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%)}
.sp:where([data-kit~="t-w"]) .figwrap{position:absolute;left:72px;right:232px;top:128px;height:540px}
.sp:where([data-kit~="t-site"]) a:focus-visible{outline:2px solid var(--site);outline-offset:3px}
.sp:where([data-kit~="t-siteb"]) a:focus-visible{outline:2px solid var(--site-blue);outline-offset:3px}
.sp:where([data-kit~="t-w"]) .chap b,.sp:where([data-kit~="t-w"]) .chap-s b{color:var(--work);font-weight:500}
.sp:where([data-kit~="t-wk"]) .chap .cn,.sp:where([data-kit~="t-wk"]) .chap-s .cn{margin-left:1em}
.sp:where([data-kit~="t-wk"]) .chap .cn + .cnt{margin-left:calc(20px + 4px)}
.sp:where([data-kit~="t-site"]) .mcat .kicker{color:var(--site)}
.sp:where([data-kit~="t-siteb"]) .chap .cnt{margin-left:24px;font-size:14px;letter-spacing:0.08em;color:#8d96a5;font-weight:400}

/* ===== 批 1：画框、对照角标、代码框（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   cmp-r: archive,economist,retrieval,shuttle,stylize
   code-b: realtime,retrieval
   contain: archive,economist,huangquan,inverted,realtime,retrieval,revelation,stylize
   fb-c: archive,economist,retrieval,stylize
   fbox-w: darwinism,floundering,grading,iceland,photobook,shuttle,soap
   fig-c: huangquan,inverted,realtime,revelation,soap
   ship: darwinism,floundering,grading,home,huangquan,iceland,inverted,photobook,realtime,revelation,shuttle,soap
   stage-c: huangquan,inverted,realtime,revelation
   vtag-r: inverted,realtime */
.sp:where([data-kit~="ship"]) .fbox img.ship{left:50%;width:min(100%,1728px);transform:translateX(-50%);object-fit:contain}
.sp:where([data-kit~="contain"]) .figwrap .layer img,.sp:where([data-kit~="contain"]) .figwrap .layer video{object-fit:contain}
.sp:where([data-kit~="fb-c"]) .stage.fb .mix{container-type:size}
@media (min-width:768px){
  .sp.sk:where([data-kit~="fbox-w"]) .figwrap .fbox{width:min(100cqw, calc(100cqh * 4096 / 1714))}
}
.sp:where([data-kit~="fig-c"]) .figwrap{container-type:size}
@media (min-width:768px){
  .sp.sk:where([data-kit~="stage-c"]) .stage{container-type:size}
}
.sp:where([data-kit~="vtag-r"]) .vtag{position:absolute;top:12px;left:14px;font-size:13px;letter-spacing:0.1em;color:#e7ebf1;padding:2px 8px;background:rgba(4,5,7,0.6);border:1px solid rgba(231,235,241,0.22)}
.sp .fbx{position:absolute;left:50%;top:0;translate:-50% 0;width:min(100cqw, calc(100cqh * var(--ar)));aspect-ratio:var(--ar)}
.sp .figwrap .layer .fbx > img,.sp .figwrap .layer .fbx > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp .cmp-tag{position:absolute;left:12px;top:12px;z-index:2;padding:2px 8px;font-size:13px;line-height:1.6;letter-spacing:0.04em;color:#e7ebf1;background:rgba(4,5,7,0.62)}
.sp:where([data-kit~="cmp-r"]) .cmp-tag.r{left:auto;right:12px}
.sp:where([data-kit~="fb-c"]) .wipe-l{position:absolute;top:0;bottom:0;left:50%;z-index:2;width:1px;margin-left:-0.5px;background:rgba(231,235,241,0.7)}
.sp .code{position:absolute;inset:0;display:flex;align-items:center}
.sp .code figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;min-width:0}
.sp:where([data-kit~="code-b"]) .code figcaption{font-size:13px;letter-spacing:0.04em;color:#8d96a5;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp:where([data-kit~="code-b"]) .code pre{margin:0;overflow:hidden;padding:clamp(12px, 2.4cqh, 24px) clamp(14px, 2cqw, 28px);background:#0b0e14;border:1px solid rgba(231,235,241,0.14);border-radius:2px;font-family:Consolas,"SF Mono",Menlo,"Noto Sans SC",monospace;font-size:clamp(11px, min(2.6cqh, 1.55cqw), 16px);line-height:1.5;color:#c3cad4;white-space:pre;tab-size:4}
.sp .code .k{color:#7cc4ff}
.sp .code .f{color:#e7ebf1}
.sp .code .s{color:#d8c496}
.sp .code .c{color:#8d96a5;font-style:italic}

/* ===== 批 2：说明、首屏、信息栏（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   anno-d: darwinism,floundering,grading,iceland,photobook,shuttle,soap
   cap-g: archive,economist,huangquan,inverted,realtime,retrieval,revelation,stylize
   hdock-3: darwinism,floundering,grading,huangquan,iceland,photobook,shuttle,soap
   hdock-f: archive,darwinism,economist,floundering,grading,huangquan,iceland,inverted,photobook,realtime,retrieval,shuttle,soap,stylize
   hdock-fg: floundering,grading
   hdock-s: archive,economist,retrieval,stylize
   hero-d: darwinism,floundering,grading,huangquan,iceland,inverted,photobook,shuttle
   hero-d7: darwinism,floundering,grading,huangquan,iceland,photobook,shuttle
   hero-fr: floundering,realtime
   hero-gi: grading,iceland
   hero-ir: inverted,realtime
   hero-r: huangquan,inverted,realtime,revelation
   hero-v: darwinism,floundering,grading,iceland,photobook,shuttle
   hero-v5: iceland,inverted,realtime */
.sp:where([data-kit~="cap-g"]) .cap{position:absolute;left:72px;right:232px;top:700px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
.sp:where([data-kit~="cap-g"]) .cap .kword{font-size:40px;margin-top:6px}
.sp:where([data-kit~="cap-g"]) .cap .kline{font-size:16px;line-height:1.7;margin-top:10px}
.sp:where([data-kit~="cap-g"]) .cap .fact{font-size:14px;line-height:1.55;padding-top:8px;margin-top:10px}
.sp:where([data-kit~="cap-g"]) .cap .fact:first-child{margin-top:0}
.sp:where([data-kit~="hdock-s"]) .hdock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;width:min(960px, calc(100vw - 304px));margin-top:28px}
@media (min-width:768px){
  .sp:where([data-kit~="hero-v"]) .stage.hero > .layer video{object-position:50% 100%}
  .sp.sk:where([data-kit~="hero-r"]) .cap.cover{container:herocap / inline-size}
  @container herocap (max-width: 760px){
    .sp:where([data-kit~="hero-r"]) .cap.cover > div{grid-column:1 / -1}
    .sp:where([data-kit~="hero-r"]) .cap.cover > div + div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin-top:16px}
    .sp:where([data-kit~="hero-r"]) .cap.cover > div + div .fact{margin-top:0}
  }
  .sp.sk:where([data-kit~="hero-d7"]) .stage.hero > .shade{height:52%;background:linear-gradient(to top,rgba(4,5,7,0.9),rgba(4,5,7,0.62) 50%,rgba(4,5,7,0))}
}
.sp:where([data-kit~="hdock-f"]) .hdock .fact{border-top-color:rgba(231,235,241,0.24)}
.sp .hero-ui{position:absolute;left:0;right:0;top:72px;aspect-ratio:16 / 9}
.sp .hero-ui img{display:block;width:100%;height:100%;object-fit:cover}
.sp .hero-ui::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(231,235,241,0.18);pointer-events:none}
@media (min-width:768px){
  .sp .hero-ui{--hw:min(56vw, calc((100vh - 150px) * 16 / 9));left:auto;right:92px;top:50%;width:var(--hw);translate:0 -50%; -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
  .sp.sk:where([data-kit~="hero-d"]) .stage.hero > .kw.cover{right:var(--sk-gr,232px);width:auto;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:48px;align-items:end}
  .sp.sk:where([data-kit~="hero-d"]) .stage.hero > .kw.cover > *{grid-column:1}
  .sp.sk:where([data-kit~="hero-d7"]) .stage.hero > .kw.cover > .hdock{grid-column:2;grid-row:1 / span 3;align-self:end;justify-self:end;width:min(100%, 640px);margin-top:0}
}
.sp:where([data-kit~="hdock-3"]) .cap{position:absolute;left:72px;right:232px;top:700px}
.sp:where([data-kit~="hdock-3"]) .hdock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;margin-top:24px}
html[lang="en"] .sp:where([data-kit~="anno-d"]) .cap.ax-anno{--ax:256 !important}
@media (min-width:768px){
  .sp.sk:where([data-kit~="hdock-fg"]) .stage.hero > .kw.cover > .hdock{width:min(100%, 780px);grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,0.9fr)}
  .sp:where([data-kit~="hero-v5"]) .stage.hero > .layer video{object-position:50% 50%}
  .sp:where([data-kit~="hero-gi"]) #ch-8 .kw.cover{width:auto;right:var(--sk-gr, 232px)}
  .sp.sk:where([data-kit~="hero-ir"]) .stage.hero > .shade{height:46%;background:linear-gradient(to top,rgba(4,5,7,0.88),rgba(4,5,7,0.5) 50%,rgba(4,5,7,0))}
}
.sp:where([data-kit~="hero-ir"]) .hdock{display:flex;flex-direction:column;gap:12px;margin-top:24px}
@media (min-width:768px){
  .sp .stage.hero > .figwrap.hero-fig{left:24%;right:0;top:0;bottom:auto;width:auto;height:100%}
  .sp.sk:where([data-kit~="hero-fr"]) #ch-7 .stage.hero > .cover{bottom:clamp(72px, 12vh, 112px)}
}

/* ===== 批 3：全貌格（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   ov-c: archive,darwinism,economist,floundering,grading,huangquan,iceland,inverted,photobook,realtime,retrieval,shuttle,soap,stylize
   ov-d: darwinism,floundering,grading,iceland,photobook,shuttle,soap
   ov-fg: floundering,grading
   ov-g: darwinism,floundering,grading,huangquan,iceland,inverted,photobook,realtime,shuttle,soap
   ov-g8: darwinism,floundering,grading,huangquan,iceland,photobook,shuttle,soap
   ov-ir: inverted,realtime
   ov-r2: floundering,grading,iceland
   ov-s: archive,economist,retrieval,stylize */
.sp:where([data-kit~="ov-s"]) .figwrap .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sp:where([data-kit~="ov-s"]) .ov-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:24px;width:min(100%, calc((100cqh - 40px) * 16 / 9 * var(--n) + 24px * (var(--n) - 1)))}
@media (min-width:768px){
  .sp:where([data-kit~="ov-g"]) .figwrap .ov.grid{position:absolute;inset:0}
}
.sp:where([data-kit~="ov-g8"]) .ov.grid{display:grid;grid-template-columns:repeat(var(--ov-n,6),minmax(0,1fr));gap:24px;align-content:center}
.sp:where([data-kit~="ov-ir"]) .ov.grid{display:grid;grid-template-columns:repeat(var(--ov-n,3),minmax(0,1fr));gap:24px;align-content:center}
.sp:where([data-kit~="ov-c"]) .ov-c{margin:0;min-width:0}
.sp:where([data-kit~="ov-s"]) .figwrap .layer .ov-c img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;box-sizing:border-box;border:1px solid transparent}
.sp:where([data-kit~="ov-s"]) .ov-c[data-on="true"] img{border-color:var(--work-line)}
.sp:where([data-kit~="ov-s"]) .ov-n{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:#a3acba;white-space:nowrap}
.sp:where([data-kit~="ov-s"]) .ov-c[data-on="true"] .ov-n{color:var(--work)}
.sp:where([data-kit~="ov-d"]) .ov-i{display:block;width:100%;aspect-ratio:2.3897;object-fit:cover;box-sizing:border-box;border:1px solid rgba(231,235,241,0.16);background:#06080c}
.sp:where([data-kit~="ov-d"]) .ov-n{margin-top:6px;font-size:13px;line-height:1.5;color:#a3acba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp:where([data-kit~="ov-g8"]) .ov-c.on .ov-i{border-color:var(--work-line)}
.sp:where([data-kit~="ov-g8"]) .ov-c.on .ov-n{color:var(--work)}
.sp:where([data-kit~="ov-d"]) .ov.grid.sb{grid-template-columns:112px repeat(6,minmax(0,1fr));align-items:center}
.sp:where([data-kit~="ov-d"]) .ov-r{font-size:13px;line-height:1.5;color:#a3acba;white-space:nowrap}
.sp:where([data-kit~="ov-d"]) .ov.sb .ov-c{position:relative}
.sp:where([data-kit~="ov-d"]) .ov.sb .ov-n{position:absolute;left:0;right:0;top:100%}
@media (min-width:768px){
  .sp:where([data-kit~="ov-fg"]) .figwrap .ov.grid.r2{left:50%;right:auto;width:min(100cqw, calc((100cqh - 24px - 2 * 52px) / 2 * 2.3897 * 3 + 48px));translate:-50% 0}
}
.sp:where([data-kit~="ov-ir"]) .ov-i{display:block;width:100%;aspect-ratio:var(--ov-ar,16 / 9);object-fit:cover;box-sizing:border-box;border:1px solid rgba(231,235,241,0.16);background:#06080c}
.sp:where([data-kit~="ov-ir"]) .figwrap .layer .ov-i{object-fit:cover;height:auto}
.sp:where([data-kit~="ov-ir"]) .ov-n{margin-top:8px;font-size:14px;line-height:1.5;color:#a3acba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp:where([data-kit~="ov-r2"]) .layer .ov-i{height:auto}
@media (min-width:768px){
  .sp:where([data-kit~="ov-fg"]) .figwrap .ov.grid.r2{grid-template-columns:repeat(6, minmax(0, 1fr))}
  .sp:where([data-kit~="ov-r2"]) .figwrap .ov.grid.r2 > .ov-c{grid-column:span 2}
  .sp:where([data-kit~="ov-r2"]) .figwrap .ov.grid.r2 > .ov-c:nth-child(4){grid-column:2 / span 2}
}
.sp:where([data-kit~="ov-r2"]) .ov-n small{display:block;font-size:13px;line-height:1.5;color:#8d96a5;white-space:normal}
.sp:where([data-kit~="ov-r2"]) .ov-c.on .ov-n small{color:#a3acba}

/* ===== 批 4：流程线（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   flow-d: darwinism,floundering,grading,iceland,photobook,shuttle
   flow-r: huangquan,inverted,realtime,revelation,soap
   flow-s: archive,economist,retrieval,stylize */
.sp:where([data-kit~="flow-s"]) .flow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.sp:where([data-kit~="flow-s"]) .flow-s{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.sp:where([data-kit~="flow-s"]) .figwrap .layer .flow-i{display:block;width:calc(100% - 24px);height:auto;aspect-ratio:var(--ar, 16 / 9);object-fit:cover;margin-bottom:20px}
.sp:where([data-kit~="flow-s"]) .flow-r{position:relative;align-self:stretch;display:flex;justify-content:center;height:10px}
.sp:where([data-kit~="flow-s"]) .flow-r::before,.sp:where([data-kit~="flow-s"]) .flow-r::after{content:"";position:absolute;top:5px;height:1px;background:rgba(231,235,241,0.4)}
.sp:where([data-kit~="flow-s"]) .flow-r::before{left:0;right:50%}
.sp:where([data-kit~="flow-s"]) .flow-r::after{left:50%;right:0}
.sp:where([data-kit~="flow-s"]) .flow-s:first-child .flow-r::before,.sp:where([data-kit~="flow-s"]) .flow-s:last-child .flow-r::after{display:none}
.sp:where([data-kit~="flow-s"]) .flow-d{position:relative;z-index:1;width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(231,235,241,0.6);background:#040507}
.sp:where([data-kit~="flow-s"]) .flow-s[data-on="true"] .flow-d{background:var(--work-line);border-color:var(--work-line)}
.sp:where([data-kit~="flow-s"]) .flow-no{margin-top:14px;padding:0 8px;font-size:13px;line-height:1.6;color:var(--work)}
.sp:where([data-kit~="flow-s"]) .flow-t{margin-top:2px;padding:0 8px;font-size:16px;line-height:1.5;color:#e7ebf1}
.sp:where([data-kit~="flow-s"]) .flow-k{margin-top:2px;padding:0 8px;font-size:13px;line-height:1.6;color:#8d96a5}
.sp:where([data-kit~="flow-s"]) .flow-s[data-on="true"] .flow-t{color:var(--work)}
.sp:where([data-kit~="flow-s"]) .figwrap .flow-box{position:absolute;inset:0;display:flex;align-items:center}
.sp:where([data-kit~="flow-s"]) .flow-box .flow{width:100%}
.sp:where([data-kit~="flow-d"]) .flow{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--flow-n,5),minmax(0,1fr))}
.sp:where([data-kit~="flow-d"]) .flow::before{content:"";position:absolute;top:5px;height:1px;left:calc(50% / var(--flow-n,5));right:calc(50% / var(--flow-n,5));background:rgba(231,235,241,0.4)}
.sp:where([data-kit~="flow-d"]) .flow-i{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.sp:where([data-kit~="flow-d"]) .flow-d{width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(231,235,241,0.7);background:#05070c}
.sp:where([data-kit~="flow-d"]) .flow-i.on .flow-d{border-color:var(--work);background:var(--work)}
.sp:where([data-kit~="flow-d"]) .flow-n{margin-top:14px;font-size:13px;line-height:1.5;color:var(--work)}
.sp:where([data-kit~="flow-d"]) .flow-t{margin-top:4px;font-size:16px;line-height:1.5;color:#e7ebf1}
.sp:where([data-kit~="flow-d"]) .flow-k{margin-top:2px;font-size:13px;line-height:1.5;color:#8d96a5}
.sp:where([data-kit~="flow-d"]) .flow-x{margin-top:2px;max-width:16em;font-size:13px;line-height:1.5;color:#a3acba}
.sp:where([data-kit~="flow-d"]) .flow-f{display:block;width:calc(100% - 24px);max-width:300px;aspect-ratio:1.9;margin-top:14px;object-fit:cover;box-sizing:border-box;border:1px solid rgba(231,235,241,0.16);background:#06080c}
.sp:where([data-kit~="flow-r"]) .flow{position:relative;width:100%;max-width:1200px}
.sp:where([data-kit~="flow-r"]) .flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.sp:where([data-kit~="flow-r"]) .flow-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.sp:where([data-kit~="flow-r"]) .flow-axis{position:relative;display:flex;justify-content:center;width:100%}
.sp:where([data-kit~="flow-r"]) .flow-axis::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:rgba(231,235,241,0.4)}
.sp:where([data-kit~="flow-r"]) .flow-node:first-child .flow-axis::before{left:50%}
.sp:where([data-kit~="flow-r"]) .flow-node:last-child .flow-axis::before{right:50%}
.sp:where([data-kit~="flow-r"]) .flow-dot{position:relative}
.sp:where([data-kit~="flow-r"]) .flow-no,.sp:where([data-kit~="flow-r"]) .flow-name,.sp:where([data-kit~="flow-r"]) .flow-tool{padding:0 8px}
.sp:where([data-kit~="flow-r"]) .flow.thumbs{max-width:none}
.sp:where([data-kit~="flow-r"]) .figwrap .flow img.flow-thumb,.sp:where([data-kit~="flow-r"]) .flow img.flow-thumb{display:block;width:calc(100% - 24px);height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:20px;background:#0b0e14}
.sp:where([data-kit~="flow-r"]) .flow .flow-thumb.flow-txt{display:flex;align-items:center;justify-content:center;width:calc(100% - 24px);aspect-ratio:16/9;margin-bottom:20px;box-sizing:border-box;border:1px dashed rgba(231,235,241,0.22);background:#06080c;color:#8d96a5;font-size:14px;letter-spacing:0.08em}
.sp:where([data-kit~="flow-r"]) .flow-dot{display:block;box-sizing:border-box;width:10px;height:10px;border-radius:50%;border:1px solid rgba(231,235,241,0.6);background:var(--flow-bg,#000)}
.sp:where([data-kit~="flow-r"]) .flow-no{margin-top:16px;font-size:13px;line-height:1.4;color:var(--work)}
.sp:where([data-kit~="flow-r"]) .flow-name{margin-top:4px;font-size:16px;line-height:1.5;font-weight:500;color:#e7ebf1}
.sp:where([data-kit~="flow-r"]) .flow-tool{margin-top:4px;font-size:13px;line-height:1.5;color:#8d96a5}
.sp:where([data-kit~="flow-r"]) .flow-node[data-on="true"] .flow-dot{border-color:var(--work-line);background:var(--work-line)}
.sp:where([data-kit~="flow-r"]) .flow-node[data-on="true"] .flow-name{color:var(--work)}
.sp .figwrap .flow-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* ===== 批 5：标注图（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   anno-d: darwinism,floundering,grading,iceland,photobook,shuttle,soap
   anno-r: huangquan,inverted,realtime,revelation */
@media (min-width:768px){
  .sp:where([data-kit~="anno-d"]) .figwrap .anno{position:absolute;inset:0;justify-content:center}
  .sp:where([data-kit~="anno-d"]) .figwrap .anno-fig{height:min(100%, calc((100cqw - 184px) / 2.3897))}
}
.sp:where([data-kit~="anno-d"]) .anno{box-sizing:border-box;padding-right:184px;display:flex;justify-content:flex-start;align-items:center}
.sp:where([data-kit~="anno-d"]) .anno-fig{position:relative;aspect-ratio:2.3897}
.sp:where([data-kit~="anno-d"]) .anno-i{display:block;width:100%;height:100%;object-fit:cover}
.sp:where([data-kit~="anno-d"]) .anno-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sp:where([data-kit~="anno-d"]) .anno-ln{fill:none;stroke:rgba(231,235,241,0.4);stroke-width:1px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 1px rgba(4,5,7,0.55))}
.sp:where([data-kit~="anno-d"]) .anno-ln.on{stroke:var(--work-line)}
.sp:where([data-kit~="anno-d"]) .anno-d{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(231,235,241,0.4);box-shadow:0 0 0 1px rgba(4,5,7,0.35)}
.sp:where([data-kit~="anno-d"]) .anno-d.on{background:var(--work-line)}
.sp:where([data-kit~="anno-d"]) .anno-l{position:absolute;left:calc(100% + 12px);transform:translateY(-50%);font-size:14px;line-height:1.5;color:#a3acba;white-space:nowrap}
.sp:where([data-kit~="anno-d"]) .anno-l.on{color:var(--work)}
@media (min-width:768px){
  html[lang="en"] .sp:where([data-kit~="anno-d"]) .figwrap .anno{padding-right:244px}
  html[lang="en"] .sp:where([data-kit~="anno-d"]) .figwrap .anno-fig{height:min(100%, calc((100cqw - 244px) / 2.3897))}
}
.sp:where([data-kit~="anno-r"]) .anno{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100cqw,calc(100cqh * var(--anno-k)));aspect-ratio:var(--anno-ar)}
.sp:where([data-kit~="anno-r"]) .figwrap .anno img.anno-img{position:absolute;top:0;height:100%;object-fit:fill}
.sp:where([data-kit~="anno-r"]) .anno-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp:where([data-kit~="anno-r"]) .anno-svg path{fill:none;stroke:rgba(231,235,241,0.4);stroke-width:1px;vector-effect:non-scaling-stroke}
.sp:where([data-kit~="anno-r"]) .anno-svg path.anno-dot{stroke-width:4px;stroke-linecap:round}
.sp:where([data-kit~="anno-r"]) .anno-svg g[data-on="true"] path{stroke:var(--work-line)}
.sp:where([data-kit~="anno-r"]) .anno-lab{position:absolute;transform:translateY(-50%);font-size:14px;line-height:1.3;color:#a3acba;white-space:nowrap}
.sp:where([data-kit~="anno-r"]) .anno-lab.r{transform:translate(-100%,-50%);text-align:right}
.sp:where([data-kit~="anno-r"]) .anno-lab[data-on="true"]{color:var(--work)}
.sp:where([data-kit~="anno-r"]) .anno-lab.sub{transform:translateY(-9px);width:34%;white-space:normal;color:#e7ebf1}
.sp:where([data-kit~="anno-r"]) .anno-lab.sub small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:#8d96a5}

/* ===== 批 6：成果、两页同款组件（cssmerge 2026-11-07，自动生成） =====
   本批 data-kit 套 → 页：
   bc: economist,retrieval
   duo: inverted,realtime
   fg: floundering,grading
   res-ai: archive,shuttle
   res-d: floundering,grading,iceland,photobook
   res-r: huangquan,inverted,realtime,revelation,soap
   res-s: archive,economist,retrieval,stylize
   res-s2: archive,economist
   res-s3: archive,retrieval
   res-s4: archive,economist,retrieval
   res-s5: archive,retrieval,stylize
   res-s6: economist,retrieval,stylize
   res-top: floundering,grading,iceland */
.sp:where([data-kit~="res-s"]) .res{width:100%;padding:0 232px 0 72px;box-sizing:border-box}
.sp:where([data-kit~="res-s"]) .res-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;max-width:1200px;margin-top:40px}
.sp:where([data-kit~="res-s"]) .res-nums .rcap{color:#a3acba;margin-top:12px}
.sp:where([data-kit~="res-s"]) .res .flow{max-width:1200px;margin-top:80px}
.sp:where([data-kit~="res-s"]) .res-sum{margin-top:20px;max-width:900px;font-size:18px;line-height:1.7;color:#d2d8e0}
.sp:where([data-kit~="res-ai"]) .res .ai{margin:clamp(16px, 3vh, 28px) 0 0;max-width:62em;font-size:15px;line-height:1.7;color:#c3cad4}
.sp:where([data-kit~="res-ai"]) .res .ai b{font-weight:500;color:var(--work);margin-right:10px}
.sp:where([data-kit~="bc"]) .bc{--bc-f:clamp(13px, 3cqh, 19px);font-size:var(--bc-f);line-height:1.4}
.sp:where([data-kit~="bc"]) .bc-k{display:flex;flex-wrap:wrap;gap:6px 24px;margin-bottom:clamp(8px, 2.4cqh, 20px);font-size:clamp(13px, 2.4cqh, 15px);color:#a3acba}
.sp:where([data-kit~="bc"]) .bc-n{color:#d2d8e0;white-space:nowrap}
.sp:where([data-kit~="bc"]) .bc-r{display:contents}
.sp:where([data-kit~="bc"]) .bc-ax{position:relative;height:20px;font-size:clamp(13px, 2.4cqh, 15px);color:#8d96a5}
.sp:where([data-kit~="bc"]) .bc-ax span{position:absolute;left:var(--x);translate:-50% 0;white-space:nowrap}
.sp:where([data-kit~="bc"]) .bc-h{font-size:clamp(13px, 2.4cqh, 15px);color:#8d96a5;text-align:right;white-space:nowrap}
.sp:where([data-kit~="res-s6"]) .res .flow.pic{margin-top:56px}
.sp:where([data-kit~="res-s5"]) .res .flow-i{display:block;width:calc(100% - 24px);height:auto;aspect-ratio:16 / 9;object-fit:cover;margin-bottom:16px;box-sizing:border-box;border:1px solid rgba(231,235,241,0.16);background:#06080c}
@media (min-width:768px) and (max-height:780px){
  .sp:where([data-kit~="res-s3"]) #ch-6 .res-sum{margin-top:12px;font-size:16px}
  .sp:where([data-kit~="res-s4"]) #ch-6 .res-nums{margin-top:20px}
  .sp:where([data-kit~="res-s4"]) #ch-6 .rnum{font-size:56px}
  .sp:where([data-kit~="res-s4"]) #ch-6 .res-nums .rcap{margin-top:8px}
  .sp:where([data-kit~="res-s2"]) #ch-6 .res .flow-i{width:min(calc(100% - 24px), 20vh * 16 / 9);margin-bottom:10px}
}
@media (min-width:768px){
  html[lang="en"] .sp:where([data-kit~="fg"]) .figwrap .mm.pic{--mm-ih:clamp(40px, min(calc(((100cqh - 2 * var(--mm-gap)) / 3 - 2px) * 0.8), 6.5cqw), 120px)}
}
@media (min-width:1600px){
  .sp:where([data-kit~="fg"]) .figwrap .mm.pic{--mm-ih:clamp(40px, min(calc((100cqh - 2 * var(--mm-gap)) / 3 - 2px), 12cqw), 220px)}
  html[lang="en"] .sp:where([data-kit~="fg"]) .figwrap .mm.pic{--mm-ih:clamp(40px, min(calc(((100cqh - 2 * var(--mm-gap)) / 3 - 2px) * 0.85), 9cqw), 200px)}
  .sp:where([data-kit~="fg"]) .figwrap .mm.pic .mm-l{font-size:clamp(14px, 3cqh, 24px)}
  .sp:where([data-kit~="fg"]) .figwrap .mm-c{font-size:clamp(22px, 5cqh, 40px)}
  .sp:where([data-kit~="fg"]) .figwrap .mm-n{font-size:clamp(16px, 3.4cqh, 26px)}
}
.sp:where([data-kit~="fg"]) .lp{position:relative;width:min(100%, calc(68cqh * 560 / 330));aspect-ratio:560 / 330;margin:0 auto}
.sp:where([data-kit~="fg"]) .lp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp:where([data-kit~="fg"]) .lp-beam{fill:var(--work-line);opacity:0.16}
.sp:where([data-kit~="fg"]) .lp-vel{fill:#2a2f39;stroke:rgba(231,235,241,0.25);stroke-width:1px;vector-effect:non-scaling-stroke}
.sp:where([data-kit~="fg"]) .lp-flag{stroke:#e7ebf1;stroke-width:6px;stroke-linecap:round}
.sp:where([data-kit~="fg"]) .lp-lamp{fill:var(--work-line);stroke:none}
.sp:where([data-kit~="fg"]) .lp-cam{fill:#06080c;stroke:rgba(231,235,241,0.7);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.sp:where([data-kit~="fg"]) .lp-l{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%, -50%);font-size:clamp(14px, 3.4cqh, 24px);line-height:1.4;color:#a3acba;white-space:nowrap}
.sp:where([data-kit~="fg"]) .lp-l.on{color:var(--work)}
.sp:where([data-kit~="fg"]) .lp-l.lp-r{transform:translate(0, -50%)}
@media (min-width:768px){
  .sp:where([data-kit~="fg"]) .figwrap .dg.sbx{flex-direction:row;justify-content:center;align-items:center;gap:clamp(20px, 3cqw, 48px)}
  .sp:where([data-kit~="fg"]) .figwrap .sbx-t{height:min(100%, calc(42cqw * 950 / 1028))}
}
.sp:where([data-kit~="fg"]) .sbx-t{flex:none;margin:0;aspect-ratio:1028 / 950}
.sp:where([data-kit~="fg"]) .sbx-t img{display:block;width:100%;height:100%;object-fit:contain;box-sizing:border-box;border:1px solid rgba(231,235,241,0.16);background:#1b1b1b}
.sp:where([data-kit~="fg"]) .sbx-g{flex:1;min-width:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(10px, 2.4cqh, 22px) clamp(14px, 2cqw, 24px);align-content:center}
.sp:where([data-kit~="fg"]) .sbx-c{margin:0;min-width:0}
.sp:where([data-kit~="fg"]) .sbx-c img{display:block;width:100%;height:auto;aspect-ratio:2.3897;object-fit:cover;box-sizing:border-box;border:1px solid rgba(231,235,241,0.16);background:#06080c}
.sp:where([data-kit~="fg"]) .sbx-c figcaption{margin-top:6px;font-size:13px;line-height:1.5;color:#a3acba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp:where([data-kit~="fg"]) .sbx-c figcaption b{font-weight:500;color:var(--work);margin-right:8px}
@media (min-width:768px){
  .sp:where([data-kit~="fg"]) .figwrap .sbx-g{max-width:calc((100cqh - 2 * 34px - 22px) / 2 * 2.3897 * 2 + 24px)}
}
.sp:where([data-kit~="res-d"]) .res{width:100%;box-sizing:border-box;padding:0 var(--sk-gr, 232px) 0 var(--sk-gl, 72px)}
.sp:where([data-kit~="res-top"]) .res-top{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);gap:24px;align-items:end;margin-top:clamp(20px, 4vh, 32px);max-width:1400px}
.sp:where([data-kit~="res-d"]) .res-k{color:#a3acba;margin-top:10px}
.sp:where([data-kit~="res-top"]) .res .film{margin-top:0}
.sp:where([data-kit~="res-d"]) .res .flow{margin-top:clamp(28px, 7vh, 72px)}
.sp:where([data-kit~="res-r"]) .res-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin-top:40px;max-width:1200px}
.sp:where([data-kit~="res-r"]) .res-nums small{display:block;margin-top:12px;font-size:16px;line-height:1.6;color:#a3acba}
.sp:where([data-kit~="res-r"]) .res-ai{margin-top:40px;font-size:16px;line-height:1.75;color:#d2d8e0}
.sp:where([data-kit~="res-r"]) .res-ai span{color:#a3acba}
.sp:where([data-kit~="res-r"]) .res-flow{margin-top:64px}
.sp:where([data-kit~="res-r"]) .res-flow.thumbs{margin-top:44px}
.sp:where([data-kit~="res-r"]) .res-flow.thumbs img.flow-thumb{margin-bottom:14px}
.sp:where([data-kit~="duo"]) .figwrap .layer > img.one{display:block;width:100%;height:100%;object-fit:contain}
.sp:where([data-kit~="duo"]) .duo figure{margin:0;min-width:0}
.sp:where([data-kit~="duo"]) .figwrap .layer .duo img{height:auto;object-fit:cover}
.sp:where([data-kit~="duo"]) .duo figcaption b{color:var(--work);font-weight:500;margin-right:8px}