/* 钟任飞个人站 · 共用样式：三墨一纸（纸 / 暖橙 / 冷蓝 / 深墨），所有页面共用这一份 */
/* tokens:start — 由三墨一纸 tokens.json 生成（三墨一纸同步/sync.py），别手改 */
:root{
  --paper:#f0e9da;
  --paper-2:#e6dcc8;
  --ink:#26252e;
  --ink-soft:#5f5b66;
  --ink-faint:#9a9490;
  --warm:#e8552a;
  --cool:#3b6f9e;
  --warm-hl:rgba(232,85,42,.45);
  --warm-hl-on:rgba(232,85,42,.55);
  --ink-line:rgba(38,37,46,.22);
  --ink-line-strong:rgba(38,37,46,.3);
  --ink-wash:rgba(38,37,46,.045);
  --offset-warm:-3px 3px 0 0 #e8552a;
  --offset-cool:-3px 3px 0 0 #3b6f9e;
  --offset-warm-sm:-2px 2px 0 0 #e8552a;
  --offset-cool-sm:-2px 2px 0 0 #3b6f9e;
  --offset-cool-soft:-3px 3px 0 0 rgba(59,111,158,.4);
  --offset-warm-soft:-3px 3px 0 0 rgba(232,85,42,.6);
  --offset-thumb:-3px 3px 0 0 rgba(59,111,158,.5);
  --ghost-warm:3px -3px 0 0 rgba(232,85,42,.25);
  --ghost-cool:-3px 3px 0 0 rgba(59,111,158,.28);
  --w:1080px;
  --w-narrow:760px;
  --font-body:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --font-display:"ZCOOL QingKe HuangYou","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","Liberation Mono",monospace;
}
/* tokens:end */
:root{
  /* 颜色、阴影、字体栈、宽度来自上面 tokens 区块（tokens.json 生成，别手改）；这里只留它们的别名和由它们拼出来的图案 */
  --body:var(--font-body); --display:var(--font-display); --mono:var(--font-mono);
  --dot-warm:radial-gradient(circle,var(--warm) 1.25px,transparent 1.55px);
  --dot-cool:radial-gradient(circle,var(--cool) 1.15px,transparent 1.45px);
  --dot-ink:radial-gradient(circle,var(--ink) 1.0px,transparent 1.3px);
  --hl:linear-gradient(transparent 62%,var(--warm-hl) 62%);
  --hl-on:linear-gradient(transparent 40%,var(--warm-hl-on) 40%);
}
*{box-sizing:border-box}
html{color-scheme:light; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.85;
  -webkit-font-smoothing:antialiased; overflow-wrap:anywhere;
  padding:0 20px 24px; position:relative;
}
body::after{ /* 纸颗粒 */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  background-image:var(--grain); opacity:.9; mix-blend-mode:multiply;
}
body.narrow{--w:var(--w-narrow)}
a{color:var(--ink); text-decoration:none; background:var(--hl)}
a:hover{background:var(--hl-on)}
a:focus-visible,button:focus-visible,video:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid var(--cool); outline-offset:3px}
p,h1,h2,h3,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
canvas.rule{display:block; width:100%; height:10px}
[id]{scroll-margin-top:12px}
.wrap{max-width:var(--w); margin:0 auto}
.mono{font-family:var(--mono)}

/* 点得到的东西至少 44px 高：外层撑高度，里层才画荧光笔 */
.hit{display:inline-flex; align-items:center; min-height:44px; margin-block:-7px; background:none}
.hit:hover{background:none}
.hit span{background:var(--hl)}
.hit:hover span{background:var(--hl-on)}


/* 标题字体子集里没有的字（汉字、中文标点）：用设备自带的半粗黑体顶上，字重不至于差太多；只读设备本地字体，不联网 */
@font-face{font-family:"ZCOOL QingKe HuangYou"; font-weight:400; font-style:normal;
  src:local("PingFang SC Semibold"),local("PingFangSC-Semibold"),local("Hiragino Sans GB W6"),local("Microsoft YaHei Bold"),local("Noto Sans CJK SC Bold"),local("Source Han Sans SC Bold");
  unicode-range:U+3000-3009,U+300E-303F,U+4E01-4E08,U+4E0A,U+4E0C,U+4E0F-4E1B,U+4E1D-4E23,U+4E25-4E29,U+4E2B-4E2C,U+4E2E-4E47,U+4E49-4E8A,U+4E8C-4E9A,U+4E9C-4EA3,U+4EA5-4EA6,U+4EA8-4EAB,U+4EAD,U+4EAF-4EB9,U+4EBB-4EBF,U+4EC1-4EE2,U+4EE4-4EFA,U+4EFC,U+4EFE-4F33,U+4F35-4F45,U+4F47-4F5B,U+4F5D-4FE0,U+4FE2-5059,U+505B-50CE,U+50D0-513E,U+5140-5176,U+5178-5184,U+5186-51D0,U+51D2-51F9,U+51FB-5211,U+5213-5235,U+5238-529F,U+52A2-52A7,U+52AA-5354,U+5356-536F,U+5371-539E,U+53A0-53D0,U+53D2-53D5,U+53D7-53E4,U+53E6-53E9,U+53EB-53EF,U+53F1-53F6,U+53F8-5407,U+5409-540C,U+540E-542B,U+542D-54C0,U+54C2-5545,U+5547-559B,U+559D-5667,U+5669-56DA,U+56DC-56DD,U+56DF-56FC,U+56FF-5727,U+5729-578A,U+578C-57CA,U+57CC-586A,U+586C-58A7,U+58A9-5903,U+5905-5906,U+5908-5915,U+5917-5928,U+592A-5933,U+5935-59CA,U+59CC-59D3,U+59D5-5B53,U+5B55-5B56,U+5B58-5B69,U+5B6B-5B97,U+5B99-5BA1,U+5BA3-5BB5,U+5BB7-5BB8,U+5BBA-5C1C,U+5C1E-5C70,U+5C72-5DE6,U+5DE8-5DFD,U+5DFF-5E25,U+5E27-5E54,U+5E56-5E72,U+5E74-5EA5,U+5EA8-5EF9,U+5EFB-5EFF,U+5F01-5F14,U+5F16-5F1F,U+5F21-5F54,U+5F56-5F87,U+5F89-600D,U+600F-620E,U+6212-6217,U+6219-624A,U+624C-6252,U+6254-6257,U+6259-6266,U+6268-6278,U+627A-627D,U+627F-6289,U+628B-6292,U+6294-6295,U+6297-62A4,U+62A6-63A6,U+63A8-63CF,U+63D1-6443,U+6445-64CD,U+64CF-6558,U+655A-656F,U+6571-6586,U+6588-65E4,U+65E6-65F5,U+65F7-6679,U+667B-6708,U+670A-672E,U+6730-6739,U+673B-6764,U+6766-677D,U+6780-6806,U+6809-6837,U+6839-6847,U+6849-68AF,U+68B1-699B,U+699D-6B20,U+6B23-6B61,U+6B63-6B64,U+6B66-6BDA,U+6BDC-6CA0,U+6CA2-6D4E,U+6D50-6D76,U+6D78-6E28,U+6E2A-6E37,U+6E39-6E8F,U+6E91-7074,U+7076-70B8,U+70BA-70EC,U+70EE-7166,U+7168-7246,U+7249-724B,U+724D-72D6,U+72D8-72EB,U+72ED-732A,U+732C-73A8,U+73AA-751E,U+7520-7527,U+7529-7534,U+7536-753A,U+753C-767A,U+767C-7683,U+7685-770A,U+770C-771E,U+7720-773F,U+7741-777E,U+7780-77EC,U+77EE-7800,U+7802-7A0A,U+7A0C-7A3E,U+7A40-7A79,U+7A7B-7ACA,U+7ACC-7AD8,U+7ADA-7ADD,U+7ADF-7AE4,U+7AE6-7B13,U+7B15-7B55,U+7B57-7B7D,U+7B7F-7C7A,U+7C7C-7CFA,U+7CFC-7D21,U+7D23-7EB7,U+7EB9-7EBE,U+7EC0-7EC2,U+7EC4-7ED8,U+7EDA-7F15,U+7F17-7F50,U+7F52-7F8D,U+7F8F-8002,U+8004-8053,U+8055-8088,U+808A-80FC,U+80FE-81C1,U+81C3-81E9,U+81EB-821D,U+821F-8271,U+8273-8362,U+8364-8424,U+8426-8867,U+8869-897E,U+8980-89C3,U+89C5-89C7,U+89C9-8BA0,U+8BA2-8BA8,U+8BAA-8BBD,U+8BBF-8BC0,U+8BC2-8BC3,U+8BC5-8BC9,U+8BCB-8BD4,U+8BD6-8BDC,U+8BDE-8BEC,U+8BEE-8C45,U+8C47-8D76,U+8D78-8DD0,U+8DD2-8DDE,U+8DE0-8DF2,U+8DF4-8EAA,U+8EAC-8F65,U+8F67-8FBD,U+8FBF-8FD0,U+8FD2-8FD7,U+8FDA-9000,U+9002-90E7,U+90E9-91CB,U+91CD-91CE,U+91D0-949E,U+94A0-94FF,U+9501-95F3,U+95F5-968E,U+9690-97F2,U+97F4-9874,U+9876-98DD,U+98DF-9995,U+9997-9A7D,U+9A7F-9A8B,U+9A8D-9A90,U+9A92-9AA7,U+9AA9-9ABB,U+9ABD-9ED0,U+9ED2-9FFF,U+FF00-FF07,U+FF0A-FF0B,U+FF0D-FFEF}

