/* ============ 设计令牌（黑白系统） ============ */
:root{
  --paper:#F4F3EF;        /* 纸白底 */
  --card:#FCFCFA;         /* 卡片白 */
  --ink:#161616;          /* 墨黑 */
  --ink2:#6A6862;         /* 次级灰 */
  --line:#D9D7CF;         /* 发丝线 */
  --line2:#BDBBB2;        /* 深一线 */
  --serif:"Microsoft YaHei","微软雅黑",sans-serif;
  --mono:"Microsoft YaHei","微软雅黑",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* 锚点平滑滚动（对齐参考站 cv.html：左侧导航点击滑动到位，非硬跳） */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.subpage{overflow-y:auto}
body.lock{overflow:hidden}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}

/* ============ 顶栏 ============ */
/* 顶栏/底栏整条 pointer-events:none——它们是全宽 fixed 条，曾把树顶/树底的卡片
   和空白拖拽区整个挡成「点击死区」；只有其中的链接和按钮恢复可点 */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 22px;
  pointer-events:none;
}
.site-header a,.site-header button{pointer-events:auto}
.hd-left,.hd-right{display:flex;align-items:center;gap:16px}
.avatar{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--ink);background:var(--card);
  cursor:pointer;display:grid;place-items:center;
  position:relative;
  transition:transform .18s ease;
}
.avatar::after,.hd-icon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:3px 3px 0 var(--ink);
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.avatar:hover{transform:translateY(-2px)}
.avatar:hover::after,.hd-icon:hover::after{opacity:1}
.avatar svg{display:block}
.hd-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  padding:6px 4px;border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.hd-link:hover{border-bottom-color:var(--ink)}
.hd-mail{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
  padding-bottom:2px;border-bottom:1px solid transparent;
  color:var(--ink2);transition:border-color .18s ease;
}
.hd-mail:hover{border-bottom-color:var(--ink2)}
.hd-icon{
  width:36px;height:36px;border:1px solid var(--ink);background:var(--card);
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  position:relative;
  transition:transform .18s ease;
}
.hd-icon:hover{transform:translateY(-2px)}
@media (max-width:640px){.hd-mail span{display:none}}

