/* ============================================================
   孙常智 · 个人主页
   设计意图：页面本身就是那句话的证明 —— 把混乱拆清楚，做成能跑的东西。
   动效服务于理解，不服务于装饰。原生 CSS 滚动驱动，无第三方库。
   ============================================================ */

/* ---------- tokens：深色优先 ---------- */
:root{
  --bg:#0a0d12;  --bg-2:#0e1218;  --panel:#12171f;  --panel-2:#161c25;
  --ink:#e9eef5;  --ink-2:#c2ccd9;  --muted:#8b98a8;  --faint:#5d6b7b;
  --line:#1e2732;  --line-2:#2a3543;
  --accent:#67a6f5;  --accent-dim:#1b3352;  --accent-glow:rgba(103,166,245,.14);
  --amber:#dda94a;  --jade:#4fb894;
  --r:14px;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#fbfaf8; --bg-2:#f5f4f1; --panel:#fff; --panel-2:#f7f8fa;
    --ink:#111820; --ink-2:#33404f; --muted:#5d6b7b; --faint:#93a0ae;
    --line:#e5e8ec; --line-2:#d3d9e0;
    --accent:#1f63b8; --accent-dim:#dce8f7; --accent-glow:rgba(31,99,184,.10);
    --amber:#a9741a; --jade:#1f7a5a;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.78;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em}
.wrap{width:min(1080px,100% - 44px);margin-inline:auto}

/* ---------- 阅读进度：一行 CSS，滚动驱动 ---------- */
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.progress{
  position:fixed;inset:0 0 auto;height:2px;z-index:60;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--jade));transform:scaleX(0);
}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root block)}
}

/* ---------- 导航 ---------- */
nav.top{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,padding .3s;
}
nav.top.stuck{border-bottom-color:var(--line)}
nav.top .inner{
  width:min(1080px,100% - 44px);margin-inline:auto;
  display:flex;align-items:center;gap:22px;padding:14px 0;transition:padding .3s;
}
nav.top.stuck .inner{padding:9px 0}
nav.top .sig{font-weight:750;letter-spacing:.14em;font-size:15px;white-space:nowrap}
nav.top .sig i{color:var(--accent);font-style:normal}
nav.top .links{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a{
  color:var(--muted);font-size:13.5px;padding:5px 11px;border-radius:7px;white-space:nowrap;
  transition:color .2s,background .2s;
}
nav.top .links a:hover,nav.top .links a[aria-current="true"]{
  color:var(--ink);background:var(--panel);text-decoration:none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:clamp(52px,9vh,88px) 0 clamp(30px,4.5vh,48px);overflow:hidden}
#field{
  position:absolute;inset:-14% -5% auto;height:min(560px,74vh);width:110%;
  z-index:0;opacity:.38;pointer-events:none;
  mask-image:radial-gradient(120% 78% at 62% 34%,#000 32%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 78% at 62% 34%,#000 32%,transparent 78%);
}
.hero>.wrap{position:relative;z-index:1}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--jade);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--jade) 60%,transparent);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--jade) 55%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

.hero h1.pitch{
  margin:clamp(22px,3.4vh,34px) 0 0;max-width:19em;
  font-size:clamp(27px,3.9vw,46px);line-height:1.42;font-weight:750;letter-spacing:.01em;
}
/* 每个分句独立成块：断行只落在逗号处，不会把「上线」「可运行」拆开 */
.pitch .cl,.ev h3 .cl{display:inline-block}
.pitch em{font-style:normal;position:relative;z-index:0}
.pitch em::after{
  content:"";position:absolute;left:-.08em;right:-.08em;bottom:.08em;height:.4em;z-index:-1;
  background:var(--accent-glow);border-radius:2px;transform:scaleX(0);transform-origin:0 50%;
}
@media(max-width:560px){.pitch em{white-space:normal}}
.lede{margin:clamp(22px,3.4vh,32px) 0 0;max-width:62ch;font-size:clamp(16px,1.45vw,18px);
  line-height:1.85;color:var(--ink-2)}