/* ---------- 顶栏：左边名字回首页，右边三个文字链接，每页一样 ---------- */
.top{max-width:var(--w); margin:0 auto; padding-top:6px; display:flex; justify-content:space-between; align-items:center; gap:8px}
.top .home{display:inline-flex; align-items:center; min-height:44px; background:none; color:var(--ink)}
.top .home b{font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:.06em}
.top nav{display:flex; align-items:center; margin-right:-9px}
.top nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 9px; background:none; font-size:15px; font-weight:500; letter-spacing:.06em}
.top nav a span{background:linear-gradient(transparent 62%,transparent 62%)}
.top nav a:hover span,.top nav a[aria-current="page"] span{background:var(--hl)}

/* 面包屑：只在案例页，一行 */
.crumb{max-width:var(--w); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft)}
.crumb a{display:inline-flex; align-items:center; min-height:44px; background:none; color:var(--ink)}
.crumb a span{background:var(--hl)}
.crumb i{font-style:normal; padding:0 8px}

/* ---------- 标题 ---------- */
.eyebrow{font-family:var(--mono); font-size:12px; line-height:1.6; letter-spacing:.14em; color:var(--warm); margin:0 0 6px}
.hd{font-family:var(--display); font-weight:400; line-height:1.15; letter-spacing:.04em; text-wrap:balance; position:relative; display:inline-block}
.hd::before{content:""; position:absolute; left:-8px; right:-8px; top:52%; height:40%; z-index:-1;
  background-image:var(--dot-cool); background-size:8px 8px; opacity:.85; box-shadow:var(--ghost-warm)}
h1.hd{font-size:clamp(46px,13vw,64px); line-height:1}
h2.hd{font-size:30px}
.ttl{font-family:var(--display); font-weight:400; font-size:30px; line-height:1.22; letter-spacing:.03em; text-wrap:balance}
.lede{margin-top:10px; font-size:clamp(17px,4.85vw,19px); font-weight:500; line-height:1.6; max-width:30em}

/* 章头：标题 + 件数 + 一枚猫章 */
.ch{max-width:var(--w); margin:38px auto 0; position:relative}
.pagehead{margin-top:12px}
.name{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 18px}
.name .who{font-family:var(--display); font-size:28px; line-height:1.3; letter-spacing:.04em}
.ch .head{display:grid; grid-template-columns:1fr 84px; gap:16px; align-items:end}
.ch .sub{font-family:var(--mono); font-size:12.5px; line-height:1.6; letter-spacing:.06em; color:var(--ink-soft); margin-top:8px}
.ch canvas.stamp{display:block; width:84px; aspect-ratio:1/1; justify-self:end}
.ch .sec-lede{margin-top:12px; max-width:38em; line-height:1.72}

/* ---------- 名片（首页） ---------- */
.hero{--cat:clamp(150px,44vw,300px); max-width:var(--w); margin:14px auto 0; position:relative;
  display:grid; grid-template-columns:var(--cat) minmax(0,1fr); gap:0 16px; align-items:center;
  grid-template-areas:"cat who" "lede lede" "cta cta"}
.hero .stage{grid-area:cat; position:relative; margin:0 3px 3px 0}
.hero canvas.cat{display:block; width:100%; aspect-ratio:1/1; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.hero .stage::before{content:""; position:absolute; inset:0; transform:translate(var(--rx,-3px),var(--ry,3px)); border:3px solid var(--rc,var(--cool)); pointer-events:none; opacity:.55}
.hero .stage::after{content:""; position:absolute; inset:0; border:3px solid var(--ink); pointer-events:none}
.hero .cap{position:absolute; left:8px; bottom:7px; font-family:var(--mono); font-size:11px; color:var(--ink-soft); background:var(--paper); padding:0 5px; line-height:1.6}
.hero .cap b{color:var(--warm); font-weight:500}
.hero .who{grid-area:who; min-width:0}
.hero h1{position:relative; display:inline-block; margin:0 0 8px; font-family:var(--display); font-weight:400; font-size:clamp(44px,12.4vw,58px); line-height:1; letter-spacing:.04em}
.hero h1 .blk{position:relative; z-index:1}
.hero h1::before{content:""; position:absolute; left:-8px; right:-8px; top:52%; height:38%; z-index:0;
  background-image:var(--dot-warm); background-size:7px 7px; opacity:.9; box-shadow:var(--ghost-cool)}
.hero .facts{font-size:15px; line-height:1.55; font-weight:500}
.hero .facts span{display:block}
.hero .facts .sep{display:none}
.hero .lede{grid-area:lede; margin-top:18px}
.hero .cta{grid-area:cta; display:flex; flex-wrap:wrap; gap:12px 14px; margin-top:14px}
.hero .cta a{display:inline-flex; align-items:center; min-height:46px; padding:6px 22px; font-family:var(--display); font-size:21px; letter-spacing:.08em;
  background:var(--paper); border:2px solid transparent}
/* 戳猫冒的气泡：盖在名片下面那行字上，8 秒后收起 */
.hero .say{position:absolute; z-index:3; top:calc(var(--cat) + 14px); left:0; right:0; max-width:420px; margin:0; padding:8px 12px 9px;
  background:var(--paper); border:1.5px solid var(--ink); box-shadow:var(--offset-warm-sm);
  font-size:14.5px; line-height:1.6; color:var(--ink); transform-origin:30px 0; animation:say .18s ease-out}
.hero .say[hidden]{display:none}
.hero .say::before{content:""; position:absolute; left:40px; top:-7px; width:11px; height:11px; background:var(--paper);
  border:solid var(--ink); border-width:1.5px 0 0 1.5px; transform:rotate(45deg)}
.hero .say a{display:inline-flex; align-items:center; min-height:44px; margin:-10px 0; padding:0 4px; font-family:var(--mono); font-size:12.5px; white-space:nowrap; background:none}
.hero .say a span{background:var(--hl)}
@keyframes say{from{opacity:0; transform:translateY(-4px) scale(.94)}}

.sec{max-width:var(--w); margin:26px auto 0}
.sec > .hd{margin-bottom:6px}

/* ---------- 卡片：首页「先看这 3 件」和作品总览的精选卡 ---------- */
.cards{margin-top:12px}
.minis{margin-top:8px}
.card{display:grid; grid-template-columns:116px minmax(0,1fr); gap:2px 12px; align-items:start; padding:14px 0; position:relative; background:none; color:var(--ink)}
a.card:hover{background:none}
.card .tx{display:grid; gap:3px; align-content:start; min-width:0}
.card .pic{display:block; width:116px; background:none; border:2px solid var(--ink); box-shadow:var(--offset-warm-soft); overflow:hidden}
.card .pic img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:var(--pos,50% 50%); background:var(--paper-2)}
.card .t{display:block; font-family:var(--display); font-size:21px; line-height:1.25; letter-spacing:.03em; text-wrap:balance}
a.card:hover .t{background-image:var(--dot-cool); background-size:7px 7px}
.card .r{display:block; font-size:15px; line-height:1.6}
.card .m{display:block; font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--ink-soft)}
.card .m b{font-weight:500; color:var(--ink)}
.card .tags{margin-top:2px}
.card .go{margin-top:4px; justify-self:start}
.card canvas.rule{position:absolute; left:0; right:0; bottom:-5px}
.numfig{display:flex; align-items:center; justify-content:center; gap:6px; aspect-ratio:4/3; background:var(--paper-2); font-family:var(--display); font-size:28px; line-height:1}
.numfig i{font-style:normal; font-family:var(--mono); font-size:16px; color:var(--warm)}