/* ============ 场景（平面 · 卡片挂枝 · 可缩放平移） ============ */
.stage{
  position:fixed;inset:0;z-index:5;
  overflow:hidden;touch-action:none;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.stage.grabbing{cursor:grabbing}
/* 触屏（平板）与桌面同构：touch-action:none 让双指捏合交给 JS 做树缩放，
   顶栏是 z-index:20 的独立 fixed 层，树怎么缩放它都纹丝不动（20260921j） */
.world{
  position:absolute;inset:0;
  transform-origin:0 0;
}
/* 缩放＝transform:scale（GPU 合成层拉伸）：
   缩放全程零重排、零重绘、零重栅格化，8 倍也不卡；
   树与卡片全部是静态矢量，停稳后浏览器按最终倍率重新栅格化一次，文字恢复锐利。
   --z=树的倍率，--cs=卡片反向伸缩系数（树大卡片相对小、树小卡片相对大） */
.tree-wrap{
  position:absolute;left:50%;top:48%;
  transform:translate(-50%,-50%) scale(var(--z,1));
  width:min(86vh,92vw);
  container-type:inline-size;
}
.tree-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.tree path{
  fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;
}
.tree .s3{stroke-width:3.2}
.tree .s2{stroke-width:2.2}
.tree .s1{stroke-width:1.3}
.tree .shade{stroke:var(--line2)}
/* 右侧池塘与小鸭：CSS transform 直接作用在 SVG 用户坐标上（px=用户单位），随树一起缩放 */
.tree circle{fill:none;stroke:var(--ink)}
.tree .dotf{fill:var(--ink);stroke:none}
.tree .duck .swim{animation:duckswim-a 2.6s ease-in-out infinite}
.tree .duck-b .swim{animation:duckswim-b 3.4s ease-in-out infinite;animation-delay:-1.2s}
.tree .duck .bob{animation:duckbob 3.1s ease-in-out infinite alternate}
.tree .duck-b .bob{animation-duration:2.7s;animation-delay:-1.2s}
/* 折返掉头（20260921u）：turn 层与 swim 同周期——前半程朝原向游、
   后半程镜像翻转，任何时刻鸭头都朝运动方向；fill-box 保证绕自身翻身 */
.tree .duck .turn{transform-box:fill-box;transform-origin:50% 50%;animation:duckturn 2.6s linear infinite}
.tree .duck-b .turn{animation-duration:3.4s;animation-delay:-1.2s}
@keyframes duckswim-a{0%{transform:translateX(0)}50%{transform:translateX(-18px)}100%{transform:translateX(0)}}
@keyframes duckswim-b{0%{transform:translateX(0)}50%{transform:translateX(4px)}100%{transform:translateX(0)}}
@keyframes duckturn{0%,49.9%{transform:scaleX(1)}50.1%,100%{transform:scaleX(-1)}}
@keyframes duckbob{from{transform:translateY(0.6px)}to{transform:translateY(-0.6px)}}
@media (prefers-reduced-motion:reduce){.tree .duck .swim,.tree .duck .bob,.tree .duck .turn{animation:none}}

/* 枝上节点卡片（dot=枝头锚点圆，node-card=链接卡片本体；无连接线，卡片贴近圆点）
   尺寸全部用 cqw 比例单位（随树等比缩放，无封顶） */
.node-anchor{display:contents}
/* 卡片中心＝枝头圆点 + 偏移×0.6（靠近圆点）×外扩系数 --os（缩小档不拥挤）
   卡片反向伸缩也走 transform:scale(--cs)——零重排；cqw 基准尺寸在定宽容器里是常量 */
a.node-card{
  position:absolute;
  left:calc(var(--dx) + (var(--cx) - var(--dx)) * var(--os,1) * 0.6);
  top:calc(var(--dy) + (var(--cy) - var(--dy)) * var(--os,1) * 0.6);
  transform:translate(-50%,-50%) scale(var(--cs,1));
  display:flex;align-items:center;gap:calc(1.1cqw * var(--cs,1));white-space:nowrap;
  background:var(--card);border:1px solid var(--ink);
  padding:calc(0.7cqw * var(--cs,1)) calc(1.7cqw * var(--cs,1));
  box-shadow:calc(0.3cqw * var(--cs,1)) calc(0.3cqw * var(--cs,1)) 0 rgba(22,22,22,.14);
  transition:transform .24s cubic-bezier(.25,.9,.3,1);
  text-decoration:none;color:var(--ink);
  cursor:pointer;z-index:2;
}
/* hover 阴影预铺在伪元素上，hover 只切 opacity——阴影不参与过渡，丝滑不掉帧 */
a.node-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:calc(0.6cqw * var(--cs,1)) calc(0.6cqw * var(--cs,1)) 0 var(--ink);
  opacity:0;transition:opacity .24s ease;pointer-events:none;
}
a.node-card b{
  font-family:var(--mono);font-weight:normal;
  font-size:calc(1.4cqw * var(--cs,1));letter-spacing:.14em;color:var(--ink2);
}
a.node-card .t{
  font-size:calc(2cqw * var(--cs,1));letter-spacing:.05em;line-height:1;
}
a.node-card i{
  font-style:normal;font-family:var(--mono);
  font-size:calc(1.25cqw * var(--cs,1));letter-spacing:.18em;color:var(--ink2);
  border:1px solid var(--line2);padding:calc(0.3cqw * var(--cs,1)) calc(0.8cqw * var(--cs,1));
}
a.node-card:hover,a.node-card:focus-visible{
  transform:translate(-50%,-50%) scale(var(--cs,1)) translateY(-0.7cqw);
}
a.node-card:hover::after,a.node-card:focus-visible::after{opacity:1}
/* 圆圈长在树上（卡片枝头锚点处），全站同一尺寸；卡片本体不带圆 */
.node-anchor .dot{
  position:absolute;left:var(--dx);top:var(--dy);
  width:max(5px,1.5cqw);height:max(5px,1.5cqw);
  transform:translate(-50%,-50%);
  border:1.5px solid var(--ink);border-radius:50%;
  background:var(--paper);z-index:1;
  transition:transform .18s ease,background .18s ease;
}
.node-anchor:has(+ a.node-card:hover) .dot,
.node-anchor:has(+ a.node-card:focus-visible) .dot{transform:translate(-50%,-50%) scale(1.35);background:var(--ink)}
a.node-card.is-special{background:var(--ink);color:var(--paper)}
a.node-card.is-special b{color:var(--line)}
a.node-card.is-special i{color:var(--line);border-color:var(--ink2)}

