/* ================= SKETCH STYLE TOKENS ================= */
  :root{
    --paper:#f5f0e8;
    --paper-2:#e8e2d8;
    --paper-3:#faf5ed;
    --ink:#2c2c2c;
    --ink-2:#5a5a5a;
    --ink-3:#6f6f6f;
    --red:#c0392b;
    --blue:#2f6f96;
    --green:#2f7a52;
    --line:2px;
    --wrap:1152px;
    --serif:"Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
    --hand:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;
    --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    --hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 7 L7 0' stroke='%232c2c2c' stroke-width='1' stroke-opacity='0.38'/%3E%3C/svg%3E");
    --nav-bg:rgba(245,240,232,.96);
    --shadow:rgba(44,44,44,.28);
    --tape:rgba(180,170,150,.35);
    --tape-line:rgba(44,44,44,.25);
  }
  /* ============ 深色模式（暗房里的纸） ============ */
  html[data-theme="dark"]{
    --paper:#211e19;
    --paper-2:#2a2620;
    --paper-3:#322d26;
    --ink:#ece5d8;
    --ink-2:#c2bbae;
    --ink-3:#948d80;
    --red:#e06048;
    --blue:#7fb3d5;
    --green:#7cc39a;
    --hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 7 L7 0' stroke='%23ece5d8' stroke-width='1' stroke-opacity='0.3'/%3E%3C/svg%3E");
    --nav-bg:rgba(33,30,25,.96);
    --shadow:rgba(0,0,0,.45);
    --tape:rgba(236,229,216,.1);
    --tape-line:rgba(236,229,216,.28);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background-color:var(--paper);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.75;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  ul{list-style:none}
  img,svg{display:block}
  ::selection{background:var(--ink);color:var(--paper)}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
  @media(min-width:768px){.wrap{padding:0 24px}}
  @media(min-width:1024px){.wrap{padding:0 40px}}
  /* 仅供屏幕阅读器：给纯视觉排版补上语义标签 */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* 键盘用户跳过导航：默认藏在视口外，获得焦点才出现 */
  .skip-link{
    position:fixed;top:0;left:50%;z-index:200;
    transform:translate(-50%,-140%);
    padding:10px 18px;border:var(--line) dashed var(--ink);border-top:none;border-radius:0 0 4px 4px;
    background:var(--paper-3);color:var(--ink);
    font-size:14px;font-weight:600;
    transition:transform .18s ease;
  }
  .skip-link:focus-visible,.skip-link:focus{
    transform:translate(-50%,0);outline:none;
  }

  /* ================= TYPE ================= */
  .title{
    font-family:var(--serif);
    font-style:italic;
    font-weight:700;
    line-height:1.18;
    letter-spacing:.01em;
  }
  .h2{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(24px,3.6vw,34px);line-height:1.25}
  .h3{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(18px,2.2vw,22px);line-height:1.35}
  .body{font-size:15px;line-height:1.85;color:var(--ink-2);max-width:66ch}
  .hand{font-family:var(--hand);font-style:italic}
  .num{font-family:var(--hand);font-weight:700;font-variant-numeric:tabular-nums}

  /* 手绘波浪下划线 */
  .scribble{
    position:relative;display:inline-block;
  }
  .scribble::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:7px;
    /* 用遮罩 + var(--red) 上色，深色模式下颜色自动跟随主题 */
    background-color:var(--red);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1 5.2c6-3.4 12 2.2 18-1.1s12 2.6 18-.8 12 2.4 18-.9 12 2.5 18-.8 12 2.3 18-.7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1 5.2c6-3.4 12 2.2 18-1.1s12 2.6 18-.8 12 2.4 18-.9 12 2.5 18-.8 12 2.3 18-.7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
    -webkit-mask-size:120px 8px;mask-size:120px 8px;
  }
  /* 老浏览器不认 mask：退回上色死的图片，至少还有下划线 */
  @supports not ((-webkit-mask-image:none) or (mask-image:none)){
    .scribble::after{
      background-color:transparent;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1 5.2c6-3.4 12 2.2 18-1.1s12 2.6 18-.8 12 2.4 18-.9 12 2.5 18-.8 12 2.3 18-.7' fill='none' stroke='%23c0392b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat:repeat-x;background-size:120px 8px;
    }
  }

  /* ================= BUTTONS ================= */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 22px;
    border:var(--line) dashed var(--ink);
    border-radius:3px;
    background:var(--ink);color:var(--paper);
    font-family:var(--sans);font-weight:600;font-size:14px;
    box-shadow:2px 2px 0 var(--shadow);
    transition:background-color .18s linear,color .18s linear,box-shadow .18s linear,transform .18s linear;
    cursor:pointer;text-align:center;
  }
  .btn:hover{box-shadow:none;transform:rotate(-1deg) translate(1px,1px)}
  .btn:active{box-shadow:none;transform:rotate(-1.6deg) translate(2px,2px);opacity:.88}
  .btn:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
  .btn--ghost{background:transparent;color:var(--ink)}
  .btn--ghost:hover{background:var(--ink);color:var(--paper)}

  /* ================= NAV ================= */
  .nav{
    position:sticky;top:0;z-index:40;
    background:var(--nav-bg);
    border-bottom:var(--line) dashed var(--ink);
    transition:box-shadow .18s linear;
  }
  .nav.scrolled{box-shadow:0 2px 0 var(--shadow)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
  .logo{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-style:italic;font-weight:700;font-size:19px}
  .logo svg{flex:none}
  .nav-links{display:flex;align-items:center;gap:22px}
  .nav-links a{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    line-height:1.05;text-align:center;
    font-size:14px;color:var(--ink-2);padding:6px 2px;
    border-bottom:2px dashed transparent;
    transition:color .15s linear,border-color .15s linear,transform .15s linear;
  }
  .nav-links a .zh{font-size:14px}
  .nav-links a .en{
    font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);opacity:.8;font-family:var(--sans);
  }
  .nav-links a:hover{color:var(--ink);border-bottom-color:var(--ink);transform:rotate(-.8deg)}
  .nav-links a:hover .zh{color:var(--ink)}
  .nav-links a:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
  .nav-links a[aria-current]{color:var(--ink);border-bottom-color:var(--red)}
  .nav-links a[aria-current] .zh{color:var(--ink)}
  @media(max-width:640px){
    .nav-in{height:60px;gap:10px}
    .nav-links{gap:14px}
    .nav-links a{font-size:13px;padding:7px 0}
    .nav-links a .zh{font-size:13px}
    .nav-links a .en{font-size:8px;letter-spacing:.1em}
  }
  @media(max-width:560px){
    .nav-in{height:56px;gap:8px}
    .nav-links{gap:11px}
    .nav-links a{font-size:12.5px}
    .nav-links a .zh{font-size:12.5px}
    .nav-links a .en{font-size:7.5px;letter-spacing:.08em}
    .logo{font-size:17px;gap:6px}
    .logo svg{width:19px;height:19px}
    .theme-toggle{width:32px;height:32px}
    .theme-toggle svg{width:15px;height:15px}
  }
  /* 极窄屏只留叶片图标，把宽度让给五个导航项 */
  @media(max-width:344px){.logo-t{display:none}}
  .theme-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;flex:none;
    border:var(--line) dashed var(--ink);border-radius:50%;
    background:transparent;color:var(--ink);cursor:pointer;
    transition:background-color .18s linear,color .18s linear,transform .18s linear;
  }
  .theme-toggle:hover{background:var(--ink);color:var(--paper);transform:rotate(-12deg)}
  .theme-toggle:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
  .theme-toggle .ic-sun{display:none}
  .theme-toggle .ic-moon{display:block}
  html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
  html[data-theme="dark"] .theme-toggle .ic-moon{display:none}
  @media(max-width:640px){.nav-links{gap:12px}}

  /* ================= DOODLES（手绘插图：英雄区用力，其余点睛） ================= */
  .doodle{position:absolute;pointer-events:none;color:var(--ink-3);opacity:.85}
  html[data-theme="dark"] .doodle{opacity:.5}
  .sec>.wrap,.contact>.wrap{position:relative}
  .doodle-hero{right:0;top:16px;z-index:0}
  @media(max-width:1180px){.doodle-hero{display:none}}
  .doodle-caps{right:96px;top:-28px;z-index:-1}
  @media(max-width:900px){.doodle-caps{display:none}}
  .doodle-mail{right:10px;top:-78px;transform:rotate(5deg)}
  @media(max-width:768px){.doodle-mail{display:none}}

  /* ================= HERO ================= */
  .hero{padding:56px 0 48px;position:relative;overflow:hidden}
  @media(min-width:768px){.hero{padding:80px 0 64px}}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;position:relative;z-index:1}
  @media(min-width:900px){.hero-grid{grid-template-columns:1.55fr 1fr;gap:56px}}
  .hero .tag-line{
    display:inline-block;
    font-family:var(--hand);font-style:italic;font-size:16px;color:var(--ink-2);
    border:var(--line) dashed var(--ink);border-radius:4px;
    padding:3px 14px;margin-bottom:22px;
    transform:rotate(-1.2deg);
  }
  .hero h1{
    font-size:clamp(30px,6.4vw,56px);
    color:var(--ink);
  }
  .hero h1 .row{display:block}
  .hero h1 em{font-style:italic;color:var(--red)}
  .hero-lead{margin-top:24px;font-size:16px;line-height:1.9;color:var(--ink-2);max-width:38ch}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

  /* 便签卡 */
  .note-card{
    position:relative;
    background:var(--paper-3);
    border:var(--line) dashed var(--ink);
    border-radius:3px;
    padding:22px 22px 24px;
    --tilt:1.4deg;
    box-shadow:3px 3px 0 var(--shadow);
    margin-top:8px;
  }
  @media(min-width:900px){.note-card{margin-top:36px}}
  .note-card::before{
    content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
    width:76px;height:22px;background:var(--tape);
    border-left:1px dashed var(--tape-line);border-right:1px dashed var(--tape-line);
  }
  .note-card .nb-title{font-family:var(--hand);font-style:italic;font-size:15px;color:var(--ink);margin-bottom:10px}
  .note-card ul{display:flex;flex-direction:column;gap:8px}
  .note-card li{font-size:13.5px;color:var(--ink-2);line-height:1.7;padding-left:18px;position:relative}
  .note-card li::before{
    content:"—";position:absolute;left:0;top:0;color:var(--ink-3);
    font-family:var(--hand);
  }
  .doodle-arrow{
    position:absolute;left:-64px;bottom:10px;color:var(--ink-3);
    transform:rotate(8deg);
  }
  @media(max-width:1100px){.doodle-arrow{display:none}}

  /* 手绘圈注 */
  .circled{position:relative;display:inline-block}
  .circled svg{position:absolute;left:-12%;top:-24%;width:124%;height:148%;overflow:visible}

  /* stats */
  .stats{
    display:grid;grid-template-columns:1fr;gap:14px;
    margin-top:44px;
    border-top:var(--line) dashed var(--ink);
    padding-top:28px;
  }
  @media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr);gap:24px}}
  .stat{display:flex;align-items:baseline;gap:12px}
  .stat:nth-child(1){--tilt:-.6deg}
  .stat:nth-child(2){--tilt:.8deg}
  .stat:nth-child(3){--tilt:-.4deg}
  .stat .n{font-family:var(--hand);font-weight:700;font-size:40px;line-height:1;color:var(--ink)}
  .stat .t{font-size:13px;color:var(--ink-3);line-height:1.5}

  /* ================= SECTION ================= */
  section[id],header[id]{scroll-margin-top:76px}
  /* 滚动渐入：倾斜角度收敛进 --tilt，与 reveal 动画共用一个 transform */
  [data-reveal]{
    opacity:0;
    transform:translateY(16px) rotate(var(--tilt,0deg));
    transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  }
  [data-reveal].rv-in{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg))}
  .sec{padding:56px 0}
  @media(min-width:768px){.sec{padding:80px 0}}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:34px}
  .sec-head .badge{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:52px;height:52px;flex:none;
    font-family:var(--hand);font-weight:700;font-size:16px;
    transform:rotate(-6deg);
  }
  .sec-head .badge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .sec-head .badge span{transform:rotate(6deg)}
  .sec-head-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

  /* ================= WORKS ================= */
  .works{display:grid;grid-template-columns:1fr;gap:22px}
  @media(min-width:768px){.works{grid-template-columns:1fr 1fr;gap:30px}}
  .work{position:relative;display:block}
  .work .hatch{
    position:absolute;inset:7px -7px -7px 7px;
    background-image:var(--hatch);
    border-radius:3px;
    transition:opacity .18s linear;
  }
  .work-in{
    position:relative;z-index:1;
    background:var(--paper);
    border:var(--line) dashed var(--ink);
    border-radius:3px;
    padding:20px;
    height:100%;
    transform:rotate(-1deg);
    transition:transform .18s linear,background-color .18s linear;
  }
  .work:nth-child(even) .work-in{transform:rotate(1.1deg)}
  .work:nth-child(3) .work-in{transform:rotate(.9deg)}
  .work:hover .work-in{transform:rotate(0) translate(2px,2px);background:var(--paper-3)}
  .work:hover .hatch{opacity:.35}
  .work:active .work-in{transform:rotate(-1.5deg) translate(3px,3px)}
  .work:focus-visible{outline:none}
  .work:focus-visible .work-in{outline:2px dashed var(--ink);outline-offset:4px}
  @media(min-width:768px){.work-body{padding:4px}}
  .work-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
  .work .idx{
    font-family:var(--hand);font-weight:700;font-size:15px;color:var(--ink-3);
    letter-spacing:.06em;
  }
  .work h3{margin-bottom:8px}
  .work p{font-size:14px;line-height:1.8;color:var(--ink-2);max-width:44ch}
  .work .meta{
    margin-top:16px;padding-top:12px;border-top:1px dashed var(--ink-3);
    font-family:var(--hand);font-style:italic;font-size:13px;color:var(--ink-3);
    display:flex;justify-content:space-between;gap:10px;
  }
  .work .meta b{font-weight:700;color:var(--ink-2)}

  /* ================= NOTES ================= */
  /* 原「随笔」板块样式已随内容一并移除 */

  /* ================= ABOUT ================= */
  .about{background:var(--paper-2);border-top:var(--line) dashed var(--ink);border-bottom:var(--line) dashed var(--ink);position:relative}
  /* 关于模块三块整行竖排：自我介绍 / 技术栈 / 带队观 各占一行 */
  .about-grid{display:grid;grid-template-columns:1fr;gap:26px}
  /* 手绘面板框 + 小标题，让「自我介绍 / 带队观」成组 */
  .about-panel{
    border:var(--line) dashed var(--ink);
    border-radius:5px;
    background:var(--paper-3);
    padding:26px 26px 24px;
    box-shadow:3px 3px 0 var(--shadow);
    position:relative;
  }
  .panel-eyebrow{
    display:inline-block;
    font-family:var(--hand);font-style:italic;
    font-size:13px;color:var(--red);letter-spacing:.03em;
    margin-bottom:16px;padding-bottom:4px;
    border-bottom:1.5px dashed var(--red);
  }
  .about-intro p:first-of-type{margin-top:0}
  .about p{font-size:15px;line-height:1.95;color:var(--ink-2);max-width:62ch}
  .about p+p{margin-top:16px}
  .about blockquote{
    font-family:var(--hand);font-style:italic;font-size:17px;line-height:1.9;color:var(--ink);
    border-left:none;
    padding:0;
    margin-top:24px;
    position:relative;padding-left:46px;
  }
  .about blockquote::before{content:"“";position:absolute;left:0;top:-6px;font-size:36px;color:var(--ink-3);font-family:var(--serif)}
  /* 自我介绍：文字 + 工作台小线稿（.doodle 基类是 absolute，这里必须拉回流布局） */
  .intro-grid{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
  .doodle-desk{position:static;color:var(--ink-3);opacity:.9}
  @media(max-width:700px){.intro-grid{grid-template-columns:1fr}.doodle-desk{display:none}}
  /* 带队观卡片右上角的小图标 */
  .ls-ic{position:absolute;right:18px;top:18px;color:var(--ink-3);opacity:.75}

  /* 带队观：小 / 中 / 大团队三档递进（作为关于模块的第三块，与上方两块面板分隔开） */
  .ladder{margin-top:40px;padding-top:34px;border-top:var(--line) dashed var(--ink-3)}
  /* 用 .about 前缀压住 .about p 的通用字号/颜色 */
  .about .ladder-lead{
    font-size:13.5px;color:var(--ink-3);line-height:1.9;max-width:none;
    padding-left:16px;border-left:3px solid var(--red);
  }
  .ladder-lead .hand{font-size:15.5px;font-weight:600;color:var(--ink)}
  .ladder-list{
    display:grid;grid-template-columns:1fr;gap:14px;
    list-style:none;margin-top:20px;
  }
  @media(min-width:768px){.ladder-list{grid-template-columns:repeat(3,1fr);gap:18px}}
  .ladder-step{
    border:var(--line) dashed var(--ink);border-radius:3px;
    background:var(--paper-3);
    padding:20px 20px 18px;
    position:relative;
    box-shadow:2.5px 2.5px 0 var(--shadow);
    transition:transform .18s ease,box-shadow .18s ease;
  }
  .ladder-step:nth-child(odd){--tilt:-.6deg}
  .ladder-step:nth-child(even){--tilt:.5deg}
  .ladder-step:hover{transform:translate(-1px,-2px) rotate(var(--tilt,0deg));box-shadow:4.5px 4.5px 0 var(--shadow)}
  /* 三档之间的递进箭头（移动端换行后不显示） */
  @media(min-width:768px){
    .ladder-step:not(:last-child)::after{
      content:"→";position:absolute;right:-15px;top:50%;
      transform:translateY(-50%);
      font-family:var(--hand);font-size:20px;color:var(--red);
    }
  }
  .ls-scale{
    display:inline-block;
    font-family:var(--hand);font-size:12.5px;color:var(--ink-3);
    border-bottom:1px dashed var(--ink-3);padding-bottom:2px;
  }
  .ls-key{
    display:block;margin-top:11px;
    font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:clamp(19px,2.4vw,24px);line-height:1.3;color:var(--ink);
  }
  .ls-key em{
    font-style:normal;color:var(--red);
    text-decoration:underline wavy var(--red);
    text-decoration-thickness:2px;text-underline-offset:5px;
  }
  .ladder-step p{margin-top:11px;font-size:13.5px;line-height:1.85;color:var(--ink-2);max-width:none}

  /* ================= CONTACT ================= */
  .contact{padding:64px 0 72px}
  .contact-in{
    border:var(--line) dashed var(--ink);border-radius:3px;
    background:var(--paper-3);
    padding:32px 24px;
    position:relative;
    --tilt:-.7deg;
    box-shadow:3px 3px 0 var(--shadow);
  }
  @media(min-width:768px){.contact-in{padding:46px 44px}}
  /* 桌面双栏：左侧信息、右侧表单，消除大片右侧空白 */
  @media(min-width:900px){
    .contact-in{display:grid;grid-template-columns:1fr 1.15fr;gap:20px 52px;align-items:start}
    .contact-info{padding-top:4px}
    .cform{max-width:none;margin-top:0}
  }
  .contact h2{font-size:clamp(26px,4.4vw,40px);margin-bottom:14px}
  .contact p{font-size:14.5px;color:var(--ink-2);max-width:52ch;line-height:1.85}
  .contact .mail{
    display:inline-block;margin-top:22px;
    font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:clamp(18px,3.2vw,28px);
    color:var(--ink);
    border-bottom:2px dashed var(--ink);
    padding-bottom:2px;
    transition:background-color .18s linear,color .18s linear;
  }
  .contact .mail:hover{background:var(--ink);color:var(--paper)}
  .contact .mail:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
  .contact .socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .contact .socials a{
    border:var(--line) dashed var(--ink);border-radius:3px;
    padding:8px 14px;font-size:13px;color:var(--ink-2);
    transition:background-color .18s linear,color .18s linear,transform .18s linear;
  }
  .contact .socials a:hover{background:var(--ink);color:var(--paper);transform:rotate(-1.2deg)}
  .contact .socials a:active{transform:rotate(1.4deg) translate(1px,1px)}
  /* 联系表单 */
  .cform{margin-top:28px;display:flex;flex-direction:column;gap:16px;max-width:640px}
  .cform-row{display:grid;grid-template-columns:1fr;gap:16px}
  @media(min-width:640px){.cform-row{grid-template-columns:1fr 1fr}}
  .cform-field{display:flex;flex-direction:column;gap:6px}
  .cform-label{font-family:var(--hand);font-style:italic;font-size:14px;color:var(--ink-2)}
  .cform input,.cform select,.cform textarea{
    font-family:var(--sans);font-size:14px;color:var(--ink);
    background:var(--paper);
    border:var(--line) dashed var(--ink-3);border-radius:3px;
    padding:10px 12px;min-height:44px;width:100%;
    transition:border-color .15s linear,border-style .15s linear;
  }
  .cform textarea{min-height:120px;resize:vertical;line-height:1.7}
  .cform input::placeholder,.cform textarea::placeholder{color:var(--ink-3)}
  .cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--ink);border-style:solid}
  .cform-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .cform-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .cform-status{font-size:14px;color:var(--ink-2)}
  .cform-status.is-ok{color:var(--green)}
  .cform-status.is-err{color:var(--red)}
  .cform .btn[disabled]{opacity:.6;cursor:wait}


  /* ================= TRACKS（赛道年表） ================= */
  /* 手绘账簿：左侧虚线时间轨 + 四列（年份 / 模式 / 案例 / 核心系统） */
  .tl{--tl-cols:94px 118px 1fr 300px}
  .tl-head{
    display:grid;grid-template-columns:var(--tl-cols);gap:0 22px;
    padding:0 6px 9px 26px;
    font-family:var(--hand);font-style:italic;font-size:12.5px;letter-spacing:.1em;
    color:var(--red);
    border-bottom:1.5px dashed var(--ink-3);
  }
  .tl-list{position:relative}
  .tl-list::before{
    content:"";position:absolute;left:5px;top:16px;bottom:16px;
    border-left:1.5px dashed var(--ink-3);
  }
  .tl-row{
    position:relative;
    display:grid;grid-template-columns:var(--tl-cols);gap:0 22px;align-items:center;
    padding:13px 6px 13px 26px;
    border-top:1px dotted var(--tape-line);
    transition:background-color .16s ease;
  }
  .tl-row::before{
    content:"";position:absolute;left:1px;top:50%;margin-top:-4.5px;
    width:9px;height:9px;border-radius:50%;
    border:1.5px solid var(--ink-3);background:var(--paper);
    transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
  }
  .tl-row:hover{background:var(--paper-3)}
  .tl-row:hover::before{border-color:var(--ink);background:var(--ink);transform:scale(1.15)}
  .tl-year{
    font-family:var(--hand);font-weight:700;font-size:15px;
    font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--ink);
    white-space:nowrap;
  }
  .tl-year em{font-style:normal;color:var(--red)}
  .tl-mode{
    justify-self:start;
    font-size:12.5px;color:var(--ink-2);white-space:nowrap;
    border:1.5px dashed var(--ink-3);border-radius:2px;padding:1px 9px;
    transform:rotate(-.6deg);
    transition:color .16s ease,border-color .16s ease,transform .16s ease;
  }
  .tl-row:nth-child(even) .tl-mode{transform:rotate(.7deg)}
  .tl-row:hover .tl-mode{color:var(--ink);border-color:var(--ink);transform:rotate(0)}
  .tl-case{
    font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:16.5px;line-height:1.45;color:var(--ink);
  }
  .tl-sys{font-size:12.5px;line-height:1.7;color:var(--ink-3);letter-spacing:.02em}
  /* 仍在做的赛道：红点 */
  .tl-row--live::before{background:var(--red);border-color:var(--red)}
  /* 最新一行：纸色加深 + 红章 */
  .tl-row--now{background:var(--paper-2)}
  .tl-row--now:hover{background:var(--paper-2)}
  .tl-now{
    display:inline-block;margin-left:9px;vertical-align:2px;
    font-family:var(--hand);font-style:italic;font-size:11.5px;color:var(--red);
    border:1.5px dashed var(--red);border-radius:2px;padding:0 7px;
    transform:rotate(-1.6deg);
  }
  .tl-note{
    margin-top:22px;
    font-family:var(--hand);font-style:italic;font-size:16.5px;line-height:1.9;color:var(--ink);
    padding-left:20px;border-left:3px solid var(--red);
  }
  /* 窄屏：一张一行便签（年份 + 模式 同排，案例与系统各占一行） */
  @media(max-width:1023px){
    .tl-head{display:none}
    .tl-list::before{left:3px;top:12px;bottom:12px}
    .tl-row{
      display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
      padding:14px 4px 14px 22px;
    }
    .tl-row::before{left:-1px}
    .tl-case,.tl-sys{flex:0 0 100%}
    .tl-case{font-size:16px;margin-top:2px}
  }

  /* ================= CAPS ================= */
  .caps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  @media(max-width:767px){.caps{grid-template-columns:1fr}}
  .cap{
    position:relative;
    border:var(--line) dashed var(--ink);border-radius:3px;
    background:var(--paper);
    padding:16px 20px;
    transition:background .15s linear, transform .15s linear;
  }
  .cap:nth-child(odd){--tilt:-.5deg}
  .cap:nth-child(even){--tilt:.4deg}
  .cap:hover{background:var(--ink);transform:rotate(0deg)}
  .cap:hover .cap-t,.cap:hover .cap-n{color:var(--paper)}
  .cap .cap-n{position:absolute;top:10px;right:14px;font-family:var(--hand);font-size:13px;color:var(--ink-3);transform:rotate(4deg);transition:color .15s linear}
  .cap .cap-t{font-family:var(--serif);font-style:italic;font-weight:700;font-size:16px;transition:color .15s linear}
  .cap p{margin-top:6px;font-family:var(--hand);font-size:13.5px;line-height:1.75;color:var(--ink-3);transition:color .15s linear}
  .cap:hover p{color:var(--paper)}

  /* ================= FOOTER ================= */
  .foot{background:var(--paper-2);border-top:var(--line) dashed var(--ink);padding:32px 0}
  .foot-in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
  .foot .f-logo{font-family:var(--serif);font-style:italic;font-weight:700;font-size:17px}
  .foot .f-m{font-family:var(--hand);font-size:13px;color:var(--ink-3);display:inline-block;padding:10px 6px;margin:-10px -6px}
  .foot a:hover{color:var(--ink);border-bottom:1px dashed var(--ink)}

  /* ================= 首页最新文章 ================= */
  .more{
    flex:none;align-self:flex-start;
    font-family:var(--hand);font-style:italic;font-size:15px;color:var(--red);
    padding:8px 2px;border-bottom:1.5px dashed transparent;
    transition:border-color .15s linear,transform .15s linear;
  }
  .more:hover{border-bottom-color:var(--red);transform:translateX(2px)}
  .more:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
  .home-posts{display:grid;margin-top:6px;border-top:1.5px dashed var(--ink-3)}
  .hp{
    display:grid;grid-template-columns:150px 1fr 22px;gap:22px;align-items:baseline;
    padding:17px 6px;border-bottom:1px dotted var(--tape-line);
    transition:background-color .16s ease;
  }
  .hp:hover{background:var(--paper-3)}
  .hp-date{font-family:var(--hand);font-style:italic;font-size:13px;color:var(--ink-3);white-space:nowrap}
  .hp-main{min-width:0}
  .hp-title{display:block;font-family:var(--serif);font-style:italic;font-weight:700;font-size:17.5px;line-height:1.5;color:var(--ink);transition:color .16s ease}
  .hp:hover .hp-title{color:var(--red)}
  .hp-sum{margin-top:5px;font-size:13.5px;line-height:1.8;color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
  .hp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .hp-arrow{font-family:var(--hand);font-size:15px;color:var(--ink-3);justify-self:end;transition:transform .16s ease,color .16s ease}
  .hp:hover .hp-arrow{color:var(--red);transform:translateX(3px)}

  /* ================= 浮动写信按钮 ================= */
  .fab{
    position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 16px;
    font-family:var(--hand);font-style:italic;font-size:14.5px;color:var(--ink);
    background:var(--paper-3);
    border:var(--line) dashed var(--ink);border-radius:3px;
    box-shadow:3px 3px 0 var(--shadow);
    transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease;
  }
  .fab:hover{background:var(--ink);color:var(--paper);transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--shadow)}
  .fab:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
  .fab svg{flex:none}

  /* ================= SUBPAGE（文章 / 本站怎么做的） ================= */
  .page{padding:52px 0 76px}
  .page-head{margin-bottom:34px}
  .page-kicker{display:inline-block;margin-bottom:10px;font-family:var(--hand);font-style:italic;font-size:13px;color:var(--red);letter-spacing:.06em}
  .page-title{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(27px,4.6vw,38px);line-height:1.2}
  .page-lead{margin-top:14px;font-size:15px;line-height:1.9;color:var(--ink-2);max-width:62ch}
  .back{display:inline-flex;align-items:center;gap:6px;margin-bottom:26px;padding:8px 2px;font-family:var(--hand);font-style:italic;font-size:14px;color:var(--ink-2);border-bottom:1.5px dashed transparent}
  .back:hover{color:var(--ink);border-bottom-color:var(--ink)}

  /* —— 文章列表 —— */
  .post-list{display:grid;gap:18px}
  .post-card{
    display:grid;grid-template-columns:112px 1fr;gap:26px;align-items:start;
    padding:22px 24px;border:var(--line) dashed var(--ink);border-radius:3px;
    background:var(--paper-3);box-shadow:2.5px 2.5px 0 var(--shadow);
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
  }
  .post-card:hover{transform:translate(-1px,-2px);box-shadow:4.5px 4.5px 0 var(--shadow);background:var(--paper)}
  .post-when{font-family:var(--hand);font-style:italic;font-size:13px;color:var(--ink-3);line-height:1.9}
  .post-when b{display:block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:13px;color:var(--ink)}
  .post-title{font-family:var(--serif);font-style:italic;font-weight:700;font-size:19px;line-height:1.45}
  .post-card:hover .post-title{color:var(--red)}
  .post-sum{margin-top:8px;font-size:14px;line-height:1.85;color:var(--ink-2)}
  .post-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .tag{font-size:11.5px;color:var(--ink-3);border:1px dashed var(--ink-3);border-radius:2px;padding:1px 8px}
  .tag--live{color:var(--red);border-color:var(--red)}

  /* —— 文章详情 —— */
  .article{max-width:74ch}
  .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;font-family:var(--hand);font-style:italic;font-size:13px;color:var(--ink-3)}
  .article-title{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(25px,4.2vw,34px);line-height:1.32}
  .article-body{margin-top:30px;font-size:16px;line-height:2.05;color:var(--ink-2)}
  .article-body > * + *{margin-top:18px}
  .article-body h2{font-family:var(--serif);font-style:italic;font-weight:700;font-size:22px;line-height:1.5;color:var(--ink);margin-top:40px}
  .article-body h3{font-family:var(--sans);font-weight:700;font-size:16.5px;color:var(--ink);margin-top:30px}
  .article-body h4{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);margin-top:24px}
  .article-body h2 + p,.article-body h3 + p,.article-body h2 + ul,.article-body h3 + ul{margin-top:10px}
  .article-body strong{color:var(--ink);font-weight:700}
  .article-body a{color:var(--red);border-bottom:1px dashed var(--red)}
  .article-body ul,.article-body ol{padding-left:1.4em}
  .article-body li + li{margin-top:8px}
  .article-body ul li{list-style:none;position:relative}
  .article-body ul li::before{content:"—";position:absolute;left:-1.2em;color:var(--red)}
  .article-body ol li{list-style:decimal}
  .article-body blockquote{padding:12px 0 12px 20px;border-left:3px solid var(--red);font-family:var(--hand);font-style:italic;font-size:16px;line-height:1.95;color:var(--ink)}
  .article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;background:var(--paper-2);border-radius:2px;padding:1px 5px;color:var(--ink)}
  .article-body pre{background:var(--paper-2);border:1.5px dashed var(--ink-3);border-radius:3px;padding:16px 18px;overflow-x:auto;line-height:1.72}
  .article-body pre code{background:none;padding:0;font-size:13px}
  .article-body hr{border:none;border-top:1.5px dashed var(--ink-3);margin:34px 0}
  .article-body table{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px;line-height:1.7}
  .article-body th,.article-body td{padding:9px 12px;border:1px solid var(--ink-3);text-align:left;vertical-align:top;word-break:break-word}
  .article-body th{background:var(--paper-2);font-family:var(--sans);font-weight:700;color:var(--ink)}
  .article-body tbody tr:nth-child(even){background:var(--paper-3)}
  .article-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:46px;padding-top:22px;border-top:1.5px dashed var(--ink-3)}
  .state{padding:26px 0;font-family:var(--hand);font-style:italic;font-size:15px;color:var(--ink-3)}
  .state.err{color:var(--red)}
  .state a{border-bottom:1px dashed currentColor}

  /* —— 本站怎么做的 —— */
  .how-sec + .how-sec{margin-top:52px}
  .how-h{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(19px,2.8vw,24px)}
  .how-sub{margin-top:6px;font-family:var(--hand);font-style:italic;font-size:14px;color:var(--ink-3)}
  .flow{margin-top:22px;padding:20px;border:var(--line) dashed var(--ink);border-radius:3px;background:var(--paper-3)}
  .flow-lane{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0}
  .flow-lane + .flow-lane{border-top:1px dashed var(--ink-3)}
  .flow-k{flex:0 0 76px;font-family:var(--hand);font-style:italic;font-size:13px;color:var(--red)}
  .flow-node{padding:7px 12px;font-size:13.5px;line-height:1.45;color:var(--ink);border:1.5px dashed var(--ink-3);border-radius:2px;background:var(--paper)}
  .flow-node small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3)}
  .flow-node--main{border-style:solid;border-color:var(--ink);background:var(--paper-2);font-weight:600}
  .flow-node--red{border-color:var(--red);color:var(--red)}
  .flow-arrow{font-family:var(--hand);font-size:15px;line-height:1;color:var(--red)}
  .flow-arrow::before{content:"→"}
  .tbl-wrap{margin-top:18px;overflow-x:auto}
  .tbl{width:100%;border-collapse:collapse;font-size:14px}
  .tbl th{padding:0 12px 8px;font-family:var(--hand);font-style:italic;font-weight:400;font-size:13px;color:var(--red);text-align:left;border-bottom:1.5px dashed var(--ink-3);white-space:nowrap}
  .tbl td{padding:11px 12px;vertical-align:top;color:var(--ink-2);border-bottom:1px dotted var(--tape-line);line-height:1.75}
  .tbl td:first-child{color:var(--ink);white-space:nowrap;font-weight:600}
  .tbl tr:hover td{background:var(--paper-3)}
  .perf{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:20px}
  .perf-item{padding:16px 16px 14px;border:1.5px dashed var(--ink);border-radius:3px;background:var(--paper-3);box-shadow:2px 2px 0 var(--shadow)}
  .perf-n{font-family:var(--hand);font-weight:700;font-size:26px;line-height:1.2;color:var(--ink)}
  .perf-n em{font-style:normal;color:var(--red)}
  .perf-t{margin-top:6px;font-size:12px;line-height:1.6;color:var(--ink-3)}
  .panels{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
  @media(min-width:860px){.panels{grid-template-columns:1fr 1fr}}
  .panel{padding:20px 22px;border:var(--line) dashed var(--ink);border-radius:3px;background:var(--paper-3)}
  .panel h3{margin-bottom:8px;font-family:var(--serif);font-style:italic;font-weight:700;font-size:17px}
  .panel p{font-size:14px;line-height:1.9;color:var(--ink-2)}
  .panel p + p{margin-top:10px}
  .panel code,.note-line code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:var(--paper-2);border-radius:2px;padding:1px 5px;color:var(--ink)}
  .note-line{margin-top:18px;font-family:var(--hand);font-style:italic;font-size:14px;line-height:1.95;color:var(--ink-2);padding-left:18px;border-left:3px solid var(--red)}

  /* ================= MOBILE 微调 ================= */
  @media(max-width:720px){
    .post-card{grid-template-columns:1fr;gap:10px;padding:18px 18px}
    .post-when{display:flex;gap:10px;align-items:center}
    .post-when b{display:inline}
    .hp{grid-template-columns:1fr;gap:5px;padding:15px 4px}
    .hp-arrow{display:none}
    .hp-date{font-size:12.5px}
    .hp-title{font-size:16.5px}
    .more{font-size:14px}
    .fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:10px 14px;font-size:13.5px}
    .flow-lane{flex-direction:column;align-items:flex-start;gap:8px}
    .flow-k{flex:none}
    .flow-arrow::before{content:"↓"}
    .article-foot{flex-direction:column;align-items:flex-start}
  }

  @media(max-width:480px){
    .hero-actions .btn{flex:1 1 100%}
    .foot-in{justify-content:center;text-align:center}
    .sec{padding:48px 0}
    .stat .n{font-size:34px}
  }

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none!important;animation:none!important}
  }