/* 限定语小牌：仿真 / 作品集版 / 自述 / 演示站 / 建设中，不展开也能看到 */
.tags{display:flex; flex-wrap:wrap; gap:6px 8px}
.tags > *{font-size:13.5px; line-height:1.45; color:var(--ink); border:1.5px solid transparent; padding:1px 8px; font-weight:500}

/* 三条线入口（首页） */
.lanes{margin-top:8px}
.lanes a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; align-items:baseline; padding:12px 0; background:none; color:var(--ink)}
.lanes a:hover{background:none}
.lanes a:hover b{background-image:var(--dot-cool); background-size:7px 7px}
.lanes b{font-family:var(--display); font-weight:400; font-size:24px; line-height:1.3; letter-spacing:.04em; padding:0 6px; margin-left:-6px; justify-self:start}
.lanes .n{font-family:var(--mono); font-size:12.5px; color:var(--warm); white-space:nowrap}
.lanes .d{grid-column:1 / -1; font-size:14.5px; line-height:1.6; color:var(--ink-soft)}
.lanes li{position:relative}
.lanes li canvas.rule{position:absolute; left:0; right:0; bottom:-5px}

/* ---------- 作品总览：目录 + 小卡（点开原地展开） ---------- */
.toc{margin-top:8px}
.toc a{display:flex; align-items:baseline; gap:8px; min-height:46px; padding:9px 0; background:none; color:var(--ink)}
.toc a:hover{background:none}
.toc a:hover .t{background-image:var(--dot-cool); background-size:7px 7px}
.toc .n{flex:none; width:30px; font-family:var(--mono); font-size:12px; color:var(--warm)}
.toc .t{flex:none; font-family:var(--display); font-size:21px; line-height:26px; letter-spacing:.04em}
.toc a::after{content:""; order:1; flex:1 1 14px; min-width:14px; height:3px; opacity:.6;
  background:radial-gradient(circle,var(--ink) 1px,transparent 1.3px) 0 0 / 7px 3px repeat-x}
.toc .note{order:2; flex:0 1 auto; min-width:0; font-family:var(--mono); font-size:12.5px; line-height:26px; color:var(--ink); white-space:nowrap}
.legend-line{margin-top:10px; max-width:34em; font-size:14.5px; line-height:1.65; color:var(--ink-soft)}
.grp{margin-top:36px; font-family:var(--mono); font-weight:500; font-size:12.5px; letter-spacing:.14em; color:var(--warm)}

details.mini{margin-top:16px; border:2px solid transparent; box-shadow:var(--offset-cool-soft); padding:0 14px; position:relative}
details.mini > summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:start; padding:11px 0 12px}
details.mini > summary::-webkit-details-marker{display:none}
details.mini > summary::after{content:"展开 +"; grid-column:2; grid-row:1; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--warm); line-height:2; white-space:nowrap}
details.mini[open] > summary::after{content:"收起 −"}
details.mini .t{grid-column:1; font-family:var(--display); font-size:20px; line-height:1.3; letter-spacing:.03em; text-wrap:balance}
details.mini .r{grid-column:1 / -1; font-size:15px; line-height:1.6}
details.mini .tags{grid-column:1 / -1; margin-top:4px}
details.mini > .in{display:grid; gap:14px; padding:14px 0 16px; border-top:1.5px solid var(--ink-line)}
details.mini .in .body{margin-top:0}

/* ---------- 案例页 ---------- */
.case-head{margin-top:2px}
.case-head .tags{margin-top:12px}
.blk{margin-top:32px}
.blk h2{font-family:var(--display); font-weight:400; font-size:26px; line-height:1.2; letter-spacing:.04em; position:relative; display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.blk h2 .n{font-family:var(--mono); font-size:13px; color:var(--warm); letter-spacing:.06em}
.blk p + p,.blk p + ul,.blk ul + p{margin-top:10px}
.blk .tags{margin:10px 0}

/* 结果卡：第一屏。做了什么 / 我的角色 / 时间和规模 / 结果或现状 */
.result{margin-top:18px; padding:2px 14px 4px}
.result li{display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding:9px 0; align-items:baseline; line-height:1.62; font-size:15px}
.result li + li{border-top:1.5px dashed var(--ink-line-strong)}
.result li b{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; color:var(--warm); line-height:1.7}
.result li > div > * + *{margin-top:6px}
.result .real{margin-top:6px}
.kv{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--warm)}

/* 空位：统一的虚线框，方便以后一键查找（class = todo） */
.todo{display:block; margin:8px 0 2px; padding:7px 12px; border:1.5px dashed var(--ink-soft); background:var(--ink-wash); color:var(--ink-soft); font-size:14px; line-height:1.6; font-weight:500}
span.todo{display:inline-block}

/* 一件事的事实列表、步骤、格子、大数字、条形 */
.facts li{position:relative; padding-left:18px; line-height:1.65}
.facts li + li{margin-top:.3em}
.facts li::before{content:""; position:absolute; left:1px; top:.78em; width:7px; height:7px; border-radius:50%; background:var(--warm)}
.body{display:grid; gap:10px; align-content:start; line-height:1.72}
.body .one{font-size:17px}
.btn{display:inline-flex; align-items:center; min-height:44px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--ink);
     background:var(--paper); border:2px solid transparent; padding:8px 16px; cursor:pointer}
.btn:hover{background:var(--paper)}
button{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink); background:var(--paper); border:2px solid var(--ink); padding:8px 14px; cursor:pointer; box-shadow:var(--offset-cool)}
button:hover{box-shadow:var(--offset-warm)}
button:active{transform:translate(-1px,1px); box-shadow:var(--offset-warm-sm)}
.bignum{display:flex; align-items:baseline; gap:16px; font-family:var(--display); font-size:clamp(52px,16vw,84px); line-height:1.05; letter-spacing:.03em}
.bignum span{position:relative; z-index:0}
.bignum span::before{content:""; position:absolute; left:-6px; right:-6px; top:52%; height:38%; z-index:-1;
  background-image:var(--dot-warm); background-size:7px 7px; opacity:.9; box-shadow:var(--ghost-cool)}