/* 底栏（同样 pointer-events 穿透，防挡住树底卡片与拖拽区） */
.site-footer{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink2);
  pointer-events:none;
}
.site-footer a{pointer-events:auto}
/* 左下纵向组：提示语在上，备案号行在下（beian-wrap 内可叠两行备案：ICP＋公安，同样式同字号） */
.foot-left{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.beian-wrap{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
/* ICP 备案号（合规必备）：弱化灰字，不抢视觉 */
.beian{
  pointer-events:auto;text-decoration:none;color:var(--ink2);
  font-size:10px;letter-spacing:.08em;opacity:.72;
  transition:opacity .18s ease;
}
.beian:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.counter{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--ink);border-radius:999px;
  background:var(--card);padding:5px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.counter:hover{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 rgba(22,22,22,.25)}
.hint-touch{display:none}
@media (pointer:coarse){.hint-mouse{display:none}.hint-touch{display:inline}}
@media (max-width:640px){
  .site-footer{font-size:10px;padding:12px 14px;flex-direction:column;gap:6px;justify-content:center;text-align:center}
  .foot-left{align-items:center}
  .beian-wrap{align-items:center}
}

/* 手机竖屏（≤640px）：20260921k 起与平板/桌面同构——同一棵树＋捏合缩放/拖拽平移/双击复位，
   旧「方案 A」列表布局整块废弃（树全为矢量，任意倍率不失真，缩放即适配） */
.mobile-list{display:none}
.hint-mobile{display:none}

/* ============ 内页 ============ */
.page{max-width:720px;margin:0 auto;padding:52px 26px 100px}
.page.wide{max-width:1080px}
/* 返回按钮（对齐参考站 return-button：圆框箭头＋文字，悬停反色） */
.btn-back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--ink);border-radius:999px;
  background:var(--card);padding:6px 16px 6px 7px;
  position:relative;
  transition:background .18s ease,color .18s ease,transform .18s ease;
  margin-bottom:34px;
}
/* 硬阴影预铺伪元素，hover 切 opacity（同 node-card 手法） */
.btn-back::after,.page-nav a::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:3px 3px 0 rgba(22,22,22,.25);
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.btn-back .bb-icon{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;border:1px solid currentColor;
}
.btn-back:hover,.btn-back:focus-visible{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn-back:hover::after,.btn-back:focus-visible::after{opacity:1}
.btn-back{outline:none}
.btn-back:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
.page-title{
  font-size:clamp(30px,5vw,44px);font-weight:normal;
  letter-spacing:.08em;line-height:1.25;margin:8px 0 14px;
}
.page-meta{
  font-size:11px;letter-spacing:.14em;color:var(--ink2);
}
.rule{height:1px;background:var(--line);margin:30px 0 36px;position:relative}
.rule::after{
  content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;
  border:1px solid var(--ink);border-radius:50%;background:var(--paper);
}
.page-body p{
  font-size:15.5px;line-height:2;letter-spacing:.04em;
  margin-bottom:1.6em;text-align:justify;text-wrap:pretty;
}
.ph{
  border:1px solid var(--line2);
  min-height:240px;margin:28px 0;
  display:grid;place-items:center;position:relative;
  background:
    linear-gradient(to top right,transparent 49.55%,var(--line) 49.55%,var(--line) 50.45%,transparent 50.45%),
    linear-gradient(to bottom right,transparent 49.55%,var(--line) 49.55%,var(--line) 50.45%,transparent 50.45%),
    var(--card);
}
.ph span{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink2);
  background:var(--paper);padding:6px 12px;border:1px solid var(--line);
}
/* 真实媒体（生成脚本扫描 media/<编号>/ 后注入） */
.page-body .media{
  margin:28px 0;border:1px solid var(--line2);background:var(--card);
  box-shadow:4px 4px 0 rgba(22,22,22,.1);
}
.page-body .media img,.page-body .media video{display:block;width:100%;height:auto}
.page-body .media video{aspect-ratio:16/9;object-fit:contain;background:#0e0e0e}
.page-body .media figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink2);
  padding:9px 12px;border-top:1px solid var(--line);
}
.page-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
}
.page-nav a{
  text-decoration:none;color:var(--ink);
  border:1px solid var(--ink);border-radius:999px;background:var(--card);
  padding:7px 16px;position:relative;
  white-space:nowrap;line-height:17px; /* 行高锁死：字号收缩时按钮高度不变 */
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.page-nav a:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.page-nav a:hover::after{opacity:1}
/* 手机：三按钮等宽三列（盒大小恒定不挤），文字由 app.js fitPageNav 按字数缩放 */
@media (max-width:640px){
  .page-nav{gap:10px}
  .page-nav a{flex:1 1 0;min-width:0;text-align:center;padding-left:8px;padding-right:8px} /* 收窄左右内边距，给自适应文字腾空间 */
}

/* 终端页（交互作品体验） */
.crt{border:3px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 rgba(22,22,22,.16)}
.crt-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;border-bottom:3px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  background:var(--ink);color:var(--paper);
}
.crt-screen{padding:22px 20px;font-family:var(--mono);font-size:13px;line-height:2}
.crt-screen .head{color:var(--ink2);margin-bottom:12px}
.crt-row{
  display:flex;gap:14px;align-items:baseline;
  border-bottom:1px dashed var(--line2);padding:6px 0;
}
.crt-row:last-of-type{border-bottom:none}
.crt-row .no{color:var(--ink2);font-size:11px;letter-spacing:.1em}
.crt-row a{margin-left:auto;text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:11px;background:var(--card);transition:background .15s ease,color .15s ease}
.crt-row a:hover{background:var(--ink);color:var(--paper)}
.cursor{display:inline-block;width:8px;height:15px;background:var(--ink);vertical-align:-2px;animation:pulse 1s steps(2) infinite}

