/* 可复用组件 · 依赖 site.css 的 :root 令牌（先加载 site.css）
   来源：2026-10 另一站改造的组件化经验。全部只用 var(--sN)/var(--fN)/var(--r*) 与站内色值，
   不引入新色、不用写死 px（check-scale.py / check-colors.py 把关）。
   前缀 .ds- 避免与站内既有类名冲突。配色只用灰阶，电青 --cy 只许字标用（check-colors ③）。 */

/* ── 深色终端卡片：代码示例、接入演示 ── */
.ds-term{background:var(--dkbg);border:1px solid var(--dkln);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh4)}
.ds-term__bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--dkln);font-family:var(--mono);font-size:var(--f2);color:var(--dkfaint)}
.ds-term__bar i{width:var(--s2);height:var(--s2);border-radius:50%;border:1px solid var(--dkln)}
.ds-term__bar em{margin-left:auto;font-style:normal;letter-spacing:var(--s0)}
.ds-term__body{margin:0;padding:var(--s6) var(--s6);overflow-x:auto;font-family:var(--mono);font-size:var(--f4);line-height:1.9;color:var(--dktext)}
.ds-ln{display:block;white-space:pre;opacity:0;animation:ds-in .4s ease forwards;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
.ds-cm{color:var(--dkfaint);font-style:italic}
.ds-kw{color:var(--dkmut)}
.ds-str{color:var(--dkk2)}
.ds-ln.ds-hl{display:block;margin:0 calc(var(--s6) * -1);padding:0 var(--s6);background:var(--dkln);box-shadow:inset 2px 0 0 var(--dkk2)}
.ds-cursor{display:inline-block;width:var(--s2);height:1.05em;margin-left:var(--s0);vertical-align:-.15em;background:var(--dkk2);animation:ds-blink 1.1s steps(1) infinite}

/* ── 三列格子：三件事、三个卖点 ── */
.ds-cells{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.ds-cell{padding:var(--s9) var(--s7);border-right:1px solid var(--ln2);display:flex;flex-direction:column;gap:var(--s3)}
.ds-cell:last-child{border-right:0}
.ds-cell__num{font-family:var(--mono);font-size:var(--f3);color:var(--gy);letter-spacing:var(--s0)}
.ds-cell__title{font-size:var(--f7);color:var(--ink);line-height:1.35}
.ds-cell__body{color:var(--mut);font-size:var(--f5)}

/* ── 数字行：指标条 ── */
.ds-stats{display:flex;flex-wrap:wrap;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.ds-stat{padding:var(--s5) var(--s7) var(--s5) 0;margin-right:var(--s7);border-right:1px solid var(--ln2)}
.ds-stat:last-child{border-right:0;margin-right:0}
.ds-stat__v{font-size:var(--f10);color:var(--ink);line-height:1.1}
.ds-stat__k{font-family:var(--mono);font-size:var(--f1);letter-spacing:var(--s0);text-transform:uppercase;color:var(--gy);margin-top:var(--s2)}

/* ── 行列表：原则、能力清单 ── */
.ds-rows{border-top:1px solid var(--ln)}
.ds-row{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:var(--s7);align-items:baseline;padding:var(--s7) 0;border-bottom:1px solid var(--ln2)}
.ds-row__k{font-family:var(--mono);font-size:var(--f2);letter-spacing:var(--s0);text-transform:uppercase;color:var(--gy)}
.ds-row__v{font-size:var(--f7);color:var(--ink);line-height:1.4}
.ds-row__v span{display:block;margin-top:var(--s2);font-size:var(--f5);color:var(--mut);line-height:1.6}

/* ── 装饰：仪环（纯 SVG，慢速旋转，只做背景） ── */
.ds-orrery{position:relative}
.ds-orrery__svg{position:absolute;left:50%;top:50%;width:130%;max-width:760px;transform:translate(-50%,-50%);color:var(--ln);opacity:.6;pointer-events:none}
.ds-orrery__svg .spin{transform-origin:300px 300px;animation:ds-spin 90s linear infinite}
.ds-orrery__svg .spin-rev{transform-origin:300px 300px;animation:ds-spin 140s linear infinite reverse}
.ds-orrery > *:not(.ds-orrery__svg){position:relative;z-index:1}

@keyframes ds-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes ds-blink{50%{opacity:0}}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ── 响应式 ── */
@media (max-width:880px){
  .ds-cells{grid-template-columns:1fr}
  .ds-cell{border-right:0;border-bottom:1px solid var(--ln2)}
  .ds-cell:last-child{border-bottom:0}
  .ds-row{grid-template-columns:1fr;gap:var(--s3)}
  .ds-stat{padding-right:var(--s4);margin-right:var(--s4)}
  /* 手机宽度下代码行会超出卡片（如 base_url 那行），字号降一档，免得横向滚动 */
  .ds-term__body{font-size:var(--f3)}
}
@media (prefers-reduced-motion:reduce){
  .ds-ln,.ds-cursor,.ds-orrery__svg .spin,.ds-orrery__svg .spin-rev{animation:none;opacity:1}
}

/* ── 页面切换（transition.js 负责建盖子与时序；这里只管样式）──
   细线从左到右、从上到下扫过盖住页面再换页；新页面进来时线条收回。
   盖子默认隐藏。从站内跳转过来时，头部内联脚本给 html 加 pt-arrive，正文先藏起来，
   盖子由 transition.js 盖上，再撤掉——避免闪一下未覆盖的页面。
   pt-arrive 另有 1.2 秒兜底：脚本没跑起来也不会让正文永久藏着。 */
.pt{position:fixed;inset:0;z-index:200;background:var(--bb);color:var(--white);visibility:hidden;pointer-events:none;overflow:hidden}
.pt.on{visibility:visible;pointer-events:auto}
.pt.anim{transition:clip-path .62s cubic-bezier(.7,0,.2,1)}
.pt.closing{transition-duration:.6s;transition-timing-function:cubic-bezier(.6,0,.3,1)}
/* 深蓝底上的细网格，像图纸背面 */
.pt::before{content:"";position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--cy) 16%,transparent) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,color-mix(in srgb,var(--cy) 16%,transparent) 1px,transparent 1px) 0 0/56px 56px}
.pt::after{content:"";position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;border:1px solid color-mix(in srgb,var(--cy) 50%,transparent);transform:translate(-50%,-50%) rotate(45deg) scale(.08);opacity:0}
.pt.show::after{animation:pt-ring .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes pt-ring{0%{transform:translate(-50%,-50%) rotate(45deg) scale(.04);opacity:1}100%{transform:translate(-50%,-50%) rotate(45deg) scale(.42);opacity:0}}
/* 中央：目标名称逐字打出 */
.pt .lbl{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);max-width:90vw;font-size:clamp(40px,8vw,104px);font-weight:800;letter-spacing:-.02em;line-height:1.05;white-space:nowrap;color:var(--white)}
.pt .lbl .ch{display:inline-block;opacity:0;transform:translateY(.35em) skewX(-8deg);color:var(--cy);transition:opacity .25s ease,transform .5s cubic-bezier(.2,.8,.2,1),color .8s ease;transition-delay:calc(var(--k) * 32ms)}
.pt.show .lbl .ch{opacity:1;transform:none;color:var(--white)}
/* 点的是字标：两个 o 画成品牌双点（BRAND_COLORS §六 深底：左 #FFB824、右 #00B7DB，同大小、同踩基线） */
.pt .lbl.is-brand{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.012em}
.pt .lbl .ch.dot{width:.585em;height:.585em;border-radius:50%;margin:0 .025em;vertical-align:baseline}
.pt .lbl .ch.dot.l{background:var(--dkk)}
.pt .lbl .ch.dot.r{background:var(--cyd)}
.pt .sub{position:absolute;left:50%;top:calc(44% + clamp(40px,7vw,90px));transform:translateX(-50%);display:flex;align-items:center;gap:var(--s4);font-family:var(--mono);font-size:var(--f3);letter-spacing:2px;color:var(--cy);opacity:0;transition:opacity .3s ease .25s;white-space:nowrap}
.pt.show .sub{opacity:1}
.pt .bar{display:block;width:clamp(120px,22vw,260px);height:2px;background:color-mix(in srgb,var(--white) 18%,transparent)}
.pt .bar b{display:block;height:100%;background:var(--or);transform-origin:left;transform:scaleX(0)}
.pt .pct{color:var(--white)}
/* 四角取景框：随菱形张开从外向里收拢 */
.pt .crn{position:absolute;width:40px;height:40px;border:2px solid var(--cy);opacity:0;transition:opacity .25s ease .2s,transform .5s cubic-bezier(.2,.8,.2,1) .2s}
.pt .crn.tl{left:28px;top:28px;border-right:0;border-bottom:0;transform:translate(-18px,-18px)}
.pt .crn.tr{right:28px;top:28px;border-left:0;border-bottom:0;transform:translate(18px,-18px)}
.pt .crn.bl{left:28px;bottom:28px;border-right:0;border-top:0;transform:translate(-18px,18px)}
.pt .crn.br{right:28px;bottom:28px;border-left:0;border-top:0;transform:translate(18px,18px)}
.pt.show .crn{opacity:1;transform:none}
@media(max-width:600px){.pt .sub{flex-direction:column;gap:var(--s2)}.pt .crn{width:26px;height:26px}}
.pt-arrive body{visibility:hidden}
.pt-arrive .pt{visibility:visible}
@media (prefers-reduced-motion:reduce){.pt{display:none}.pt-arrive body{visibility:visible}}