.lede b{color:var(--ink);font-weight:650}
.lede-sub{margin:16px 0 0;max-width:58ch;font-size:14.5px;line-height:1.8;color:var(--muted);
  border-left:2px solid var(--line-2);padding-left:14px}

.cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.btn{
  --bd:var(--line-2);
  display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:10px;
  border:1px solid var(--bd);background:var(--panel);color:var(--ink);font-size:14.5px;
  font-weight:550;transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,background .22s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);--bd:var(--accent);background:var(--panel-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#08101c;font-weight:650}
.btn.primary:hover{color:#08101c;filter:brightness(1.1)}
.btn .arw{transition:transform .22s}
.btn:hover .arw{transform:translate(3px,-3px)}


/* ============================================================
   SECTION 通用
   ============================================================ */
section{padding:clamp(54px,8.5vh,92px) 0;position:relative}
.sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}
.secnum{font-family:var(--mono);font-size:12.5px;color:var(--accent);letter-spacing:.1em}
h2{margin:0;font-size:clamp(25px,3.6vw,38px);line-height:1.25;font-weight:750;letter-spacing:.02em}
.seclede{margin:0 0 clamp(30px,5vh,48px);color:var(--muted);font-size:15px;max-width:70ch}

/* ============================================================
   时间轴 —— 本页的主角
   ============================================================ */
.tl-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.tl-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.tl-inner{--lw:186px;min-width:680px;padding:20px 62px 16px 24px}
.tl-years{position:relative;height:22px;margin-left:var(--lw);border-bottom:1px solid var(--line)}
.tl-year{position:absolute;left:var(--p);top:0;font-family:var(--mono);font-size:11px;
  color:var(--faint);transform:translateX(-2px)}
.tl-year::before{content:"";position:absolute;left:0;top:20px;width:1px;height:var(--gh,0px);
  background:var(--line-2);z-index:0}

.tl-row{display:grid;grid-template-columns:var(--lw) 1fr;align-items:center;
  gap:0 12px;height:30px;position:relative}
.tl-row:hover .tl-label{color:var(--ink)}
.tl-label{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:color .2s}
.tl-track{position:relative;height:100%}
.tl-bar{
  --c:var(--accent);
  position:absolute;left:var(--s);width:var(--w);min-width:9px;top:50%;height:9px;margin-top:-4.5px;
  border-radius:99px;display:block;transform-origin:0 50%;
  background:var(--c);opacity:.55;transition:opacity .2s,filter .2s;
}
.tl-bar.k-edu{--c:var(--line-2);opacity:1}
.tl-bar.k-study{background:repeating-linear-gradient(115deg,var(--faint) 0 3px,transparent 3px 7px);opacity:.85}
.tl-bar.k-side{--c:var(--jade);opacity:.5}
.tl-bar.k-proj{--c:var(--jade);opacity:.85}
.tl-bar.k-key{opacity:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 16px var(--accent-glow)}
.tl-bar.k-fail{--c:var(--amber);opacity:.65}
.tl-row:hover .tl-bar{opacity:1;filter:saturate(1.3)}
.tl-bar.k-ongoing::after{
  content:"";position:absolute;left:100%;top:0;bottom:0;width:30px;
  background:linear-gradient(90deg,var(--c),transparent);opacity:.7;
}
.tl-row:hover .tl-label::after{
  content:" " attr(data-span);font-family:var(--mono);font-size:11px;color:var(--faint)
}
.tl-band{
  position:absolute;top:20px;height:var(--gh,0px);background:var(--accent-glow);pointer-events:none;z-index:0;
  border-left:1px dashed color-mix(in srgb,var(--accent) 42%,transparent);
  border-right:1px dashed color-mix(in srgb,var(--accent) 42%,transparent);
}
.tl-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted)}
.tl-legend i{display:inline-block;width:16px;height:7px;border-radius:99px;margin-right:6px;
  vertical-align:middle}