.bignum i{font-style:normal; font-family:var(--mono); font-size:.5em; color:var(--warm); align-self:center}
.steps{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; counter-reset:s}
.steps li{counter-increment:s; display:flex; align-items:baseline; gap:7px; font-size:15.5px; font-weight:500; line-height:1.4; border:1px solid var(--ink-line-strong); padding:3px 10px}
.steps li::before{content:counter(s); font-family:var(--mono); font-size:11.5px; color:var(--warm)}
.cells{display:grid; grid-template-columns:1fr 1fr; gap:10px; counter-reset:c}
.cells li{counter-increment:c; position:relative; border:2px solid transparent; padding:3px 12px 7px; box-shadow:var(--offset-cool-soft)}
.cells li::before{content:counter(c); display:block; font-family:var(--mono); font-size:12px; color:var(--warm)}
.cells b{display:block; font-size:16px; line-height:1.4; font-weight:700}
.cells code{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft)}
.bar{display:flex; height:40px; border:2px solid var(--ink); box-shadow:var(--offset-cool-soft)}
.bar i{display:block}
.bar i + i{border-left:2px solid var(--ink)}
.t-warm{background-image:var(--dot-warm); background-size:7px 7px}
.t-cool{background-image:var(--dot-cool); background-size:7px 7px}
.t-ink{background-image:var(--dot-ink); background-size:8px 8px}
.legend{display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:10px; font-size:15px}
.legend li{display:flex; align-items:center; gap:8px}
.legend li i{flex:none; width:16px; height:16px; border:1.5px solid var(--ink); background-size:4px 4px}

/* 小标题直接写结论：加粗在句首 */
.runin li{padding:9px 0; line-height:1.68}
.runin li + li{border-top:1px solid var(--ink-line)}
.runin li b{font-weight:700}
.runin li details{margin-top:2px}
.facts-line{margin-top:6px; font-size:15px; font-weight:500}

/* 一行一条：左词右句 */
.lines{margin-top:6px}
.lines > li{position:relative; padding:11px 0 13px; display:grid; gap:2px}
.lines > li > canvas.rule{position:absolute; left:0; right:0; bottom:-5px}
.lines > li > b{font-size:17px; font-weight:700; letter-spacing:.02em}
.lines > li > div{max-width:38em; line-height:1.7}
.lines.tight > li{padding:9px 0 11px}
details.more > summary{display:inline-flex; align-items:center; min-height:44px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--ink); cursor:pointer; list-style:none}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"+"; color:var(--warm); margin-right:8px}
details.more[open] > summary::before{content:"−"}
.src{width:100%; border-collapse:collapse; font-size:15px; line-height:1.6}
.src th{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.12em; color:var(--warm); text-align:left; padding:0 12px 6px 0}
.src td{vertical-align:top; padding:8px 12px 8px 0; border-top:1px solid var(--ink-line); width:50%}

/* 图和视频 */
.figs{display:grid; gap:18px; align-content:start; justify-items:start}
.figs > *{width:100%}
figure{position:relative}
figure .frame{position:relative}
figure .frame::before{content:""; position:absolute; inset:0; transform:translate(-3px,3px); border:3px solid var(--warm); pointer-events:none; opacity:.6}
figure .frame::after{content:""; position:absolute; inset:0; border:3px solid var(--ink); pointer-events:none}
figure video,figure img{display:block; width:100%; height:auto; background:var(--paper-2)}
figure.tall .frame{max-width:210px}
figure.tall .spec,figure.tall figcaption{max-width:none}
figure.phone{display:grid; grid-template-columns:140px 1fr; gap:14px; align-items:end}
figure.phone figcaption{margin-top:0}
figure.phone .spec{display:grid; gap:4px; justify-items:start; align-items:start; margin-bottom:8px}
figure.phone .spec .txt{padding-bottom:0}
figcaption{margin-top:10px; font-family:var(--mono); font-size:13px; line-height:1.65; color:var(--ink-soft); letter-spacing:.01em}
figcaption em{font-style:normal; color:var(--ink)}
figcaption strong{font-weight:500; color:var(--ink)}
.spec{display:flex; align-items:flex-end; gap:10px; margin-bottom:8px; font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--ink)}
.spec .ar{flex:none; display:inline-flex; align-items:center; gap:6px; padding:4px 8px 3px; background:var(--ink); color:var(--paper); font-weight:500; letter-spacing:.06em}
.spec .ar::before{content:""; border:1.5px solid var(--paper)}
.spec .ar.v::before{width:8px; height:14px}
.spec .ar.h::before{width:16px; height:9px}
.spec .ar.sq::before{width:11px; height:11px}
.spec .txt{min-width:0; padding-bottom:4px}
.spec .txt span{white-space:nowrap}
/* 封面正中的播放键：点了才出控件 */
.frame .play{position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; padding:0; border-radius:50%;
  border:3px solid var(--ink); background:var(--paper); box-shadow:var(--offset-warm); cursor:pointer; z-index:1}
.frame .play::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-36%,-50%);
  border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--ink)}
.frame .play:active{transform:translate(-1px,1px)}
.frame.playing .play{display:none}
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px}
.thumbs a{display:block; background:none; font-family:var(--mono); font-size:12.5px; line-height:1.5; text-align:center; color:var(--ink-soft)}
.thumbs img{display:block; width:100%; height:auto; border:2px solid var(--ink); margin-bottom:5px; background:var(--paper-2)}
.thumbs a[aria-current="true"]{color:var(--ink)}
.thumbs a[aria-current="true"] img{border-color:var(--warm); box-shadow:var(--offset-thumb)}

/* 页底：下一件 / 出口 */
.next{margin-top:44px}
.next a{display:block; padding:12px 16px 14px; border:2px solid transparent; background:var(--paper); line-height:1.5}
.next a:hover{background:var(--paper)}
.next .k{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--warm)}
.next b{display:block; font-family:var(--display); font-weight:400; font-size:24px; line-height:1.25; letter-spacing:.03em; margin-top:2px}
.next .d{display:block; margin-top:2px; font-size:14.5px; color:var(--ink-soft)}
.exits{margin-top:44px; display:grid; gap:12px}
.exits a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:8px 16px; border:2px solid transparent; background:var(--paper); font-family:var(--display); font-size:21px; letter-spacing:.06em}
.exits a:hover{background:var(--paper)}
.exits a i{font-style:normal; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em}
.after-next{margin-top:14px}

/* ---------- 页脚：#contact，每页一样 ---------- */
.foot{max-width:var(--w); margin:34px auto 0}
.foot h2{font-family:var(--display); font-weight:400; font-size:30px; line-height:1.1; letter-spacing:.04em; position:relative; display:inline-block}
.foot h2::before{content:""; position:absolute; left:-8px; right:-8px; top:52%; height:40%; z-index:-1;
  background-image:var(--dot-cool); background-size:8px 8px; opacity:.85; box-shadow:var(--ghost-warm)}
.foot .who{margin-top:10px; font-size:15.5px; line-height:1.65; max-width:30em}
.foot .who b{font-weight:700}
.contact{margin-top:6px; max-width:680px}
.contact li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:12px; padding:5px 0; position:relative; align-items:center}
.contact li canvas.rule{position:absolute; left:0; right:0; bottom:-5px}
.contact li b{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.12em; color:var(--warm)}
.contact .mail{display:flex; flex-wrap:wrap; align-items:center; gap:0 12px}
.contact .mail .addr{margin-block:0; font-size:16px}
.contact .todo{margin:0}
.copybtn{min-height:40px; padding:0 14px}
.contact .qrwrap{display:flex; align-items:center; gap:16px}
.contact .qr{flex:none; width:104px; height:104px}
.contact span.qr{display:grid; place-items:center; text-align:center; padding:6px; font-size:12.5px; line-height:1.5}
.contact a.qr{display:block; background:none; border:1.5px solid var(--ink)}
.contact a.qr img{display:block; width:100%; height:100%}
.contact .qrtxt{font-size:15.5px; font-weight:500}
.contact .links{display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; font-size:15px}
.contact .links .hit{margin-block:-9px}
/* 会什么：技能小牌，和限定语小牌（橙边）区分开，用深墨边 */
.skills{display:flex; flex-wrap:wrap; gap:8px 10px}
.skills li{position:relative; font-size:15.5px; font-weight:500; line-height:1.5; padding:3px 12px; border:2px solid transparent; box-shadow:var(--offset-cool-sm)}
.foot .seal{display:none}

