/* AllTwinCAT3 文章页共享样式 / Shared article page styles */
:root{
  --blue:#005a96;--blue-dark:#003f6e;--blue-mid:#0072be;
  --blue-light:#e8f2f9;--blue-pale:#f0f6fb;
  --accent:#0090d4;--white:#ffffff;--off-white:#f7f9fb;
  --border:#d0dce8;--text:#1a2a3a;--muted:#5a7080;--light-txt:#8a9baa;
  --green:#2e9e5b;--gold:#c8860a;--gold-light:#fff8ec;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--text);font-family:'Noto Sans SC','Barlow',sans-serif;font-size:15px;line-height:1.65;}

/* 顶部导航栏 / Top navigation bar */
.art-nav{background:var(--blue-dark);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:10;}
.art-back{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.7);text-decoration:none;letter-spacing:.06em;text-transform:uppercase;transition:color .15s;}
.art-back:hover{color:#fff;}
.art-nav-brand{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.1em;}

/* 文章内容区 / Article content area */
.art-wrap{max-width:860px;margin:0 auto;padding:40px 40px 80px;}
.art-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--blue);letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.art-eyebrow::before{content:'';width:20px;height:1px;background:var(--blue);}
.art-h1{font-family:'Barlow','Noto Sans SC',sans-serif;font-weight:800;font-size:clamp(20px,3.5vw,30px);color:var(--text);line-height:1.25;margin-bottom:16px;}
.art-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:20px;border-bottom:2px solid var(--blue-light);}
.art-tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--blue);background:var(--blue-light);border:1px solid var(--border);padding:2px 8px;letter-spacing:.06em;}
.art-date{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--light-txt);}

/* 正文排版 / Body typography */
.art-body h2{font-family:'Barlow','Noto Sans SC',sans-serif;font-weight:700;font-size:18px;color:var(--text);margin:32px 0 12px;padding-left:14px;border-left:3px solid var(--blue);}
.art-body h3{font-weight:700;font-size:15px;color:var(--blue);margin:22px 0 8px;}
.art-body p{font-size:14px;color:var(--muted);line-height:1.85;margin-bottom:14px;}
.art-body p strong{color:var(--text);font-weight:600;}
.art-body ul,.art-body ol{margin:0 0 16px 20px;}
.art-body li{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:4px;}
.art-body li strong{color:var(--text);}
.art-body code{font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--blue-light);padding:1px 5px;color:var(--blue);}

/* 代码块 / Code block */
.code-block{background:var(--blue-dark);padding:20px 24px;margin:16px 0;overflow-x:auto;}
.code-block pre{font-family:'JetBrains Mono',monospace;font-size:12px;color:#a8d8f0;line-height:1.7;white-space:pre;margin:0;}
.code-block .c1{color:#6a9955;}
.code-block .k{color:#569cd6;}
.code-block .t{color:#4ec9b0;}
.code-block .s{color:#ce9178;}
.code-block .n{color:#dcdcaa;}

/* 提示框 / Info and tip boxes */
.infobox{background:var(--blue-pale);border:1px solid var(--border);border-left:3px solid var(--blue);padding:16px 20px;margin:20px 0;}
.infobox p{font-size:13px;color:var(--muted);margin:0;}
.infobox strong{color:var(--blue);}
.tip{background:var(--gold-light);border-left:3px solid var(--gold);padding:14px 18px;margin:16px 0;}
.tip p{font-size:13px;color:#7a5000;margin:0;}

/* 底部推荐区 / Footer CTA */
.art-footer{margin-top:48px;padding:28px 32px;background:var(--blue-dark);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.art-footer-text{color:rgba(255,255,255,.7);font-size:13px;line-height:1.7;}
.art-footer-text strong{color:#fff;display:block;margin-bottom:4px;}
.art-footer-cta{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#fff;font-size:13px;font-weight:700;padding:11px 24px;text-decoration:none;letter-spacing:.04em;transition:background .15s;white-space:nowrap;flex-shrink:0;}
.art-footer-cta:hover{background:#a06c00;}

/* 响应式 / Responsive */
@media(max-width:640px){
  .art-wrap{padding:24px 18px 48px;}
  .art-nav{padding:12px 16px;}
  .art-h1{font-size:18px;}
  .art-body h2{font-size:16px;}
  .code-block{padding:14px 16px;}
  .code-block pre{font-size:11px;}
  .art-footer{flex-direction:column;}
  .art-footer-cta{width:100%;justify-content:center;}
}