/*PCB点网首页CSS */
 html{scroll-behavior:smooth;font-size:16px;}
@font-face {
  font-family: 'Noto Sans SC';
  font-weight: 300;
  src: url("./fonts/NotoSansSC‑300.woff2") format("woff2");
  font‑display: swap;
}
@font-face {
  font-family: 'Noto Sans SC';
  font-weight:400;
  src: url("./fonts/NotoSansSC‑400.woff2") format("woff2");
  font‑display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  font‑weight:400;
  src: url("./fonts/JetBrainsMono‑400.woff2") format("woff2");
  font‑display: swap;
}

:root{

}
 :root{
    --paper:#f3f6f2;
    --card:#ffffff;
    --ink:#141c19;
    --ink-2:#3c4c44;
    --muted:#68776e;
    --line:#dde3dd;
    --line-strong:#b8c4bb;
    --green:#246347;
    --green-soft:rgba(47,107,79,.08);
    --copper:#b4782f;
    --copper-soft:#c98d45;
    --tech-blue:#385c88;
    --shadow-sm:0 1px 2px rgba(20,28,25,.05),0 3px 10px -6px rgba(20,28,25,.12);
    --shadow-lg:0 2px 5px rgba(20,28,25,.07),0 16px 32px -18px rgba(20,28,25,.22);
    --mono:'JetBrains Mono',ui-monospace,SFMono‑Regular,Menlo,Consolas,monospace;
    --sans:'Noto Sans SC',‑apple‑system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans‑serif;
    --maxw:1240px;
	--sans:'Noto Sans SC',‑apple‑system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans‑serif;
    --mono:'JetBrains Mono',ui‑monospace,SFMono‑Regular,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:var(--sans);background:var(--paper);color:var(--ink);
    line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
    font-size:16px;position:relative;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(50% 38% at 12% 4%,  rgba(180,120,47,.09), transparent 58%),
      radial-gradient(44% 34% at 86% 10%, rgba(47,107,79,.10), transparent 58%),
      radial-gradient(48% 40% at 80% 84%, rgba(84,116,168,.09), transparent 58%),
      linear-gradient(180deg,#f6f7f2 0%,#f2f5f0 50%,#edf1ed 100%);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:repeating-linear-gradient(transparent 0px,transparent 4px,rgba(36,99,71,0.02) 4px,rgba(36,99,71,0.02) 5px);
    animation:scanMove 16s linear infinite;opacity:0.22;
  }
  @keyframes scanMove {
    0%{background-position:0 0;}
    100%{background-position:0 120px;}
  }
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  ::selection{background:rgba(180,120,47,.24)}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
  .reveal.in{opacity:1;transform:none}
  @keyframes borderShine{
    0%{background-position:0% 50%;}
    100%{background-position:100% 50%;}
  }
  .shine-hover{
    position:relative;overflow:hidden;
  }
  .shine-hover::before{
    content:"";position:absolute;inset:0;
    padding:1px;border-radius:inherit;
    background:linear-gradient(90deg,transparent,var(--copper-soft),var(--tech-blue),transparent);
    background-size:200% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) content-box;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) content-box;
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity 0.28s;
  }
  .shine-hover:hover::before{
    opacity:1;animation:borderShine 1.2s ease forwards;
  }
  a.tag-link{cursor:pointer;transition:0.2s;}
  a.tag-link:hover{background:rgba(47,107,79,0.16);color:var(--green);}
  /* 文章浏览量 */
  .art-view{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
    body::after{animation:none;}
    .shine-hover::before{display:none;}
  }
  /* ===== top bar ===== */
  .topbar{position:sticky;top:0;z-index:60;background:rgba(243,246,242,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .top-in{display:flex;align-items:center;justify-content:space-between;height:68px}
  .myname{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.25px;font-size:17px}
  .myname .seal{width:30px;height:30px;flex:none}
  .nav-links{display:flex;gap:34px;font-size:16px;color:var(--ink-2)}
  .nav-links a{position:relative;padding:7px 0}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--copper);border-radius:2px;transition:width .25s}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{width:100%}
  .burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:8px}
  .mobile-menu{
    position:fixed;top:68px;left:0;right:0;background:rgba(243,246,242,.96);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);z-index:55;
    max-height:0;overflow:hidden;transition:max-height .32s ease;
  }
  .mobile-menu.open{max-height:300px;}
  .mobile-menu-inner{padding:22px 32px;display:flex;flex-direction:column;gap:18px;font-size:17px;}
  .mobile-menu-inner a{padding:7px 0;}
  /* ===== hero carousel ===== */
  .hero{position:relative;margin-top:0 !important;padding-top:0 !important;}
  .carousel{
    position:relative;
    width:100%;
    margin:0 !important;
    border-radius:0;
    overflow:hidden;
    height:clamp(380px,62vh,600px);
    box-shadow:var(--shadow-lg);
  }
  .slides{display:flex;height:100%;transition:transform .7s cubic-bezier(.65,.05,.36,1)}
  .slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;cursor:pointer;}
  .slide>a{display:block;width:100%;height:100%;}
  .slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 5.5s linear}
  .slide.active>img{transform:scale(1)}
  .slide .ov{
    position:absolute;inset:0;display:flex;align-items:flex-end;
    padding:clamp(32px,5vw,60px);
    background:linear-gradient(180deg,rgba(15,24,20,.02) 26%,rgba(15,24,20,.70) 100%);
    pointer-events:none;
  }
  .slide .ov .inner{max-width:780px;color:#f4f7f4;margin:0 auto;width:100%;padding:0 32px;}
  .slide .ov .mk{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(255,255,255,.9);margin-bottom:16px;display:flex;align-items:center;gap:12px;
    opacity:0;transform:translateY(14px);transition:.6s ease .1s}
  .slide .ov .mk::before{content:"";width:32px;height:1px;background:var(--copper-soft)}
  .slide .ov h2{font-size:clamp(30px,4.4vw,48px);font-weight:700;line-height:1.22;letter-spacing:.2px;
    opacity:0;transform:translateY(16px);transition:.6s ease .2s}
  .slide .ov p{font-size:17.5px;color:rgba(255,255,255,.88);margin-top:14px;max-width:580px;
    opacity:0;transform:translateY(14px);transition:.6s ease .32s}
  .slide.active .ov .mk,.slide.active .ov h2,.slide.active .ov p{opacity:1;transform:none}
  .carousel .arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:10;
    width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.42);
    background:rgba(15,24,20,.30);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
    display:grid;place-items:center;transition:.24s;
  }
  .carousel .arrow:hover{background:rgba(217,147,68,.72);border-color:transparent}
  .carousel .arrow.prev{left:24px}
  .carousel .arrow.next{right:24px}
  .carousel .dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:10;display:flex;gap:10px}
  .carousel .dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.54);cursor:pointer;border:none;transition:.24s;padding:0}
  .carousel .dot.on{width:26px;border-radius:6px;background:var(--copper-soft)}
  .carousel .count{position:absolute;right:24px;top:22px;z-index:10;font-family:var(--mono);
    font-size:14px;color:rgba(255,255,255,.92);letter-spacing:.1em;
    background:rgba(15,24,20,.34);backdrop-filter:blur(8px);padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.26)}
  }
  .hero-strip{padding:48px 0 16px}
  .hero-intro .mono-kick{font-family:var(--mono);font-size:14px;letter-spacing:.16em;color:var(--copper);
    text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}
  .hero-intro .mono-kick::before{content:"";width:32px;height:1px;background:var(--copper)}
  .hero-intro h1{font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.38;letter-spacing:.2px}
  .hero-intro h1 .soft{color:var(--muted);font-weight:400}
  .hero-intro .lead{max-width:640px;font-size:17px;color:var(--ink-2);margin-top:14px;line-height:1.8;}
  .hero-intro .lead a{border-bottom:1px solid var(--copper-soft);color:var(--green);font-weight:500}
  .hero-links{display:flex;gap:30px;flex-wrap:wrap;margin-top:28px}
  .hero-links a{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:17px;color:var(--ink);transition:.22s;padding:5px 0;}
  .hero-links a:hover{color:var(--green)}
  .hero-links a:hover .arrow{transform:translateX(4px)}
  .hero-links .arrow{color:var(--copper);font-family:var(--mono);transition:transform .22s;font-size:17px;}
  .hero-facts{display:flex;gap:0;margin-top:44px;border-top:1px solid var(--line);padding-top:30px;flex-wrap:wrap}
  .hero-facts .fact{flex:1;min-width:150px;padding-right:28px;position:relative}
  .hero-facts .fact + .fact::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
  .hero-facts b{display:block;font-size:30px;font-weight:700;color:var(--ink);letter-spacing:.5px}
  .hero-facts b em{font-style:normal;font-family:var(--mono);color:var(--copper);font-size:20px;margin-left:3px}
  .hero-facts .lab{font-size:15px;color:var(--muted);margin-top:6px}
  .pcb-highlight{margin-top:36px;background:rgba(47,107,79,0.05);border:1px solid var(--line);border-radius:16px;padding:24px;}
  .pcb-highlight h3{font-size:19px;margin-bottom:10px;color:var(--green);}
  .pcb-highlight p{font-size:16px;color:var(--ink-2);line-height:1.78;}
  /* ===== section ===== */
  section{padding:72px 0}
  #work{background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.16))}
  #repair{background:linear-gradient(180deg,rgba(56,92,136,.06),rgba(56,92,136,.02));}
  #diy{background:linear-gradient(180deg,rgba(47,107,79,.06),rgba(47,107,79,.02))}
  #articles{background:linear-gradient(180deg,rgba(84,116,168,.06),rgba(84,116,168,.02))}
  #skills{background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.10));}
  #about{background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.10))}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:22px;margin-bottom:42px;border-bottom:1px solid var(--line);padding-bottom:18px}
  .sec-title{font-size:26px;font-weight:700;display:flex;align-items:center;gap:14px;letter-spacing:.2px}
  .sec-title .idx{font-family:var(--mono);font-size:14px;color:var(--copper);letter-spacing:.08em}
  .sec-more{font-family:var(--mono);font-size:15px;color:var(--muted);transition:.22s}
  .sec-more:hover{color:var(--green)}
  /* work-card footer */
  .work-card-footer{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    font-family:var(--mono);
    font-size:13.5px;
    color:var(--muted);
  }
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .work-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
    box-shadow:var(--shadow-sm);transition:transform .26s ease,box-shadow .26s ease,border-color .26s;
    display:block;shine-hover;
  }
  .work-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
  .work-card .imgwrap{overflow:hidden;aspect-ratio:4/3}
  .work-card .imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .work-card:hover .imgwrap img{transform:scale(1.05)}
  .work-body{padding:24px 24px 26px}
  .work-tags{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
  .tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--green);
    border:1px solid rgba(47,107,79,.32);background:var(--green-soft);border-radius:7px;padding:4px 11px}
  .work-card h3{font-size:18px;font-weight:700;margin-bottom:9px;letter-spacing:.2px}
  .work-card p{font-size:15.5px;color:var(--ink-2);line-height:1.75;}
  /* repair */
  .repair-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .repair-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .26s ease,box-shadow .26s ease;shine-hover;}
  .repair-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:var(--line-strong);}
  .repair-imgwrap{aspect-ratio:4/3;overflow:hidden;}
  .repair-imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .55s;}
  .repair-card:hover .repair-imgwrap img{transform:scale(1.04);}
  .repair-body{padding:24px;}
  .repair-status{display:inline-block;font-family:var(--mono);font-size:12px;padding:4px 9px;border-radius:6px;margin-bottom:11px;}
  .status-done{background:rgba(36,99,71,0.09);color:#246347;border:1px solid rgba(36,99,71,0.28);}
  .repair-card h3{font-size:17.5px;font-weight:700;margin-bottom:7px;}
  .repair-desc{font-size:15.2px;color:var(--ink-2);line-height:1.72;margin-bottom:11px;}
  .repair-info{font-size:13.2px;color:var(--muted);font-family:var(--mono);}
  /* skills */
  .skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;}
  .skill-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm);shine-hover;transition:transform .24s ease;}
  .skill-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
  .skill-card h4{font-size:17px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
  .skill-card h4 a{transition:0.2s;}
  .skill-card h4 a:hover{color:var(--green);}
  .skill-tags{display:flex;flex-wrap:wrap;gap:8px;}
  /* diy */
  .diy-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:30px;align-items:stretch}
  .diy-banner{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);min-height:340px;display:block;shine-hover;transition:transform .26s ease;}
  .diy-banner:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
  .diy-banner img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
  .diy-banner .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,25,.04),rgba(20,30,25,.56));display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#f4f7f4}
  .diy-banner .ov .mk{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);margin-bottom:10px}
  .diy-banner .ov h3{font-size:21px;font-weight:700}
  .diy-banner .ov p{font-size:15px;opacity:.92;margin-top:6px}
  .diy-list{display:flex;flex-direction:column;gap:20px}
  .diy-item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
    display:block;box-shadow:var(--shadow-sm);transition:.24s;flex:1;shine-hover;
  }
  .diy-item-inner{display:flex;gap:18px;align-items:flex-start;}
  .diy-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
  .diy-item .ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:rgba(180,120,47,.11);border:1px solid rgba(180,120,47,.28);color:var(--copper);font-size:22px;
  }
  .diy-item h4{font-size:17px;font-weight:700;margin-bottom:6px}
  .diy-item p{font-size:15px;color:var(--ink-2);line-height:1.72;}
  /* articles 增加浏览量布局 */
  .art-list{display:flex;flex-direction:column}
  .art{display:block;border-bottom:1px solid var(--line);border-radius:12px;transition:background .24s;shine-hover;padding:24px 10px;}
  .art-inner{display:grid;grid-template-columns:110px 1fr auto;gap:22px;align-items:baseline;}
  .art-meta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
  .art:first-child{border-top:1px solid var(--line)}
  .art:hover{background:rgba(255,255,255,.65)}
  .art .date{font-family:var(--mono);font-size:14px;color:var(--muted);letter-spacing:.03em}
  .art .atitle{font-size:18px;font-weight:600;letter-spacing:.2px}
  .art .atitle .ex{display:block;font-size:15px;font-weight:400;color:var(--ink-2);margin-top:6px;line-height:1.75}
  .art .artags{display:flex;gap:8px;flex-wrap:wrap;}
  .art .artags .tag{color:var(--copper);border-color:rgba(180,120,47,.30);background:rgba(180,120,47,.07)}
  /* about */
  .about-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
  .about-img{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .about-img img{aspect-ratio:4/3;object-fit:cover;width:100%}
  .about-copy p{color:var(--ink-2);font-size:17px;margin-bottom:16px;line-height:1.8;}
  .about-copy .focus{margin-top:28px}
  .about-copy .focus h4{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--copper);margin-bottom:14px;text-transform:uppercase}
  .focus-tags{display:flex;flex-wrap:wrap;gap:10px}
  .focus-tags .tag{font-size:13px;padding:6px 14px;}
  .contact-line{margin-top:32px;font-size:16px;color:var(--ink)}
  .contact-line a{border-bottom:1px solid var(--copper-soft);color:var(--green);font-weight:500}
  /* footer */
  footer{padding:44px 0 26px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(28,42,35,.05),rgba(47,107,79,.10))}
  .foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  .foot-in .copy{font-size:14px;color:var(--muted)}
  .foot-in .toc{display:flex;gap:24px;font-size:15px;color:var(--ink-2)}
  .foot-in .toc a:hover{color:var(--green)}
  .foot-in .rss{font-family:var(--mono);font-size:14px;color:var(--muted);border:1px solid var(--line-strong);border-radius:7px;padding:4px 12px}
  .foot-in .rss:hover{color:var(--copper);border-color:var(--copper-soft)}
  .beian{max-width:var(--maxw);margin:28px auto 0;padding:16px 30px 0;border-top:1px dashed var(--line-strong);text-align:center;font-family:var(--mono);font-size:13.5px;color:var(--muted)}
  .beian a{color:var(--muted);transition:.22s}
  .beian a:hover{color:var(--green)}
  /* 修复技能卡片标签点击被shine-hover遮罩拦截 */
  .skill-card .skill-tags a.tag-link {
    position: relative;
    z-index: 3;
    pointer-events: auto !important;
  }
  /* responsive */
  @media(max-width:960px){
    .nav-links{display:none}
    .burger{display:block}
    .work-grid{grid-template-columns:1fr 1fr}
    .repair-grid{grid-template-columns:1fr 1fr;}
    .diy-grid{grid-template-columns:1fr}
    .about-in{grid-template-columns:1fr}
    .art-inner{grid-template-columns:1fr;gap:8px}
    .art-meta-row{justify-content:flex-start;margin-top:8px;}
    .hero-facts .fact{min-width:130px}
    .carousel .arrow{width:42px;height:42px}
    .slide .ov .inner{padding:0 24px;}
  }
  @media(max-width:600px){
    .work-grid{grid-template-columns:1fr}
    .repair-grid{grid-template-columns:1fr;}
    section{padding:56px 0}
    .carousel{height:clamp(320px,60vw,420px);border-radius:0;margin:0;}
    .work-body{padding:20px 20px 22px;}
    .hero-links{flex-direction:column;gap:16px;}
    .wrap{padding:0 20px;}
  }