/* 档案块：关于页 */
.cv li{display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px; padding:5px 0; position:relative; align-items:baseline; line-height:1.62; font-size:15.5px}
.cv li b.k{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; color:var(--warm)}
.cv li canvas.rule{position:absolute; left:0; right:0; bottom:-5px}
.cv li > div > * + *{margin-top:6px}
.cv li .todo{margin:4px 0 0; padding:5px 10px; font-size:13.5px}
.about-fig{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:12px; align-items:start}
.about-fig figcaption{font-size:12px; line-height:1.6}
.fig-note{margin-top:8px; font-family:var(--mono); font-size:12.5px; line-height:1.65; color:var(--ink-soft)}
.fig-note em{font-style:normal; color:var(--ink)}
.about-fig .row{margin-top:8px}
.about-fig .row button{padding:6px 10px; min-height:40px}
figure canvas.doodle{display:block; width:100%; aspect-ratio:1200/1810; background:var(--paper-2)}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px}
details.colo > summary{display:inline-flex; align-items:center; min-height:44px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; cursor:pointer; list-style:none}
details.colo > summary::-webkit-details-marker{display:none}
details.colo > summary::before{content:"+"; color:var(--warm); margin-right:8px}
details.colo[open] > summary::before{content:"−"}
details.colo .txt{font-size:14.5px; color:var(--ink-soft); line-height:1.75}
details.colo .txt p{margin:0 0 .9em}

/* ---------- /play/：3D 工作台。先是静态图，3D 加载好了盖上去；手指在上面只是滚页面，点「开始玩」才接管 ---------- */
.bench{max-width:var(--w); margin:20px auto 0; display:grid; grid-template-columns:1fr; gap:14px 40px; align-items:end}
.bench .words p{margin:0 0 .8em; max-width:30em}
.bench .bstage{position:relative; aspect-ratio:4/5; background:var(--paper-2); touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent}
.bench[data-state=play] .bstage{touch-action:none}
.bench .bstage::before{content:""; position:absolute; inset:0; transform:translate(3px,3px); border:3px solid var(--warm); pointer-events:none; opacity:.55}
.bench .bstage::after{content:""; position:absolute; inset:0; border:3px solid var(--ink); pointer-events:none; z-index:3}
.bench .bstage img,.bench .bstage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.bench .bstage canvas{opacity:0; transition:opacity .4s}
.bench.live .bstage canvas{opacity:1}
.bench.failed .bstage canvas{display:none}
.bench .bstage button{position:absolute; z-index:4}
.bench .bstage button[hidden],.bench .bstage [hidden]{display:none}
.bench .b-go,.bench .b-play{left:50%; bottom:11%; transform:translateX(-50%); font-family:var(--display); font-size:26px; letter-spacing:.06em; padding:7px 22px 9px; white-space:nowrap}
.bench .b-go:active,.bench .b-play:active{transform:translate(calc(-50% - 1px),1px)}
.bench .b-play{box-shadow:var(--offset-warm)}
.bench .b-exit{top:12px; right:12px; padding:12px 18px; min-height:44px}
.bench .b-hint{position:absolute; z-index:2; left:12px; top:12px; right:96px; margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink); background:var(--paper); padding:3px 7px}
.bench .b-far{position:absolute; z-index:2; left:0; top:0; margin:-36px 0 0 8px; font-family:var(--mono); font-size:12px; color:var(--paper); background:var(--warm); padding:1px 7px; pointer-events:none; white-space:nowrap}
.bench .b-status{position:absolute; z-index:2; left:12px; top:12px; right:12px; margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink-soft)}
.bench .b-status span{background:var(--paper); padding:2px 6px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.bench.live .b-status{display:none}
.bench .b-credit{position:absolute; z-index:2; right:10px; bottom:10px; font-family:var(--mono); font-size:10.5px; line-height:1.5; color:var(--ink-soft); background:var(--paper); padding:1px 5px}
.bench .b-note{margin:0; font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--ink-soft); letter-spacing:.02em}
html.bench-lock,html.bench-lock body{overflow:hidden; overscroll-behavior:none}

/* ---------- 404 ---------- */
.nf{max-width:30em; margin:20px auto 0}
.nf h1{font-family:var(--display); font-weight:400; font-size:clamp(80px,26vw,150px); line-height:.95; letter-spacing:.04em; margin:0 0 10px; position:relative; display:inline-block}
.nf h1 span{position:relative; z-index:1}
.nf h1::before{content:""; position:absolute; left:-10px; right:-10px; top:52%; height:38%; background:var(--dot-warm) 0 0/7px 7px; opacity:.9; box-shadow:var(--ghost-cool)}
.nf .exits{margin-top:18px}

/* ---------- 宽屏 ---------- */
@media (min-width:760px){
  body{padding-bottom:64px; font-size:17px}
  .top .home b{font-size:28px}
  .top nav a{font-size:16px; padding:0 12px}
  .top nav{margin-right:-12px}
  h1.hd{font-size:72px}
  h2.hd{font-size:44px}
  .ttl{font-size:42px}
  .ch{margin-top:80px}
  .ch .head{grid-template-columns:1fr 130px; gap:20px}
  .ch canvas.stamp{width:130px}
  .hero{--cat:clamp(240px,30vw,320px); margin-top:34px; gap:0 36px; grid-template-columns:var(--cat) minmax(0,1fr); grid-template-areas:"cat who" "cat lede" "cat cta"; align-items:start}
  .hero .stage{align-self:center}
  .hero .who{align-self:end}
  .hero h1{font-size:clamp(64px,8vw,104px); margin-bottom:12px}
  .hero .facts{font-size:17px}
  .hero .facts span,.hero .facts .sep{display:inline}
  .hero .lede{margin-top:16px; font-size:19px}
  .hero .cta{margin-top:18px}
  .hero .cap{font-size:12px}
  .hero .say{max-width:440px}
  .cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:20px}
  .cards.one{grid-template-columns:minmax(0,420px)}
  .card{grid-template-columns:1fr; padding:0 0 14px; gap:6px}
  .card .pic{width:100%}
  .card .pic img{aspect-ratio:16/10}
  .card .t{font-size:24px; margin-top:6px}
  .card .r{font-size:16px}
  .card canvas.rule{display:none}
  .numfig{aspect-ratio:16/10; font-size:56px}
  .lanes a{padding:14px 0}
  .toc a{display:grid; grid-template-columns:40px 1fr auto; gap:0 16px; min-height:0; padding:12px 0}
  .toc a::after{display:none}
  .toc .n{width:auto}
  .toc .t{font-size:26px; line-height:inherit; padding:0 6px; margin-left:-6px; justify-self:start}
  .toc .note{font-size:12.5px; line-height:inherit; color:var(--ink-soft); text-align:right}
  .minis{max-width:760px}
  .blk h2{font-size:30px}
  .result{padding:4px 22px 6px}
  .result li{grid-template-columns:96px minmax(0,1fr); gap:18px; font-size:16.5px}
  .figs.two{grid-template-columns:1fr 1fr; gap:24px}
  figure.tall .frame{max-width:300px}
  figure.phone{display:block; max-width:230px}
  figure.phone figcaption{margin-top:12px}
  .foot{margin-top:84px}
  .contact li{grid-template-columns:96px minmax(0,1fr); gap:18px}
  .cv li{grid-template-columns:110px minmax(0,1fr); gap:18px}
  .about-fig{grid-template-columns:minmax(0,300px) minmax(0,300px); gap:36px}
  .about-fig figcaption{font-size:13px}
  .bench{grid-template-columns:1fr minmax(280px,480px); margin-top:34px}
  .bench .b-note{grid-column:2}
  .exits{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:379.98px){ .spec{font-size:12px} }