/* 滚动驱动：条形从左向右画出来 */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .tl-bar{animation:draw .01s linear both;animation-timeline:view(root block);
      animation-range:entry 8% entry 62%}
  }
}



/* ============================================================
   项目
   ============================================================ */
.proj+
/* 流程图 */
.flow{display:flex;align-items:stretch;gap:0;margin:22px 0 4px;overflow-x:auto;scrollbar-width:none}
.flow::-webkit-scrollbar{display:none}
.fn{
  flex:1;min-width:118px;border:1px solid var(--line);background:var(--bg-2);padding:12px 13px;
  position:relative;
}
.fn:first-child{border-radius:10px 0 0 10px}
.fn:last-child{border-radius:0 10px 10px 0}
.fn+.fn{border-left:0}
.fn .s{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.fn .t{font-size:13px;font-weight:650;margin-top:3px}
.fn .d{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55}
.fn::after{
  content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;margin-top:-4.5px;z-index:2;
  border-right:1px solid var(--line-2);border-top:1px solid var(--line-2);transform:rotate(45deg);
  background:var(--bg-2);
}
.fn:last-child::after{display:none}
.fn.guard{border-color:color-mix(in srgb,var(--amber) 40%,transparent);
  background:color-mix(in srgb,var(--amber) 6%,transparent)}
.fn.guard .t{color:var(--amber)}

/* ============================================================
   教育 / 求职 / 页脚
   ============================================================ */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px}
.card p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px}
.card.seek{border-left:2px solid var(--accent)}
.card.seek b{display:block;font-size:16px;margin-bottom:6px}

footer{padding:clamp(56px,9vh,90px) 0 clamp(44px,7vh,72px);border-top:1px solid var(--line)}
.contact{display:flex;flex-wrap:wrap;gap:14px 40px;margin:22px 0 0}
.contact a,.contact span{font-size:16px}
.contact .k{display:block;font-family:var(--mono);font-size:11px;color:var(--faint);
  letter-spacing:.12em;margin-bottom:2px}
.fine{margin-top:34px;font-size:12.5px;color:var(--faint);max-width:70ch;line-height:1.8}
.colophon{margin-top:10px;font-size:12px;color:var(--faint)}

/* ============================================================
   进场动效：滚动驱动，可用即用，不可用则静态
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    .reveal{animation:rise .01s linear both;animation-timeline:view(root block);
      animation-range:entry 4% entry 44%}
  }
  /* 首屏入场 */
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .hero .eyebrow,.hero h1,.hero .lede,.hero .anchors{
    animation:fadeUp .75s cubic-bezier(.2,.8,.3,1) both;
  }
  .hero .eyebrow{animation-delay:.05s}
  .hero h1{animation-delay:.14s}
  .hero .lede{animation-delay:.26s}
  .hero .anchors{animation-delay:.4s}
  .pitch em::after{animation:wipe .7s cubic-bezier(.2,.8,.3,1) .95s both}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot{animation:none}
}
/* 不支持滚动驱动时，保证内容照常可见 */
@supports not (animation-timeline:view()){ .reveal{opacity:1;transform:none} }


/* ---------- 坦白框：数字口径与边界，一律就地写清楚 ---------- */
.note{border-left:2px solid var(--line-2);padding:2px 0 2px 14px;color:var(--muted);
  font-size:14.5px;margin:16px 0}
.note.honest{
  border-left:2px solid var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent);
  border-radius:0 10px 10px 0;padding:14px 17px;color:var(--ink-2);font-size:15px;
  line-height:1.85;margin:18px 0;
}
.note.honest b{color:var(--amber);font-weight:700}

/* ============================================================
   问答块
   ============================================================ */
.qa{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:26px 28px 22px;overflow:hidden}
.qa+.qa{margin-top:16px}
.qa h3{margin:0 0 4px;font-size:clamp(18px,2.1vw,22px);font-weight:750;line-height:1.45;
  letter-spacing:.01em;display:flex;gap:12px;align-items:flex-start}