/* 简历页 */
.cv{border:1px solid var(--ink);background:var(--card);padding:40px 38px;box-shadow:6px 6px 0 rgba(22,22,22,.12)}
.cv h2{font-weight:normal;font-size:26px;letter-spacing:.2em;margin-bottom:6px}
.cv .cv-line{font-size:11px;letter-spacing:.14em;color:var(--ink2);margin-bottom:26px}
.cv h3{
  font-family:var(--mono);font-size:11px;font-weight:normal;letter-spacing:.3em;
  color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:6px;margin:24px 0 12px;
}
.cv p{font-size:14px;line-height:1.9;letter-spacing:.04em}
.cv .todo{color:var(--ink2)}

/* 作品索引＝图片卡片网格（对齐参考站 works-grid） */
.works-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:30px 26px;
}
.work-card{text-decoration:none;color:var(--ink);display:block}
.wc-img{
  aspect-ratio:1/1.15;border:1px solid var(--ink);background:var(--card);
  display:grid;place-items:center;position:relative;
  transition:transform .24s cubic-bezier(.25,.9,.3,1);
}
/* 阴影走伪元素 opacity，不动 box-shadow（丝滑） */
.wc-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:5px 5px 0 var(--ink);
  opacity:0;transition:opacity .24s ease;
}
.work-card:hover .wc-img,.work-card:focus-visible .wc-img{
  transform:translateY(-4px);
}
.work-card:hover .wc-img::after,.work-card:focus-visible .wc-img::after{opacity:1}
.wc-img svg{width:62%;height:auto;opacity:.9}
.wc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wc-no{
  position:absolute;top:9px;left:11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink2);
}
.wc-ph{
  position:absolute;bottom:9px;right:11px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--line2);
}
.work-card-meta{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 2px 0;font-size:13.5px;letter-spacing:.05em;
}
.work-card-meta .wc-t em{
  font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--ink2);
}
.work-card-meta svg{flex:none;color:var(--ink2);transition:color .18s ease,transform .18s ease}
.work-card:hover .work-card-meta svg{color:var(--ink);transform:translate(2px,-2px)}
.pdf-link{
  color:var(--ink);text-decoration:none;border:1px solid var(--ink);border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;padding:3px 12px;background:var(--card);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.pdf-link:hover{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 rgba(22,22,22,.25)}

/* ============ 联系方式弹层 ============ */
.sheet{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,22,22,.34);
  opacity:0;visibility:hidden;
  transition:opacity .24s ease,visibility 0s .24s;
  padding:24px;
}
.sheet.open{opacity:1;visibility:visible;transition:opacity .24s ease}
.panel{
  background:var(--card);border:1px solid var(--ink);
  box-shadow:8px 8px 0 rgba(22,22,22,.28);
  width:min(560px,100%);max-height:82vh;overflow:auto;
  padding:26px 30px 30px;position:relative;
  transform:translateY(10px);transition:transform .24s ease;
}
.sheet.open .panel{transform:translateY(0)}
/* 关闭钮＝「返回」同款胶囊（圆圈 × 图标＋文字，悬停反色），联系/简历浮层右上角 */
.panel-close{
  position:absolute;top:14px;right:16px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-decoration:none;color:var(--ink);cursor:pointer;
  background:var(--card);border:1px solid var(--ink);border-radius:999px;
  padding:4px 14px;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.panel-close:hover{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 rgba(22,22,22,.25)}
.panel h2{
  font-weight:normal;font-size:20px;letter-spacing:.24em;margin-bottom:4px;
}
.panel .sub{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink2);margin-bottom:18px}
.contact-line{display:flex;gap:16px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.04em}
.contact-line .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink2);min-width:64px;padding-top:3px}
.contact-line a{border:1px solid var(--ink);border-radius:999px;padding:2px 12px;text-decoration:none;background:var(--card);transition:background .15s ease,color .15s ease}
.contact-line a:hover{background:var(--ink);color:var(--paper)}
.contact-note{font-family:var(--mono);font-size:10px;color:var(--ink2);letter-spacing:.1em;margin-top:18px}

/* 简历浮层（首页/任意页点简历＝页内打开，不跳新页，对齐参考站 avatar-button） */
.panel-cv{width:min(680px,100%)}
.panel-cv .cv{box-shadow:none;margin-top:14px}

/* ===== 简历＝左侧抽屉（点头像从浏览器左侧滑出，非居中窗） ===== */
.sheet-drawer{justify-content:flex-start;align-items:stretch;padding:0}
.drawer{
  width:min(560px,94vw);height:100%;overflow:auto;position:relative;
  background:var(--card);border-right:1px solid var(--ink);
  box-shadow:8px 0 24px rgba(22,22,22,.18);
  transform:translateX(-100%);transition:transform .28s ease;
  padding:60px 30px 40px;
}
.sheet-drawer.open .drawer{transform:translateX(0)}
.drawer .panel-close{position:absolute;top:14px;right:16px;z-index:2}