@media (prefers-reduced-motion:reduce){ button{transition:none} .hero .say{animation:none} .bench .bstage canvas{transition:none} }

/* ---------- 拍立得作品卡（样板：先只挂在首页的 .card.pola 上） ----------
   一张歪着贴的相纸：白边 + 底部写字区（标题写在这里），顶上一段胶带；描述和角色留在纸面上不歪。
   只用现有 tokens：paper / ink / ink-line-strong / warm-hl / offset-cool-soft；阴影只有硬边的错位影。 */
.card.pola{--tilt:-3deg; grid-template-columns:128px minmax(0,1fr); gap:0 14px; padding:15px 0 12px}
.card.pola:nth-child(even){--tilt:2.5deg}
.card.pola:nth-child(3){--tilt:-2deg}
.cards.one .card.pola,.card.pola:only-child{--tilt:2.5deg}
#hardware .card.pola:only-child{--tilt:-2deg}
.card.pola .pol{position:relative; display:block; padding:6px 6px 4px; background:var(--paper);
  border:1.5px solid var(--ink-line-strong); box-shadow:var(--offset-cool-soft);
  transform:rotate(var(--tilt)); transform-origin:50% 35%}
.card.pola .pic{width:auto; border:0; box-shadow:none; background:none; outline:1.5px solid var(--ink)}
.card.pola .pic img{aspect-ratio:3/2}
.card.pola .t{margin:7px 2px 4px; padding:0; width:fit-content; max-width:calc(100% - 4px); font-size:15.5px; line-height:1.28; letter-spacing:.02em}   /* 贴着字宽，悬停的网点只垫在字底下 */
.card.pola .t.kp{word-break:keep-all}   /* 中英混排的标题只在空格处断，不把「毛巾加热器」拆开 */
.card.pola .tx{position:relative; z-index:1; padding-top:2px}
/* 胶带：用荧光笔那一版墨（warm-hl），两头剪出小锯齿；2 号卡用两条斜贴在上角 */
.card.pola .pol::before,.card.pola .pol::after{content:""; position:absolute; z-index:2; top:-9px; width:52px; height:17px;
  background:var(--warm-hl);
  clip-path:polygon(0 0,100% 0,96% 25%,100% 50%,96% 75%,100% 100%,0 100%,4% 75%,0 50%,4% 25%)}
.card.pola .pol::before{left:50%; margin-left:-26px; transform:rotate(-4deg)}
.card.pola .pol::after{display:none}
.card.pola:nth-child(3) .pol::before{margin-left:-14px; transform:rotate(3deg)}
.card.pola:nth-child(2) .pol::before,.card.pola:nth-child(2) .pol::after{display:block; width:36px; height:14px; top:-3px; margin:0}
.card.pola:nth-child(2) .pol::before{left:-10px; transform:rotate(-38deg)}
.card.pola:nth-child(2) .pol::after{right:-10px; left:auto; transform:rotate(38deg)}
.cards.one .card.pola .pol::before{margin-left:-18px; transform:rotate(3deg)}
/* 悬停 / 键盘聚焦：摆正并抬起一点；动画只在没开「减少动态效果」时有 */
@media (hover:hover){ .cards .card.pola:hover{z-index:3} .card.pola:hover .pol{transform:rotate(0deg) translateY(-4px)} }
.cards .card.pola:focus-within{z-index:3}
.card.pola:focus-within .pol{transform:rotate(0deg) translateY(-4px)}
@media (prefers-reduced-motion:no-preference){ .card.pola .pol{transition:transform .22s ease-out} }

@media (min-width:760px){
  /* 三张挨着放，相邻的角互相压一点，高低错落；字层在上，不被压；中间那张压在两边上面 */
  .cards.pols{column-gap:4px; row-gap:30px; margin-top:22px}
  .card.pola{--tilt:-2.2deg; grid-template-columns:1fr; gap:10px; padding:24px 0 10px}
  .card.pola:nth-child(even){--tilt:1.8deg; z-index:1}
  .card.pola:nth-child(3){--tilt:-1.4deg}
  .cards.one .card.pola,.card.pola:only-child{--tilt:1.7deg}
  #hardware .card.pola:only-child{--tilt:-1.5deg}
  .cards.one.pols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card.pola .pol{margin-inline:-5px; padding:12px 12px 8px}
  .card.pola .pic img{aspect-ratio:16/10}
  .card.pola .t{margin:13px 6px 7px; max-width:calc(100% - 12px); font-size:24px; line-height:1.25}
  .card.pola .tx{padding-inline:8px}
  .card.pola:nth-child(2){margin-top:16px}
  .card.pola:nth-child(3){margin-top:4px}
  .card.pola .pol::before{width:76px; height:24px; top:-12px; margin-left:-38px}
  .card.pola:nth-child(3) .pol::before{margin-left:-20px}
  .card.pola:nth-child(2) .pol::before,.card.pola:nth-child(2) .pol::after{width:66px; height:22px; top:-6px}
  .card.pola:nth-child(2) .pol::before{left:-15px}
  .card.pola:nth-child(2) .pol::after{right:-15px}
  .cards.one .card.pola .pol::before{margin-left:-38px}
}

/* ---------- 手画零件（第二批）：手画线框按钮、橡皮章小牌、笔记本纸、打字机小票、便利贴 ----------
   手画线是 SVG 遮罩：SVG 里只有线的形状（遮罩只看透明度，不是颜色），颜色由元素自己的 background 给，取自 tokens。
   只用现有 tokens：ink / ink-line / ink-line-strong / warm / warm-hl / cool / paper / paper-2 / offset-cool-soft；没有新颜色、没有模糊阴影。
   带字的面一律是 paper，文字对比度和现状相同。 */
:root{
  --pen-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 6'%3E%3Cpath d='M0 3C8 2.2 16 3.9 24 3S40 2.3 48 3.2 58 3.7 64 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --pen-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 64'%3E%3Cpath d='M3 0C2.2 8 3.9 16 3 24S2.3 40 3.2 48 3.7 58 3 64' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --pen-h2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 6'%3E%3Cpath d='M0 3C8 2.3 16 3.8 24 3S40 2.4 48 3.1 58 3.6 64 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --pen-v2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 64'%3E%3Cpath d='M3 0C2.3 8 3.8 16 3 24S2.4 40 3.1 48 3.6 58 3 64' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --zig-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 8'%3E%3Cpath d='M0 7L7 1.4 14 7.2 21 0.9 28 6.9 35 1.6 42 7 49 1.1 56 7.2 63 1 70 7' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --zig-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 8'%3E%3Cpath d='M0 1L7 6.6 14 0.8 21 7.1 28 1.1 35 6.4 42 1 49 6.9 56 0.8 63 7 70 1' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- 按钮和出口：手抖的墨线框 + 一块歪的色块（原来的偏移影），形状变了、颜色和交互没变 ---- */
.hero .cta a,.btn,.next a,.exits a{position:relative; --slab:var(--cool); --so:3px}
.hero .cta a:first-child,.exits a:first-child,.next a{--slab:var(--warm)}
.hero .cta a:hover,.btn:hover,.exits a:hover{--slab:var(--warm)}
.next a:hover{--slab:var(--cool)}
.hero .cta a:active,.btn:active,.next a:active,.exits a:active{transform:translate(-1px,1px); --so:2px}
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
.hero .cta a::before,.btn::before,.next a::before,.exits a::before{content:""; position:absolute; inset:-2px; z-index:-1; background:var(--slab);
  transform:translate(calc(var(--so) * -1),var(--so)); clip-path:polygon(0 2px,100% 0,calc(100% - 2px) 100%,1px calc(100% - 1px))}
}
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
.hero .cta a::after,.btn::after,.next a::after,.exits a::after{content:""; position:absolute; inset:-4px; pointer-events:none; background:var(--ink);
  -webkit-mask:var(--pen-h) 0 0/64px 6px repeat-x,var(--pen-h) 23px 100%/64px 6px repeat-x,var(--pen-v) 0 0/6px 64px repeat-y,var(--pen-v) 100% 17px/6px 64px repeat-y;
          mask:var(--pen-h) 0 0/64px 6px repeat-x,var(--pen-h) 23px 100%/64px 6px repeat-x,var(--pen-v) 0 0/6px 64px repeat-y,var(--pen-v) 100% 17px/6px 64px repeat-y}
}

