/* === Chinese font support === */
.lang-cn{font-family:'Noto Sans SC','IBM Plex Sans',-apple-system,sans-serif;line-height:1.8}

/* === Article Header === */
.article-header{padding-top:112px;padding-bottom:40px;border-bottom:1px solid #e0e0e0}
.back-link{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#888;text-decoration:none;transition:color 0.2s;display:inline-block;margin-bottom:24px}
.back-link:hover{color:#0a0a0a}
.article-header h1{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:#0a0a0a;line-height:1.3;margin-bottom:16px}
.article-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.article-meta span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888}
.article-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#444;background:#e8e4f0;padding:2px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:0.8px}

/* === TL;DR Box === */
.tldr{border:1px solid #0a0a0a;padding:24px;margin:32px 0;background:#fff}
.tldr-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#0a0a0a;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;font-weight:600}
.tldr p{font-size:14px;color:#444;line-height:1.7;margin-bottom:10px;padding-left:16px;position:relative}
.tldr p:last-child{margin-bottom:0}
.tldr p::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:#0a0a0a;border-radius:50%}

/* === Metric Strip === */
.metric-strip{display:flex;gap:0;border:1px solid #e0e0e0;margin:28px 0}
.metric-item{flex:1;padding:16px 20px;border-right:1px solid #e0e0e0;text-align:center}
.metric-item:last-child{border-right:none}
.metric-num{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:20px;color:#0a0a0a;display:block}
.metric-label{font-size:10px;color:#888;margin-top:3px;text-transform:uppercase;letter-spacing:0.3px;display:block}

/* === Article Body === */
.article-body{padding:40px 0 56px}
.article-body p{font-size:15px;color:#444;line-height:1.8;margin-bottom:24px}
.article-body p strong{color:#0a0a0a;font-weight:600}
.article-body h2{font-size:20px;font-weight:700;color:#0a0a0a;margin-top:44px;margin-bottom:16px;letter-spacing:-0.3px}
.article-body h3{font-size:16px;font-weight:700;color:#555;margin-top:32px;margin-bottom:12px}
.article-body blockquote{border-left:3px solid #ddd;padding-left:16px;margin:24px 0;font-style:italic;color:#555}
.article-body a{color:#444;border-bottom:1px solid #ccc;text-decoration:none;transition:all 0.2s}
.article-body a:hover{color:#0a0a0a;border-color:#0a0a0a}
.section-lead{font-size:15px;color:#0a0a0a;font-weight:600;line-height:1.7;margin-bottom:16px}

/* === Dimension blocks === */
.dimension{margin:28px 0;padding:24px;border:1px solid #e0e0e0;background:#fff}
.dimension-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.dimension p{font-size:14px;color:#444;line-height:1.7;margin-bottom:8px}
.dimension p:last-child{margin-bottom:0}
.dimension p strong{color:#0a0a0a}

/* === Callout === */
.callout{border:1px solid #e0e0e0;padding:24px;margin:28px 0;background:#fff}
.callout-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.callout p{font-size:14px;color:#444;line-height:1.7;margin-bottom:10px}
.callout p:last-child{margin-bottom:0}

/* === Decision Table === */
.decision-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.decision-table th{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888;text-transform:uppercase;letter-spacing:0.5px;text-align:left;padding:10px 12px;border-bottom:2px solid #e0e0e0;font-weight:400}
.decision-table td{padding:12px;border-bottom:1px solid #f0f0f0;color:#444;vertical-align:top;line-height:1.6}
.decision-table tr:last-child td{border-bottom:none}
.decision-table td:first-child{font-weight:600;color:#0a0a0a;width:35%}

/* === Disclaimer === */
.disclaimer{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#aaa;line-height:1.7;margin-bottom:32px;padding:14px 18px;border-left:3px solid #e0e0e0;background:#fafafa}

/* === Demo Embed === */
.demo-embed{margin:28px 0;border:1px solid #e0e0e0;background:#fff;overflow:hidden}
.demo-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid #e0e0e0;background:#fafafa}
.demo-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px}
.demo-actions{display:flex;gap:8px}
.demo-btn{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#888;background:none;border:1px solid #ddd;padding:3px 10px;cursor:pointer;border-radius:2px;transition:all 0.2s;text-decoration:none}
.demo-btn:hover{border-color:#888;color:#555}
.demo-embed iframe{width:100%;height:900px;border:none;display:block}
.demo-hint{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888;margin-top:16px;padding:8px 14px;border:1px solid #e0e0e0;border-radius:2px;display:inline-block}
.demo-hint a{color:#0a0a0a;text-decoration:none;font-weight:600;border-bottom:1px solid #ddd;transition:all 0.2s}
.demo-hint a:hover{border-color:#0a0a0a}
@media(max-width:600px){
  .demo-embed iframe{height:880px}
}

/* === Flow Cards (horizontal scenario cards) === */
.flow-cards{margin:16px 0 24px}
.flow-card{display:flex;border:1px solid #e0e0e0;margin-bottom:-1px}
.flow-card:first-child{border-radius:2px 2px 0 0}
.flow-card:last-child{border-radius:0 0 2px 2px;margin-bottom:0}
.flow-who{width:120px;flex-shrink:0;padding:14px 16px;border-right:1px solid #e0e0e0;font-size:12px;font-weight:700;color:#0a0a0a;line-height:1.5;display:flex;align-items:center}
.flow-action{flex:1;padding:14px 16px;font-size:13px;color:#555;line-height:1.6}
.flow-action code{font-size:11px}
.flow-result{width:110px;flex-shrink:0;padding:14px 16px;border-left:1px solid #e0e0e0;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:#0a0a0a;line-height:1.5;display:flex;align-items:center}
@media(max-width:600px){
  .flow-card{flex-direction:column}
  .flow-who{width:auto;border-right:none;border-bottom:1px solid #f0f0f0;padding:10px 14px}
  .flow-action{padding:10px 14px}
  .flow-result{width:auto;border-left:none;border-top:1px solid #f0f0f0;padding:10px 14px}
}

/* === Callout Dark === */
.article-body code{font-family:'IBM Plex Mono',monospace;font-size:12px;background:#f0f0f0;padding:2px 6px;border-radius:2px;color:#0a0a0a}
.callout.callout-dark{background:#0a0a0a;border-color:#0a0a0a;color:#fafafa}
.callout-dark .callout-label{color:#888}
.callout-dark p,.callout-dark li{color:#aaa;font-size:14px;line-height:1.7}
.callout-dark strong{color:#fafafa}
.callout-dark code{background:#333;color:#fafafa}
.callout-numbered{list-style:none;padding:0;margin:0}
.callout-numbered li{margin-bottom:14px;padding-left:28px;position:relative}
.callout-numbered li:last-child{margin-bottom:0}
.callout-numbered li .num{position:absolute;left:0;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:14px}
.callout-dark .callout-numbered li .num{color:#fafafa}

/* === Tier Table === */
.table-wrap{overflow-x:auto;margin:24px 0}
.tier-table td:first-child{width:22%}
.tier-table td{font-size:13px}
.tier-sub{font-size:11px;color:#888;font-weight:400}

/* === Suggested Reading === */
.suggested-reading{margin-top:40px;padding-top:28px;border-top:1px solid #e0e0e0}
.suggested-label{font-size:18px;font-weight:700;color:#0a0a0a;letter-spacing:-0.3px;margin-bottom:16px}
.suggested-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.suggested-card{border:1px solid #e0e0e0;padding:18px;border-radius:4px;text-decoration:none;transition:all 0.15s;display:block}
.suggested-card:hover{border-color:#888;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.suggested-cat{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#444;background:#e8e4f0;padding:2px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:0.8px;display:inline-block;margin-bottom:8px}
.suggested-title{font-weight:700;font-size:14px;color:#0a0a0a;line-height:1.35;margin-bottom:6px;letter-spacing:-0.2px}
.suggested-desc{font-size:12px;color:#555;line-height:1.6;margin-bottom:8px}
.suggested-date{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#bbb}
@media(max-width:600px){
  .suggested-grid{grid-template-columns:1fr}
}

/* === Sources === */
.sources{margin-top:40px;padding-top:24px;border-top:1px solid #e0e0e0}
.sources-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sources p{font-size:12px;color:#888;line-height:1.7;margin-bottom:4px}
.sources ol{padding-left:20px;font-size:12px;color:#888;line-height:1.8}
.sources ol li{margin-bottom:2px}
.sources a{color:#888;text-decoration:none;border-bottom:1px solid #ddd;transition:all 0.2s}
.sources a:hover{color:#0a0a0a;border-color:#0a0a0a}

/* === Article Layout (sidebar) === */
.article-layout{display:flex;justify-content:center;gap:40px;max-width:1020px;margin:0 auto;padding:0 24px}
.article-layout .container{flex:1;max-width:680px;padding:0}

/* === Sidebar === */
.sidebar{width:240px;flex-shrink:0;padding-top:112px;position:sticky;top:60px;align-self:flex-start;height:fit-content}
.sidebar-card{padding:20px;border:1px solid #e0e0e0;background:#fff}
.sidebar-card strong{color:#0a0a0a;font-weight:700;font-size:15px;display:block;margin-bottom:8px}
.author-roles{list-style:none;padding:0;margin:0}
.author-roles li{font-size:12px;color:#555;line-height:1.7;padding-left:14px;position:relative}
.author-roles li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#ccc}
.sidebar-divider{border-top:1px solid #e0e0e0;margin:16px 0}
.subscribe-lead{font-size:13px;color:#0a0a0a;font-weight:600;margin-bottom:12px}
.subscribe-form{display:flex;flex-direction:column;gap:8px}
.subscribe-form input[type="email"]{width:100%;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:8px 10px;border:1px solid #ddd;background:#fafafa;color:#0a0a0a;outline:none;transition:border-color 0.2s}
.subscribe-form input[type="email"]:focus{border-color:#888}
.subscribe-form button{width:100%;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:8px 16px;background:#0a0a0a;color:#fafafa;border:none;cursor:pointer;transition:background 0.2s;letter-spacing:0.3px}
.subscribe-form button:hover{background:#333}
.subscribe-msg{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-top:8px;color:#888}
.subscribe-msg.success{color:#2a7d2a}
.subscribe-msg.error{color:#c44}
.sidebar-why-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.sidebar-why-list{list-style:none;padding:0;margin:0 0 12px}
.sidebar-why-list li{font-size:12px;color:#888;line-height:1.7;padding-left:14px;position:relative}
.sidebar-why-list li::before{content:"\2013";position:absolute;left:0;color:#ccc}
.sidebar-connect{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888;text-decoration:none;border-bottom:1px solid #ddd;transition:all 0.2s}
.sidebar-connect:hover{color:#0a0a0a;border-color:#0a0a0a}
.feedback-lead{font-size:13px;color:#0a0a0a;font-weight:600;margin-bottom:4px}
.feedback-note{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#aaa;margin-bottom:12px}
.feedback-form{display:flex;flex-direction:column;gap:8px}
.feedback-form textarea{width:100%;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:8px 10px;border:1px solid #ddd;background:#fafafa;color:#0a0a0a;outline:none;resize:vertical;transition:border-color 0.2s;min-height:60px}
.feedback-form textarea:focus{border-color:#888}
.feedback-form button{width:100%;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:8px 16px;background:#0a0a0a;color:#fafafa;border:none;cursor:pointer;transition:background 0.2s;letter-spacing:0.3px}
.feedback-form button:hover{background:#333}
.feedback-status{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-top:8px;color:#888}
.feedback-status.success{color:#2a7d2a}
.feedback-status.error{color:#c44}

/* === Slide Viewer === */
.slide-viewer{margin:32px 0;border:1px solid #e0e0e0;background:#fff;overflow:hidden}
.slide-canvas-wrap{background:#f5f5f5;line-height:0}
.slide-canvas-wrap canvas{width:100%;display:block}
.slide-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #e0e0e0;background:#fafafa}
.slide-btn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#888;background:none;border:1px solid #ddd;padding:6px 14px;cursor:pointer;transition:all 0.2s;border-radius:2px}
.slide-btn:hover{border-color:#888;color:#555}
.slide-btn:disabled{opacity:0.3;cursor:default}
.slide-counter{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888}
.slide-dots{display:flex;gap:6px;align-items:center}
.slide-dot{width:6px;height:6px;border-radius:50%;background:#ddd;cursor:pointer;transition:background 0.2s}
.slide-dot.active{background:#0a0a0a}
.viewer-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.slide-fullscreen{margin-left:auto;font-size:14px;padding:6px 10px}
.viewer-download{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888;text-decoration:none;border-bottom:1px solid #ddd;transition:all 0.2s}
.viewer-download:hover{color:#0a0a0a;border-color:#0a0a0a}

/* === Fullscreen slide viewer === */
.slide-viewer:fullscreen{background:#0a0a0a;display:flex;flex-direction:column;justify-content:center}
.slide-viewer:fullscreen .slide-canvas-wrap{background:#0a0a0a;flex:1;display:flex;align-items:center;justify-content:center}
.slide-viewer:fullscreen .slide-canvas-wrap canvas{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 52px);object-fit:contain}
.slide-viewer:fullscreen .slide-nav{background:#111;border-top:1px solid #333}
.slide-viewer:fullscreen .slide-btn{color:#888;border-color:#444}
.slide-viewer:fullscreen .slide-btn:hover{color:#fafafa;border-color:#888}
.slide-viewer:fullscreen .slide-btn:disabled{opacity:0.2}
.slide-viewer:fullscreen .slide-counter{color:#888}
.slide-viewer:fullscreen .slide-dot{background:#444}
.slide-viewer:fullscreen .slide-dot.active{background:#fafafa}

/* === Article Footer (border-top variant) === */
.article-footer{padding:40px 24px;text-align:center;border-top:1px solid #e0e0e0}

/* === Tablet — sidebar stacks below === */
@media(max-width:1024px){
  .article-layout{flex-direction:column;align-items:center;padding:0 24px}
  .sidebar{position:static;width:100%;max-width:680px;padding-top:0;border-top:1px solid #e0e0e0;padding-top:24px}
  .subscribe-form{flex-direction:row}
  .subscribe-form input[type="email"]{flex:1;width:auto}
  .subscribe-form button{width:auto}
}

/* === Mobile === */
@media(max-width:600px){
  .article-header h1{font-size:24px}
  .metric-strip{flex-direction:column}
  .metric-item{border-right:none;border-bottom:1px solid #e0e0e0;padding:12px 16px}
  .metric-item:last-child{border-bottom:none}
  .subscribe-form{flex-direction:column}
  .subscribe-form input[type="email"]{width:100%}
  .subscribe-form button{width:100%}
}