/* ===== 联系方式＝右侧抽屉（点头像旁的邮箱图标从浏览器右侧滑出） ===== */
.sheet-drawer-right{justify-content:flex-end;align-items:stretch;padding:0}
.drawer-right{
  width:min(420px,94vw);
  border-right:none;border-left:1px solid var(--ink);
  box-shadow:-8px 0 24px rgba(22,22,22,.18);
  transform:translateX(100%);
}
.sheet-drawer-right.open .drawer-right{transform:translateX(0)}

/* 档案式简历（对齐参考站电子简历：头部左右分栏 → 往下通栏竖向流式） */
.cv-archive{border:none;background:transparent;padding:0;box-shadow:none}
.cv-hero{display:flex;gap:22px;align-items:center;margin-bottom:26px}
.cv-portrait{
  flex:0 0 38%;max-width:190px;border:1px solid var(--ink);border-radius:8px;
  background:var(--paper);padding:14px 10px 8px;text-align:center;
  box-shadow:4px 4px 0 rgba(22,22,22,.10);
}
.cv-portrait svg{width:100%;height:auto;display:block}
.cv-portrait-tag{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--ink2);margin-top:6px}
.cv-id{flex:1;min-width:0;padding-top:0;padding-left:10px}
.cv .cv-tag{font-family:var(--mono);font-size:8px;letter-spacing:.34em;color:var(--ink2);margin-bottom:14px}
.cv .cv-name{font-weight:normal;font-size:34px;letter-spacing:.05em;line-height:1.12;margin-bottom:9px}
.cv .cv-alias{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink2);margin-bottom:12px}
.cv .cv-meta{font-size:10.5px;letter-spacing:.08em;color:var(--ink2);margin-top:14px}
.cv-intro{margin-top:22px;margin-bottom:26px}
.cv .cv-title,.cvp .cv-title{font-weight:normal;font-size:21px;letter-spacing:.12em;margin-bottom:12px;color:var(--ink);border-bottom:none;padding-bottom:0}
.cv .cv-sub,.cvp .cv-sub{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--ink2);margin-bottom:24px}
.cv-intro p{font-size:13px;line-height:1.95;letter-spacing:.03em;margin-bottom:14px;color:#4A473F}
.cv-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.cv-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);border:1px solid var(--ink);border-radius:10px;
  box-shadow:3px 3px 0 rgba(22,22,22,.12);
  padding:13px 18px;font-size:14px;letter-spacing:.08em;
  text-decoration:none;color:var(--ink);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.cv-btn:hover{background:#FFFFFF;color:var(--ink);transform:translateY(-1px);box-shadow:4px 4px 0 rgba(22,22,22,.2)}
.cv-btn-ic{font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.cv-toc{border-top:1px solid var(--line);margin-bottom:26px}
.cv-toc a{
  display:flex;align-items:center;gap:14px;padding:13px 4px;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:14px;letter-spacing:.08em;
  transition:background .15s ease,padding-left .15s ease;
}
.cv-toc a:hover{background:rgba(22,22,22,.04);padding-left:10px}
.cv-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink2);min-width:24px}
.cv-item{flex:1}
.cv-arr{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.cv-sec{margin-bottom:24px}
.cv-sec h3{font-weight:normal;font-size:15px;letter-spacing:.16em;margin-bottom:8px}
.cv-sec p{font-size:13px;line-height:1.9;letter-spacing:.04em}
@media (max-width:640px){
  .cv-hero{flex-direction:column}
  .cv-portrait{max-width:150px}
  .drawer{padding:56px 22px 36px}
}
#spa-root{display:contents}

/* ============ 交互作品体验＝页内「电脑设备」卡片（对齐参考站 computer-sheet） ============
   电脑是一台居中的圆角设备卡片：深色机身 bezel 包住浅灰屏幕，浮在暗化的页面之上，
   与后面的 HTML 页面一眼区分，又在同一黑白体系内（深机身／浅屏幕／白窗口三档）。 */
.sheet-desktop{background:rgba(22,22,22,.55)} /* 电脑浮层背景比通用弹层更暗，衬出设备 */
.page-desktop{max-width:1100px}
.dk-device{
  width:min(1020px,100%);height:min(680px,80vh);
  background:var(--card); /* 白色机身——与浅色屏幕同系，靠描边与阴影分层 */
  border:1.5px solid var(--ink);border-radius:20px;
  box-shadow:10px 10px 0 rgba(22,22,22,.16);
  display:flex;flex-direction:column;overflow:hidden;
  margin:0 auto;
  padding:8px; /* 四周 bezel 厚度 */
}
.dk-devicebar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:4px 10px 8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink2);
}
.dk-devicebar .panel-close{position:static;top:auto;right:auto}
.dk-devicebar .panel-close:hover{color:var(--paper)}
.dk-holder{flex:1;min-height:0;display:flex;padding:0}
.desktop{
  flex:1;min-width:0;min-height:0;position:relative;
  display:flex;flex-direction:column;
  background:#E9E7E1; /* 浅灰屏幕，嵌在深色机身里 */
  border:none;border-radius:10px;
  overflow:hidden;font-family:var(--mono);
}
.dk-menubar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--card);color:var(--ink);
  padding:8px 14px;font-size:11px;letter-spacing:.18em;
  border-bottom:1px solid var(--ink);
}
.dk-area{
  flex:1;position:relative;overflow:hidden;
  /* 桌面「窗纸」：上浅下深的晨雾渐变＋层叠山丘曲线（铅笔风，与整站矢量一致） */
  background-color:#E8E5DE;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 452 C110 408 210 424 316 442 C430 461 540 414 652 428 C716 436 764 448 800 452' fill='none' stroke='%23161616' stroke-opacity='.16' stroke-width='2'/%3E%3Cpath d='M0 486 C150 452 280 470 420 476 C560 482 680 458 800 472' fill='none' stroke='%23161616' stroke-opacity='.1' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#EFEDE7 0%,#E9E6DF 55%,#DFDBD2 100%);
  background-size:cover,100% 100%;
  background-position:center bottom;
}
.dk-icons{
  position:absolute;top:16px;left:16px;
  display:flex;flex-wrap:wrap;gap:2px;
  max-width:calc(100% - 32px);
}
.dk-icon{
  width:92px;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;border-radius:8px;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink);
  padding:12px 4px;
  transition:background .15s ease,color .15s ease;
}
.dk-icon svg{width:40px;height:40px}
.dk-icon:hover,.dk-icon:focus-visible{background:transparent;outline:none}
/* 悬停不反色——只给文件名加色＋下划线提示 */
.dk-icon:hover span,.dk-icon:focus-visible span{color:#A8791E}
.dk-window{
  position:absolute;min-width:250px;max-width:min(380px,calc(100% - 20px));
  background:var(--card);border:1.5px solid var(--ink);border-radius:8px;
  box-shadow:4px 4px 0 rgba(22,22,22,.18);
  display:none;overflow:hidden;
}
.dk-window.show{display:block}
.dk-titlebar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#D9D4C8;color:var(--ink); /* 桌面背景同色系加深一档 */
  border-bottom:1px solid #C2BCAC;
  padding:7px 12px;font-size:11px;letter-spacing:.16em;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.dk-titlebar:active{cursor:grabbing}
.dk-close{
  background:transparent;border:1px solid var(--ink);color:var(--ink);
  width:20px;height:20px;cursor:pointer;line-height:1;border-radius:4px;
  font-family:var(--mono);font-size:12px;padding:0;flex:none;
  transition:background .15s ease,color .15s ease;
}
.dk-close:hover{background:var(--ink);color:#D9D4C8}
/* 窗口内容区上下留足，窗口不显扁 */
.dk-content{padding:18px 22px 20px;font-size:12px;line-height:2;letter-spacing:.03em}
.dk-content p{margin-bottom:10px}
.dk-content .head{color:var(--ink2)}
.dk-content a{color:var(--ink);text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:11px;background:var(--card);transition:background .15s ease,color .15s ease}
.dk-content a:hover{background:var(--ink);color:var(--paper)}
.dk-content ul{list-style:none}
.dk-content li{border-bottom:1px dashed var(--line2);padding:6px 0;display:flex;gap:12px;align-items:baseline}
.dk-content li .no{color:var(--ink2);font-size:11px}
.dk-content li a{margin-left:auto}
.dk-taskbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--line);color:var(--ink); /* 浅中灰任务栏，与菜单栏近白形成两档 */
  border-top:1px solid var(--ink2);
  padding:8px 14px;font-size:11px;letter-spacing:.14em;
}
.dk-taskbar .dk-hint{color:var(--ink2)}
/* 退出电脑＝「返回树」同款胶囊按钮（有框、悬停反色），全站退出/返回键统一形制 */
.dk-exit{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--card);color:var(--ink);border:1px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  padding:5px 14px;cursor:pointer;border-radius:999px;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.dk-exit:hover{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 rgba(22,22,22,.25)}
.dk-clock{font-variant-numeric:tabular-nums}
/* 浮层壳：设备卡片居中，四周露出页面（卡片 013 点击时注入） */
@media (max-width:640px){
  .dk-device{height:min(86vh,640px)}
  .dk-holder{padding:8px}
  .dk-menubar span:nth-child(2){display:none}
  .dk-window{width:min(320px,92%);min-width:0} /* 手机窗口窄一档，位置仍由 JS 固定居中 */
  .dk-icon{width:78px}
  .dk-taskbar .dk-hint{display:none}
}