/* ---- 限定语小牌：长的保持方牌，只把边换成手抖线、各歪一点点；≤6 字的做成椭圆橡皮章（双线、略微旋转），字不变 ---- */
.tags > *{position:relative}
.tags > :nth-child(odd){transform:rotate(-.5deg)}
.tags > :nth-child(even){transform:rotate(.4deg)}
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
.tags > *::after{content:""; position:absolute; inset:-4px; pointer-events:none; background:var(--warm);
  -webkit-mask:var(--pen-h2) 0 0/64px 6px repeat-x,var(--pen-h2) 19px 100%/64px 6px repeat-x,var(--pen-v2) 0 0/6px 64px repeat-y,var(--pen-v2) 100% 13px/6px 64px repeat-y;
          mask:var(--pen-h2) 0 0/64px 6px repeat-x,var(--pen-h2) 19px 100%/64px 6px repeat-x,var(--pen-v2) 0 0/6px 64px repeat-y,var(--pen-v2) 100% 13px/6px 64px repeat-y}
}
.tags > .st{border:1.5px solid var(--warm); border-radius:50%; padding:4px 16px; transform:rotate(-2deg);
  box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--warm)}
.tags > .st:nth-child(even){transform:rotate(1.6deg)}
.tags > .st::after{display:none}

/* ---- 关于页：笔记本纸。横线 + 左边一条红边线，上沿撕边，整页略歪 ---- */
.nb{--ln:27px; --pt:8px; position:relative; margin:16px -10px 0; padding:var(--pt) 10px 6px 34px; transform:rotate(-.4deg);
  background:linear-gradient(to right,transparent 27px,var(--warm-hl) 27px 29.5px,transparent 29.5px) 0 0/100% 100% no-repeat,
             linear-gradient(to bottom,transparent calc(var(--ln) - 1px),var(--ink-line) calc(var(--ln) - 1px)) 0 var(--pt)/100% var(--ln) repeat-y;
  border:1.4px solid var(--ink-line-strong); border-top:0; box-shadow:var(--offset-cool-soft)}
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
.nb::after{content:""; position:absolute; left:-1.4px; right:-1.4px; top:-7px; height:8px; pointer-events:none; background:var(--ink-line-strong);
  -webkit-mask:var(--zig-t) 0 0/70px 8px round no-repeat; mask:var(--zig-t) 0 0/70px 8px round no-repeat}
}
.nb .cv li{grid-template-columns:58px minmax(0,1fr); gap:8px; padding:0; align-items:start; line-height:var(--ln)}
.nb .cv li b.k{line-height:var(--ln); position:relative; top:1px}
.nb .cv li canvas.rule{display:none}
.nb .cv li > div > * + *{margin-top:0}

/* ---- 案例页：结果卡改成打字机小票。左右直边、上下锯齿边、等宽字、虚线分隔 ---- */
.result{position:relative; margin-top:26px; font-family:var(--mono);
  border-left:1.4px solid var(--ink-line-strong); border-right:1.4px solid var(--ink-line-strong)}
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
.result::before,.result::after{content:""; position:absolute; left:-1.4px; right:-1.4px; height:8px; pointer-events:none; background:var(--ink-line-strong)}
}
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
.result::before{top:-7px; -webkit-mask:var(--zig-t) 0 0/70px 8px round no-repeat; mask:var(--zig-t) 0 0/70px 8px round no-repeat}
}
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
.result::after{bottom:-7px; -webkit-mask:var(--zig-b) 0 0/70px 8px round no-repeat; mask:var(--zig-b) 0 0/70px 8px round no-repeat}
}
.result li:last-child{border-bottom:4px double var(--ink-line-strong)}

/* ---- 案例页：「取舍和没做成的」用便利贴。纸色面 + 折角 + 一段胶带，略歪 ---- */
#tradeoffs .facts{position:relative; width:fit-content; max-width:min(100%,27em); margin-top:12px; padding:13px 18px 15px 14px; transform:rotate(1.2deg);
  background:var(--paper); border:1.4px solid var(--ink-line-strong)}
#tradeoffs .facts::before{content:""; position:absolute; left:50%; top:-10px; width:64px; height:20px; margin-left:-32px; transform:rotate(-3deg); background:var(--warm-hl);
  clip-path:polygon(0 0,100% 0,96% 25%,100% 50%,96% 75%,100% 100%,0 100%,4% 75%,0 50%,4% 25%)}
#tradeoffs .facts::after{content:""; position:absolute; right:-1.4px; bottom:-1.4px; width:20px; height:20px;
  background:linear-gradient(135deg,var(--paper-2) 0 calc(50% - .7px),var(--ink-line-strong) calc(50% - .7px) calc(50% + .7px),var(--paper) calc(50% + .7px))}

@media (min-width:760px){
  .nb{max-width:820px; margin-left:0; margin-right:0; padding:var(--pt) 20px 6px 50px; background-size:100% 100%,100% var(--ln)}
  .nb{background-image:linear-gradient(to right,transparent 41px,var(--warm-hl) 41px 43.5px,transparent 43.5px),
             linear-gradient(to bottom,transparent calc(var(--ln) - 1px),var(--ink-line) calc(var(--ln) - 1px))}
  .nb .cv li{grid-template-columns:110px minmax(0,1fr); gap:18px}
}

/* ---------- 手画零件（第三批）：作品总览的折叠小卡、案例页的埋点格、关于页的技能小牌 ----------
   同一套手抖墨线框（SVG 遮罩，颜色取 ink），原来的硬边偏移影（offset-cool-soft / offset-cool-sm）保留；各歪一点点；
   折叠小卡展开时摆正（里面有图、视频，不跟着歪），部分贴一小段胶带（warm-hl）。 */
@supports ((mask-repeat: round) or (-webkit-mask-repeat: round)){
  details.mini::after,.cells li::after,.skills li::after{content:""; position:absolute; inset:-4px; pointer-events:none; background:var(--ink);
    -webkit-mask:var(--pen-h) 0 0/64px 6px repeat-x,var(--pen-h) 23px 100%/64px 6px repeat-x,var(--pen-v) 0 0/6px 64px repeat-y,var(--pen-v) 100% 17px/6px 64px repeat-y;
            mask:var(--pen-h) 0 0/64px 6px repeat-x,var(--pen-h) 23px 100%/64px 6px repeat-x,var(--pen-v) 0 0/6px 64px repeat-y,var(--pen-v) 100% 17px/6px 64px repeat-y}
}
details.mini{--tilt:-.45deg; transform:rotate(var(--tilt))}
details.mini:nth-of-type(even){--tilt:.35deg}
details.mini:nth-of-type(3n){--tilt:-.2deg}
details.mini[open]{transform:none}
details.mini::before{content:""; position:absolute; z-index:2; top:-8px; right:22px; width:46px; height:15px; background:var(--warm-hl); transform:rotate(3deg); display:none;
  clip-path:polygon(0 0,100% 0,96% 25%,100% 50%,96% 75%,100% 100%,0 100%,4% 75%,0 50%,4% 25%)}