.qa .q{flex:none;width:24px;height:24px;margin-top:4px;border-radius:6px;background:var(--accent);
  color:#08101c;font-family:var(--mono);font-size:13px;font-weight:700;display:grid;place-items:center}
.qa .a{padding-left:36px;max-width:76ch}
@media(max-width:640px){.qa{padding:20px}.qa .a{padding-left:0}}
.qa p{margin:14px 0 0;font-size:15.5px;line-height:1.88;color:var(--ink-2)}
.qa p b{color:var(--ink);font-weight:650}
.qa .lesson{border-top:1px dashed var(--line-2);padding-top:14px;margin-top:18px;color:var(--ink)}
.qa .src{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.04em}
.btn.sm{padding:8px 15px;font-size:13.5px}

/* ============================================================
   能力边界
   ============================================================ */
.bounds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.bounds{grid-template-columns:1fr}}
.bd{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:20px 21px}
.bd .bh{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.bd .bi{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-size:12px;font-weight:700}
.bd.ok .bi{background:color-mix(in srgb,var(--jade) 18%,transparent);color:var(--jade)}
.bd.mid .bi{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.bd.no .bi{background:var(--line-2);color:var(--muted)}
.bd.ok{border-top:2px solid var(--jade)}
.bd.mid{border-top:2px solid var(--amber)}
.bd.no{border-top:2px solid var(--line-2)}
.bd ul{margin:0;padding:0;list-style:none}
.bd li{position:relative;padding-left:15px;margin:10px 0;font-size:14px;line-height:1.72;color:var(--ink-2)}
.bd li::before{content:"";position:absolute;left:0;top:.75em;width:4px;height:4px;border-radius:50%;
  background:var(--line-2)}
.bd.no li{color:var(--muted)}

/* ============================================================
   两列说明
   ============================================================ */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}
.col{border-left:2px solid var(--line-2);padding:2px 0 2px 18px}
.col h4{margin:0 0 8px;font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.col p{margin:0 0 10px;font-size:14.5px;line-height:1.82;color:var(--ink-2)}
.col p:last-child{margin-bottom:0}
.col b{color:var(--ink);font-weight:650}
.cols2 .card.seek{border-left:2px solid var(--accent)}
#path .cols2{margin-top:26px}


/* ---------- 首屏三个锚点 ---------- */
.anchors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(28px,4.5vh,42px)}
@media(max-width:860px){.anchors{grid-template-columns:1fr}}
.an{
  display:block;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:16px 18px 17px;color:var(--ink);position:relative;overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.8,.3,1),border-color .24s,background .24s;
}
.an:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--accent);background:var(--panel-2)}
.an::after{content:"↓";position:absolute;right:15px;top:15px;color:var(--faint);font-size:13px;
  transition:transform .24s,color .24s}
.an:hover::after{color:var(--accent);transform:translateY(3px)}
.an .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}
.an b{display:block;margin:7px 0 5px;font-size:17px;font-weight:750;letter-spacing:.02em}
.an .d{display:block;font-size:12.5px;line-height:1.66;color:var(--muted)}

/* ---------- 三段证据 ---------- */
.ev{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:24px 26px;scroll-margin-top:80px}
.ev+.ev{margin-top:14px}
.ev .evh{margin-bottom:12px}
.ev .evk{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--accent);background:var(--accent-glow);padding:3px 10px;border-radius:99px}
.ev h3{margin:11px 0 6px;font-size:clamp(18px,2.2vw,23px);line-height:1.5;font-weight:750;
  letter-spacing:.01em;max-width:26em}
.ev .evm{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.03em}
.ev p{margin:0;font-size:15.5px;line-height:1.9;color:var(--ink-2);max-width:76ch}
.ev p b{color:var(--ink);font-weight:650}
.evt{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.evt span{font-size:12px;padding:3px 11px;border-radius:99px;border:1px solid var(--line-2);
  color:var(--muted);background:var(--bg-2)}