/* ===== 完整简历页（read/cv.html，对齐参考站 cv.html：轻字重、灰度层级、日期列） ===== */
.page.cvpage{max-width:1100px;padding-top:40px}
.cvp{font-size:14px}
.cvp-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:18px}
.cvp-back{color:var(--ink2);text-decoration:none;font-size:12px;letter-spacing:.02em;font-family:var(--serif);transition:color .15s ease}
.cvp-back:hover{color:var(--ink)}
.cvp-hero{position:relative;padding:55px 0 40px 238px;min-height:340px}
.cvp-portrait{position:absolute;left:0;top:55px;width:200px;border-radius:3px;box-shadow:3px 5px 12px rgba(22,22,22,.08);background:var(--card)}
.cvp-portrait svg{display:block;width:100%;height:auto}
.cvp-name{font-size:48px;font-weight:400;letter-spacing:.08em;margin:0;line-height:1.3;color:var(--ink)}
.cvp-alias{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ink2);margin:16px 0 0}
.cvp-role{font-size:20px;font-weight:400;color:var(--ink);margin:29px 0 4px}
.cvp-practice{font-size:13px;letter-spacing:.12em;color:var(--ink2);margin:0 0 24px}
.cvp-contact{font-size:12px;color:var(--ink2);margin:0}
.cvp-contact a{color:var(--ink2)}
.cvp-contact a:hover{color:var(--ink)}
.cvp-actions{display:flex;gap:24px;margin:0 0 6px}
.cvp-actions .cv-btn{display:flex;width:100%;box-sizing:border-box;padding:11px 12px;font-size:12.5px;letter-spacing:.04em}
.cvp-actions .cv-btn-ic{font-size:10px}
.cvp-body{display:grid;grid-template-columns:176px minmax(0,1fr);gap:48px}
.cvp-side{position:sticky;top:28px;align-self:start}
.cvp-nav{padding:14px 0 0}
.cvp-nav a{display:block;font-size:11px;color:var(--ink2);text-decoration:none;padding:10px 0;letter-spacing:.04em;transition:color .15s ease}
.cvp-nav a:hover{color:var(--ink)}
.cvp-no-s{font-family:var(--mono);font-size:10px;letter-spacing:.12em;margin-right:8px}
.cvp-ch{border-top:1px solid var(--line);padding:35px 0 32px;scroll-margin-top:28px}
.cvp-chs .cvp-ch:first-child{border-top:none;padding-top:4px}
.cvp-ch>header{display:flex;gap:22px;align-items:center;margin-bottom:34px}
.cvp-no{
  display:grid;place-items:center;width:47px;height:47px;flex-shrink:0;
  font-family:var(--mono);font-size:22px;color:var(--ink2);
  border-radius:13px;background:var(--card);
  box-shadow:4px 4px 10px rgba(22,22,22,.07),-4px -4px 10px rgba(255,255,255,.9);
}
.cvp-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ink2);margin:0 0 6px}
.cvp-ch h2{font-size:26px;font-weight:400;letter-spacing:.03em;margin:0;color:var(--ink)}
.cvp-entry.dated{display:grid;grid-template-columns:112px minmax(0,1fr);gap:15px;margin-bottom:24px}
.cvp-entry.dated:last-child{margin-bottom:0}
.cvp-entry .date{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink2);line-height:1.7;padding-top:3px}
.cvp-entry h3{font-size:13.5px;font-weight:600;letter-spacing:.03em;margin:0 0 7px;color:#6E6A5E}
.cvp-entry p:not(.date){font-size:13px;line-height:1.95;letter-spacing:.02em;color:#4A473F;margin:0}
.cvp-entry p a{color:var(--ink2)}
@media (max-width:760px){
  .cvp-hero{padding:35px 0 8px;min-height:0}
  .cvp-portrait{position:relative;left:auto;top:auto;float:right;width:clamp(120px,35vw,170px);margin:0 0 20px 16px}
  .cvp-name{font-size:36px}
  .cvp-role{font-size:18px;margin-top:22px;clear:both;padding-top:8px}
  .cvp-body{display:block}
  .cvp-side{position:static;margin-bottom:6px}
  .cvp-nav{position:static;display:flex;flex-wrap:wrap;gap:0 18px;padding:8px 0 26px}
  .cvp-nav a{font-size:10.5px}
  .cvp-entry.dated{display:block}
  .cvp-entry .date{display:block;margin:0 0 5px;padding-top:0}
  .cvp-ch{padding:30px 0 26px;scroll-margin-top:20px}
  .cvp-ch>header{gap:18px}
  .cvp-ch h2{font-size:23px}
  .cvp-no{width:42px;height:42px;font-size:20px}
}
@media print{
  .cvp-nav,.cvp-actions,.cvp-back{display:none}
  .cvp-ch{break-before:page}
  .cvp-ch:first-child{break-before:auto}
  .cvp-entry{break-inside:avoid}
  .cvp-no,.cvp-portrait{box-shadow:none;border:1px solid var(--line)}
}

/* ===== works 非对称错落网格（12 列，宽窄交替＋下沉错落，参考站布局） ===== */
.works-grid{grid-template-columns:repeat(12,1fr);gap:38px 26px;align-items:start}
.work-card:nth-child(6n+1){grid-column:1/7}
.work-card:nth-child(6n+1) .wc-img{aspect-ratio:4/3}
.work-card:nth-child(6n+2){grid-column:8/13;margin-top:64px}
.work-card:nth-child(6n+2) .wc-img{aspect-ratio:1/1.05}
.work-card:nth-child(6n+3){grid-column:2/6;margin-top:10px}
.work-card:nth-child(6n+3) .wc-img{aspect-ratio:3/3.6}
.work-card:nth-child(6n+4){grid-column:7/12;margin-top:56px}
.work-card:nth-child(6n+4) .wc-img{aspect-ratio:4/3}
.work-card:nth-child(6n+5){grid-column:1/8}
.work-card:nth-child(6n+5) .wc-img{aspect-ratio:3/2}
.work-card:nth-child(6n+6){grid-column:9/13;margin-top:72px}
@media (max-width:760px){
  .works-grid{gap:28px}
  .work-card{grid-column:1/-1 !important;margin-top:0 !important}
  .work-card .wc-img{aspect-ratio:4/3 !important}
}

/* ===== 彩蛋：树根旁斜放的信箱卡片（点击写信，交互语言同作品卡片） =====
   磁吸：--mx/--my 由 app.js 随鼠标写入，微微吸向光标；离开后带一点回弹归位 */
.mail-egg{
  position:absolute;left:56%;top:93%;width:9.2cqw;z-index:2;cursor:pointer;
  transform:translate(calc(-50% + var(--mx,0px)),calc(-50% + var(--my,0px))) rotate(-9deg);
  transform-origin:50% 100%; /* 以底边为轴——着地感：悬停抬起像被拎起，不悬浮 */
  filter:drop-shadow(2px 2px 0 rgba(22,22,22,.12));
  transition:transform .5s cubic-bezier(.22,1.36,.36,1),filter .22s ease;
}
.mail-egg.magnet{transition:transform .12s ease-out,filter .22s ease}
.mail-egg svg{width:100%;height:auto;display:block}
.mail-egg:hover,.mail-egg:focus-visible{
  transform:translate(calc(-50% + var(--mx,0px)),calc(-50% + var(--my,0px))) rotate(-3deg) translateY(-8%);
  filter:drop-shadow(3px 6px 0 rgba(22,22,22,.18));
}
/* 窄屏信封：手机也是完整树场景（20260921k 起），信封照常挂在树根——
   旧规则（≤760px display:none）是列表布局时代遗留，已删 */
/* ===== 边加载边显：擦出进度＝真实下载进度（app.js 写 clip-path）；视频整段入 blob 后可拖 =====
   图片海报帧：figure 垫缩略图（原生即画，同视频 poster），img 保持透明让垫图透出；
   大图擦出/缓存命中后盖在上面——任何时刻框内都有内容，不再闪 */
/* 垫图几何＝与图片本体对齐：no-repeat 必须显式写（上面的 #EDEBE6 简写会把 repeat 重置回来），
   100% auto + top center 避免 cover 因 caption 条撑高盒子而横向裁切、大图落地时外撑 */
.page-body .media{background:#EDEBE6;background-repeat:no-repeat;background-size:100% auto;background-position:top center}
.page-body .media img{background:transparent;transition:none}
.media{position:relative}
/* ===== 视频播放按钮（20260921l）：写在 HTML 里的居中圆形播放键——第一帧即可见，点击才取流播放 ===== */
.page-body .media.media-video{background-color:#0e0e0e;background-size:cover;background-position:center}
.page-body .media.media-video video{background:transparent}
.media-video .v-wrap{position:relative}
.media-video .v-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(22,22,22,.45);
  color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background .18s ease,transform .18s ease;
}
.media-video .v-play svg{width:24px;height:24px;fill:currentColor;margin-left:3px}
.media-video .v-play:hover{background:rgba(22,22,22,.72);transform:translate(-50%,-50%) scale(1.06)}
.media-video.playing .v-play{display:none}
/* 缓冲圈：点击播放后、blob 取回前显示（JS 挂 .buffering，play/失败时摘除） */
.media-video.buffering::after{
  content:"";position:absolute;left:50%;top:50%;
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:vspin .8s linear infinite;pointer-events:none;
}
@keyframes vspin{to{transform:rotate(360deg)}}

/* ===== SPA 取页彻底失败：站内错误浮层（重试/回首页），不裸跳原始 URL ===== */
#nav-fail{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(237,235,230,.94);
}
#nav-fail.show{display:grid}
#nav-fail .nf-card{text-align:center;font-family:var(--mono)}
#nav-fail p{font-size:12px;letter-spacing:.28em;color:var(--ink2);margin:0 0 18px}
#nav-fail button{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  border:1px solid var(--ink);border-radius:999px;background:var(--card);
  color:var(--ink);padding:8px 22px;cursor:pointer;margin:0 5px;
  transition:background .18s ease,color .18s ease;
}
#nav-fail button:hover{background:var(--ink);color:var(--paper)}