details.mini:nth-of-type(3n+1)::before{display:block}
details.mini:nth-of-type(6n+4)::before{right:auto; left:26px; transform:rotate(-4deg)}
.runin .cells li{padding:5px 14px 9px; border:2px solid transparent}   /* 埋点格在 .runin 里，会被 .runin li 的 padding:9px 0 和「li + li」的细上边线盖掉，这里压回来 */
.cells li:nth-child(1){transform:rotate(-.8deg)}
.cells li:nth-child(2){transform:rotate(.6deg)}
.cells li:nth-child(3){transform:rotate(.7deg)}
.cells li:nth-child(4){transform:rotate(-.6deg)}
.skills li:nth-child(1){transform:rotate(-1.2deg)}
.skills li:nth-child(2){transform:rotate(.9deg)}
.skills li:nth-child(3){transform:rotate(-.6deg)}
@media (prefers-reduced-motion:no-preference){ details.mini{transition:transform .2s ease-out} }

/* 老浏览器没有 mask：不画手画线和锯齿，退回直边框，内容照常可读 */
@supports not ((mask-repeat: round) or (-webkit-mask-repeat: round)){
  .hero .cta a,.btn,.next a,.exits a{border-color:var(--ink)}
  .tags > *{border-color:var(--warm)}
  .result{border-top:1.4px solid var(--ink-line-strong); border-bottom:1.4px solid var(--ink-line-strong)}
  .nb{border-top:1.4px solid var(--ink-line-strong)}
  details.mini,.cells li,.skills li{border-color:var(--ink)}
}

/* ---------- 博客 + 留言板（第四批）----------
   只用现有 tokens 和现有零件的画法：笔记本纸（列表）、便利贴（留言、引用）、手画线框按钮（.btn）、胶带。没有新颜色、没有模糊阴影。 */
input:focus-visible,textarea:focus-visible{outline:2px solid var(--cool); outline-offset:3px}

/* 博客列表：笔记本纸，一篇一条；日期栏比关于页的键名栏宽一点。每行 27px 对齐横格，条与条之间空一行 */
.nb .cv.posts li{grid-template-columns:88px minmax(0,1fr)}
.nb .cv.posts li + li{margin-top:var(--ln)}
.nb .cv.posts b.k{white-space:nowrap}
.posts a.post{display:block; background:none; color:var(--ink)}
.posts a.post:hover{background:none}
.posts a.post .t{font-weight:700; background:var(--hl)}
.posts a.post:hover .t{background:var(--hl-on)}
.posts .sum{display:block; font-size:15px; color:var(--ink-soft)}
.nb.empty{min-height:calc(var(--ln) * 6 + var(--pt) + 6px)}
.nb.empty .cv li{margin-top:var(--ln)}

/* 文章页：正文 */
.post-meta{margin-top:6px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink-soft)}
.prose{margin-top:24px; line-height:1.85}
.prose > * + *{margin-top:14px}
.prose h2{font-family:var(--display); font-weight:400; font-size:26px; line-height:1.25; letter-spacing:.04em; margin-top:36px}
.prose h3{font-size:18px; font-weight:700; line-height:1.5; margin-top:28px}
.prose strong{font-weight:700}
.prose ul li{position:relative; padding-left:18px; line-height:1.65}
.prose ul li + li{margin-top:.3em}
.prose ul li::before{content:""; position:absolute; left:1px; top:.78em; width:7px; height:7px; border-radius:50%; background:var(--warm)}
.prose ol{padding-left:1.7em; list-style:decimal}
.prose ol li{padding-left:.2em; line-height:1.65}
.prose ol li + li{margin-top:.3em}
.prose ol li::marker{font-family:var(--mono); font-size:.85em; color:var(--warm)}
.prose code{font-family:var(--mono); font-size:.88em; background:var(--ink-wash); padding:0 .3em}
.prose pre{font-family:var(--mono); font-size:13.5px; line-height:1.6; background:var(--ink-wash); border:1.4px solid var(--ink-line-strong); padding:12px 14px; overflow-x:auto}
.prose pre code{background:none; padding:0; font-size:inherit}
.prose img{max-width:100%; height:auto}
.prose blockquote,.wall > li{position:relative; background:var(--paper); border:1.4px solid var(--ink-line-strong)}
.prose blockquote{width:fit-content; max-width:min(100%,27em); padding:13px 18px 15px 14px; transform:rotate(1.2deg); margin-top:22px}
.prose blockquote p + p{margin-top:8px}
.prose blockquote::before,.wall > li::before{content:""; position:absolute; left:50%; top:-10px; width:64px; height:20px; margin-left:-32px; transform:rotate(-3deg); background:var(--warm-hl);
  clip-path:polygon(0 0,100% 0,96% 25%,100% 50%,96% 75%,100% 100%,0 100%,4% 75%,0 50%,4% 25%)}
.prose blockquote::after,.wall > li::after{content:""; position:absolute; right:-1.4px; bottom:-1.4px; width:20px; height:20px;
  background:linear-gradient(135deg,var(--paper-2) 0 calc(50% - .7px),var(--ink-line-strong) calc(50% - .7px) calc(50% + .7px),var(--paper) calc(50% + .7px))}
@media (min-width:760px){ .prose h2{font-size:30px} .prose pre{font-size:14px} }

/* 留言板：表单 */
.gb-form{display:grid; gap:18px; max-width:34em; margin-top:18px}
.gb-form label{display:block; margin-bottom:6px; font-size:15.5px; font-weight:700; line-height:1.5}
.gb-form .hint{font-family:var(--mono); font-size:12.5px; font-weight:400; letter-spacing:.02em; color:var(--ink-soft)}
.gb-form input,.gb-form textarea{display:block; width:100%; min-height:44px; padding:9px 12px; font:inherit; font-size:16px; line-height:1.6; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:0; box-shadow:var(--offset-cool-soft)}
.gb-form textarea{min-height:140px; resize:vertical}
.gb-form [aria-invalid="true"]{border-color:var(--warm)}
.gb-count{margin-top:6px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft); text-align:right}
.gb-actions{display:flex}
button.btn,button.btn:hover,button.btn:active{box-shadow:none}
button.btn:disabled{opacity:.55; cursor:default}
.gb-err,.gb-ok{padding-left:10px; font-size:15px; font-weight:500; line-height:1.6}
.gb-err:not(:empty){border-left:3px solid var(--warm)}
.gb-ok:not(:empty){border-left:3px solid var(--cool)}
.gb-note{font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--ink-soft)}
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* 留言板：留言墙，一张张便利贴，略歪、相邻反向 */
.gb-state{margin-top:14px; font-size:15px; color:var(--ink-soft)}
.gb-state:empty{display:none}
.wall{display:grid; align-items:start; gap:34px 24px; margin-top:26px; padding:0 4px}
.wall > li{padding:16px 18px 14px; box-shadow:var(--offset-cool-soft); transform:rotate(1.2deg)}
.wall > li:nth-child(even){transform:rotate(-.9deg)}
.wall > li:nth-child(3n){transform:rotate(.5deg)}
.wall .m{white-space:pre-wrap; font-size:16px; line-height:1.7}
.wall .by{margin-top:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft)}
.gb-more{margin-top:26px}
@media (min-width:760px){ .wall{grid-template-columns:1fr 1fr; gap:38px 30px} }
.nb .cv li.none{grid-template-columns:minmax(0,1fr)}
.btn[hidden]{display:none}   /* .btn 的 display 会盖过 hidden 属性，「再看更多」没有下一页时要真的藏起来 */