/* Dynamic news article page */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.article-container{max-width:1200px;margin:40px auto;padding:0 20px;display:flex;gap:30px}
.article-main{flex:1;background:#fff;padding:50px;border-radius:12px;box-shadow:0 2px 20px rgba(0,0,0,0.06);position:relative;overflow:hidden}
.article-main::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1890ff,#722ed1,#eb2f96,#fa8c16);opacity:0.8}
.article-sidebar{width:300px}
.article-title{font-size:36px;font-weight:800;margin-bottom:25px;line-height:1.25;background:linear-gradient(135deg,#1a1a1a 0%,#333 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0;position:relative;padding-bottom:15px}
.article-title::after{content:"";position:absolute;bottom:0;left:0;width:80px;height:5px;background:linear-gradient(90deg,#1890ff,#722ed1);border-radius:3px}
.article-meta{color:#666;font-size:14px;margin-bottom:35px;padding:15px 20px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:8px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;border-left:4px solid #1890ff}
.article-meta>span{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.article-meta>span::before{content:"";width:4px;height:4px;margin-right:4px;background:#1890ff;border-radius:50%;flex:0 0 auto}
.article-meta>span:first-child::before{display:none;content:none}
.article-meta-label{color:#4c5563;font-weight:650}
.article-meta time{display:inline-flex;align-items:center;gap:4px;color:inherit}
.article-meta>.article-reading-meta{flex:0 0 100%;width:100%;padding-top:11px;color:#4c5563;border-top:1px solid rgba(24,144,255,.14);font-weight:500}
.article-meta>.article-reading-meta::before{display:none;content:none}
.article-content{font-size:17px;line-height:1.9;color:#2c3e50;max-width:800px;word-break:break-word}
.article-content>*:first-child{margin-top:0!important}
.article-content>*:last-child{margin-bottom:0!important}
.article-content::selection{background:#1890ff;color:#fff}
.article-content p{margin:1.3em 0;text-align:justify;word-wrap:break-word;text-indent:0;hyphens:auto}
.article-content>p:first-of-type{font-size:1.1em;color:#34495e;font-weight:500;line-height:1.8}
.article-content>p:first-of-type::first-letter{font-size:3.5em;font-weight:800;float:left;line-height:0.9;margin:0.1em 0.1em 0 0;color:#1890ff;font-family:Georgia,serif}
.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{font-weight:800;line-height:1.35;color:#1a1a1a;margin-top:2.8em;margin-bottom:1.2em;letter-spacing:0;word-wrap:break-word;scroll-margin-top:20px;position:relative}
.article-content h1{font-size:2.4em;background:linear-gradient(135deg,#1890ff 0%,#722ed1 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-bottom:0.5em;margin-top:2em;border-bottom:4px solid;border-image:linear-gradient(90deg,#1890ff,#722ed1,transparent) 1}
.article-content h1::before{content:"";position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:6px;height:60%;background:linear-gradient(180deg,#1890ff,#722ed1);border-radius:3px}
.article-content h2{font-size:2em;color:#2c3e50;padding-bottom:0.4em;margin-top:2.2em;border-bottom:3px solid #e8e8e8;position:relative;padding-left:20px}
.article-content h2::before{content:"";position:absolute;left:0;top:0;bottom:0.4em;width:6px;background:linear-gradient(180deg,#1890ff,#52c41a);border-radius:3px}
.article-content h2::after{content:"";position:absolute;bottom:-3px;left:0;width:100px;height:3px;background:linear-gradient(90deg,#1890ff,#52c41a);border-radius:2px}
.article-content h3{font-size:1.6em;color:#34495e;position:relative;padding-left:25px;margin-top:2em}
.article-content h3::before{content:"■";position:absolute;left:0;top:0;color:#1890ff;font-size:0.7em;transform:rotate(45deg);line-height:1.8}
.article-content h4{font-size:1.35em;color:#2c3e50;position:relative;padding-left:20px;font-weight:700}
.article-content h4::before{content:"▸";position:absolute;left:0;color:#52c41a;font-weight:bold;font-size:1.2em}
.article-content h5{font-size:1.15em;color:#555;font-weight:700;text-transform:none;border-left:3px solid #faad14;padding-left:12px}
.article-content h6{font-size:1em;color:#666;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;opacity:0.9}
.article-content img{max-width:100%;height:auto;border-radius:12px;margin:3em auto;box-shadow:0 8px 24px rgba(0,0,0,0.12);display:block;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);cursor:zoom-in;border:1px solid rgba(0,0,0,0.05)}
.article-content img:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 48px rgba(0,0,0,0.18)}
.article-content figure{margin:3em 0;text-align:center;background:#fafbfc;padding:20px;border-radius:12px;border:1px solid #e8e8e8}
.article-content figure img{margin:0 auto 1.2em;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.article-content figcaption{font-size:0.9em;color:#666;font-style:italic;margin-top:1em;padding-top:1em;border-top:2px solid #e8e8e8;font-weight:500}
.article-content a{color:#1890ff;text-decoration:none;border-bottom:2px solid transparent;transition:all 0.3s;font-weight:600;position:relative;display:inline-block}
.article-content a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#1890ff,#722ed1);transition:width 0.3s ease}
.article-content a:hover{color:#096dd9}
.article-content a:hover::after{width:100%}
.article-content a[href^="http"]::before{content:"🔗";margin-right:4px;font-size:0.85em;opacity:0.6}
.article-content ul,.article-content ol{margin:2em 0;padding-left:0;line-height:2}
.article-content ul{list-style:none}
.article-content ul li{position:relative;padding-left:2.2em;margin-bottom:1em;transition:padding-left 0.2s}
.article-content ul li:hover{padding-left:2.5em}
.article-content ul li::before{content:"";position:absolute;left:0.6em;top:0.75em;width:8px;height:8px;background:linear-gradient(135deg,#1890ff,#52c41a);border-radius:50%;box-shadow:0 2px 4px rgba(24,144,255,0.3)}
.article-content ul ul li::before{background:linear-gradient(135deg,#722ed1,#eb2f96);width:6px;height:6px}
.article-content ul ul ul li::before{background:linear-gradient(135deg,#fa8c16,#faad14);width:5px;height:5px}
.article-content ol{counter-reset:list-counter;list-style:none}
.article-content ol li{counter-increment:list-counter;position:relative;padding-left:2.5em;margin-bottom:1em}
.article-content ol li::before{content:counter(list-counter);position:absolute;left:0;top:0.1em;width:1.6em;height:1.6em;background:linear-gradient(135deg,#1890ff,#096dd9);color:#fff;border-radius:50%;font-size:0.85em;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 4px 8px rgba(24,144,255,0.3)}
.article-content ol ol li::before{background:linear-gradient(135deg,#52c41a,#389e0d);font-size:0.75em;width:1.4em;height:1.4em}
.article-content ul ul,.article-content ol ol,.article-content ul ol,.article-content ol ul{margin:1em 0;padding-left:2em}
.article-content li>p{margin:0.6em 0}
.article-content li>p:first-child{margin-top:0}
.article-content li>p:last-child{margin-bottom:0}
.article-content blockquote{margin:3em 0;padding:1.8em 2em 1.8em 3em;background:linear-gradient(135deg,#f0f5ff 0%,#e6f7ff 100%);border-left:6px solid #1890ff;color:#2c3e50;font-style:italic;border-radius:0 12px 12px 0;box-shadow:0 4px 16px rgba(24,144,255,0.1);position:relative;font-size:1.05em;line-height:1.8}
.article-content blockquote::before{content:"\\201C";position:absolute;top:15px;left:15px;font-size:4em;color:rgba(24,144,255,0.15);font-family:Georgia,serif;line-height:1;font-weight:bold}
.article-content blockquote p{margin:0.8em 0;font-weight:500;position:relative;z-index:1}
.article-content blockquote p:first-child{margin-top:0}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content blockquote cite{display:block;margin-top:1.2em;font-size:0.9em;color:#1890ff;font-style:normal;text-align:right;font-weight:700;padding-top:1em;border-top:2px solid rgba(24,144,255,0.2)}
.article-content blockquote cite::before{content:"— ";opacity:0.6}
.article-content blockquote.warning{background:linear-gradient(135deg,#fffbf0 0%,#fff7e6 100%);border-left-color:#faad14}
.article-content blockquote.warning::before{color:rgba(250,173,20,0.15)}
.article-content blockquote.success{background:linear-gradient(135deg,#f6ffed 0%,#d9f7be 100%);border-left-color:#52c41a}
.article-content blockquote.success::before{color:rgba(82,196,26,0.15)}
.article-content blockquote.danger{background:linear-gradient(135deg,#fff1f0 0%,#ffccc7 100%);border-left-color:#ff4d4f}
.article-content blockquote.danger::before{color:rgba(255,77,79,0.15)}
.article-content code{background:linear-gradient(135deg,#f5f5f5,#ececec);padding:0.25em 0.6em;border-radius:6px;font-size:0.88em;font-family:Consolas,Monaco,"Courier New",monospace;color:#e83e8c;border:1px solid #ddd;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,0.05);transition:all 0.2s}
.article-content code:hover{background:linear-gradient(135deg,#ffe6f0,#ffd6e7);border-color:#eb2f96;box-shadow:0 2px 6px rgba(235,47,150,0.2)}
.article-content pre{background:linear-gradient(135deg,#1e1e1e 0%,#2d2d2d 100%);padding:2em;border-radius:12px;overflow-x:auto;margin:2.5em 0;border:1px solid #333;box-shadow:0 8px 24px rgba(0,0,0,0.15);position:relative;transition:all 0.3s}
.article-content pre:hover{box-shadow:0 12px 32px rgba(0,0,0,0.25);transform:translateY(-2px)}
.article-content pre code{background:none;padding:0;color:#f8f8f2;font-size:0.9em;border:none;display:block;line-height:1.7;font-weight:400;box-shadow:none}
.article-content pre code:hover{background:none;box-shadow:none;border:none}
.article-content pre::before{content:"CODE";position:absolute;top:12px;right:16px;font-size:0.7em;color:#888;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;background:rgba(255,255,255,0.1);padding:4px 10px;border-radius:4px}
.article-content table{width:100%;border-collapse:separate;border-spacing:0;margin:3em 0;font-size:0.95em;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1);background:#fff}
.article-content table th,.article-content table td{padding:16px 20px;text-align:left;border-bottom:1px solid #e8e8e8}
.article-content table th{background:linear-gradient(135deg,#1890ff 0%,#096dd9 100%);font-weight:700;color:#fff;text-transform:uppercase;font-size:0.85em;letter-spacing:0.08em;border:none;position:relative}
.article-content table th::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,0.3)}
.article-content table tbody tr{transition:all 0.3s}
.article-content table tbody tr:hover{background:linear-gradient(135deg,#e6f7ff 0%,#f0f5ff 100%);transform:scale(1.01);box-shadow:0 2px 8px rgba(24,144,255,0.1)}
.article-content table tbody tr:nth-child(even){background:#fafbfc}
.article-content table tbody tr:nth-child(even):hover{background:linear-gradient(135deg,#e6f7ff 0%,#f0f5ff 100%)}
.article-content hr{border:none;height:2px;background:linear-gradient(90deg,transparent,#e8e8e8,transparent);margin:4em 0;position:relative}
.article-content hr::after{content:"✦";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:0 15px;color:#1890ff;font-size:1.2em}
.article-content strong,.article-content b{font-weight:800;color:#1a1a1a;background:linear-gradient(180deg,transparent 60%,rgba(24,144,255,0.15) 60%);padding:0 3px;border-radius:2px}
.article-content em,.article-content i{font-style:italic;color:#555;position:relative;padding:0 2px}
.article-content mark{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:0.2em 0.5em;border-radius:4px;color:#856404;font-weight:600;box-shadow:0 2px 4px rgba(250,173,20,0.2);border-bottom:2px solid #faad14}
.article-content del{text-decoration:line-through;text-decoration-color:#ff4d4f;text-decoration-thickness:2px;color:#999;opacity:0.7}
.article-content ins{text-decoration:none;background:linear-gradient(135deg,#d9f7be,#b7eb8f);padding:0.2em 0.4em;border-radius:4px;color:#389e0d;font-weight:600;border-bottom:2px solid #52c41a}
.article-content kbd{background:linear-gradient(135deg,#333,#555);color:#fff;padding:0.3em 0.7em;border-radius:6px;font-size:0.85em;font-family:Consolas,Monaco,monospace;box-shadow:0 3px 6px rgba(0,0,0,0.3),inset 0 -2px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);font-weight:600;border:1px solid #222;text-transform:uppercase;letter-spacing:0.05em}
.article-content sub,.article-content sup{font-size:0.75em;line-height:0;position:relative}
.article-content sup{top:-0.5em;color:#1890ff;font-weight:700}
.article-content sub{bottom:-0.25em;color:#722ed1;font-weight:700}
.article-content abbr[title]{text-decoration:none;border-bottom:2px dotted #1890ff;cursor:help}
.article-content dl{margin:2em 0;background:#fafbfc;padding:2em;border-radius:12px;border:1px solid #e8e8e8}
.article-content dt{font-weight:800;color:#1a1a1a;margin-top:1.2em;margin-bottom:0.6em;font-size:1.05em;padding-left:20px;position:relative;border-left:4px solid #1890ff}
.article-content dt:first-child{margin-top:0}
.article-content dd{margin-left:2.5em;margin-bottom:1em;color:#555;line-height:1.8;padding-left:15px;border-left:2px solid #e8e8e8}
.article-content .note,.article-content .info,.article-content .warning,.article-content .tip,.article-content .success,.article-content .danger{padding:1.5em 2em 1.5em 4em;border-radius:12px;margin:2.5em 0;border-left:6px solid;position:relative;box-shadow:0 4px 16px rgba(0,0,0,0.08);transition:all 0.3s}
.article-content .note:hover,.article-content .info:hover,.article-content .warning:hover,.article-content .tip:hover,.article-content .success:hover,.article-content .danger:hover{box-shadow:0 8px 24px rgba(0,0,0,0.12);transform:translateX(5px)}
.article-content .note::before,.article-content .info::before,.article-content .warning::before,.article-content .tip::before,.article-content .success::before,.article-content .danger::before{position:absolute;left:1.5em;top:1.5em;font-size:1.5em}
.article-content .note{background:linear-gradient(135deg,#e7f3ff 0%,#d6ebff 100%);border-color:#1890ff;color:#0c5395}
.article-content .note::before{content:"ℹ️"}
.article-content .info{background:linear-gradient(135deg,#e6f7ff 0%,#b5f5ec 100%);border-color:#13c2c2;color:#006d75}
.article-content .info::before{content:"💡"}
.article-content .warning{background:linear-gradient(135deg,#fff7e6 0%,#ffe7ba 100%);border-color:#faad14;color:#ad6800}
.article-content .warning::before{content:"⚠️"}
.article-content .tip{background:linear-gradient(135deg,#f6ffed 0%,#d9f7be 100%);border-color:#52c41a;color:#389e0d}
.article-content .tip::before{content:"💡"}
.article-content .success{background:linear-gradient(135deg,#f6ffed 0%,#d9f7be 100%);border-color:#52c41a;color:#389e0d}
.article-content .success::before{content:"✅"}
.article-content .danger{background:linear-gradient(135deg,#fff1f0 0%,#ffccc7 100%);border-color:#ff4d4f;color:#a8071a}
.article-content .danger::before{content:"🚨"}
.article-content video,.article-content iframe{max-width:100%;border-radius:12px;margin:3em auto;display:block;box-shadow:0 8px 32px rgba(0,0,0,0.15);border:3px solid #e8e8e8}
.article-content details{margin:2em 0;background:#fafbfc;border:2px solid #e8e8e8;border-radius:12px;overflow:hidden;transition:all 0.3s}
.article-content details[open]{background:#fff;border-color:#1890ff;box-shadow:0 4px 16px rgba(24,144,255,0.1)}
.article-content summary{padding:1.2em 1.5em 1.2em 3em;font-weight:700;color:#1890ff;cursor:pointer;background:linear-gradient(135deg,#f0f5ff 0%,#e6f7ff 100%);transition:all 0.3s;position:relative}
.article-content summary::before{content:"▶";position:absolute;left:1.5em;top:50%;transform:translateY(-50%);font-size:0.8em;transition:transform 0.3s}
.article-content details[open] summary::before{transform:translateY(-50%) rotate(90deg)}
.article-content summary:hover{background:linear-gradient(135deg,#d6ebff 0%,#aed9ff 100%)}
.article-content details>*:not(summary){padding:0 1.5em 1.5em}
.article-tags{margin-top:50px;padding-top:30px;border-top:3px solid transparent;border-image:linear-gradient(90deg,#1890ff,#52c41a,#faad14) 1;position:relative}
.article-tags::before{content:none;font-size:16px;font-weight:700;color:#1a1a1a;display:block;margin-bottom:20px;letter-spacing:0.05em}
.article-tags a{text-decoration:none;display:inline-block;margin:8px 10px 8px 0}
.article-tags span{background:linear-gradient(135deg,#f0f5ff,#e6f7ff);padding:10px 20px;border-radius:25px;font-size:14px;display:inline-block;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 3px 8px rgba(24,144,255,0.15);cursor:pointer;border:2px solid transparent;font-weight:600;position:relative;overflow:hidden}
.article-tags span::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);transition:left 0.5s}
.article-tags a:hover span::before{left:100%}
.article-tags a:hover span{background:linear-gradient(135deg,#1890ff,#096dd9);color:#fff;transform:translateY(-4px) scale(1.05);box-shadow:0 6px 16px rgba(24,144,255,0.4);border-color:rgba(255,255,255,0.3)}
.sidebar-box{background:linear-gradient(135deg,#fff 0%,#fafbfc 100%);padding:25px;margin-bottom:25px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.08);border:1px solid rgba(24,144,255,0.1);transition:all 0.3s;position:relative;overflow:hidden}
.sidebar-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1890ff,#52c41a,#faad14);opacity:0;transition:opacity 0.3s}
.sidebar-box:hover{box-shadow:0 8px 24px rgba(24,144,255,0.15);transform:translateY(-2px)}
.sidebar-box:hover::before{opacity:1}
.sidebar-title{font-size:18px;font-weight:800;margin-bottom:20px;padding-bottom:12px;background:linear-gradient(135deg,#1890ff,#722ed1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;letter-spacing:0}
.sidebar-title::after{content:"";position:absolute;bottom:0;left:0;width:50px;height:3px;background:linear-gradient(90deg,#1890ff,#722ed1);border-radius:2px}
.sidebar-list{list-style:none;padding:0;margin:0}
.sidebar-list li{margin-bottom:0;padding:12px 15px;border-bottom:1px solid rgba(0,0,0,0.05);transition:all 0.3s;border-radius:8px;position:relative;overflow:hidden}
.sidebar-list li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#1890ff,#52c41a);opacity:0;transition:opacity 0.3s}
.sidebar-list li:hover{padding-left:20px;background:linear-gradient(135deg,#f0f5ff,#e6f7ff);border-bottom-color:transparent;box-shadow:0 2px 8px rgba(24,144,255,0.1)}
.sidebar-list li:hover::before{opacity:1}
.sidebar-list li:last-child{border-bottom:none}
.sidebar-list a{color:#2c3e50;text-decoration:none;display:block;transition:all 0.3s;font-weight:500;font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-list a:hover{color:#1890ff;transform:translateX(3px)}
.sidebar-list time{color:#999;font-size:12px;display:flex;align-items:center;margin-top:8px;font-weight:500}
.sidebar-list time::before{content:"📅";margin-right:5px;font-size:11px}
.breadcrumb{font-size:14px;color:#666;display:block;background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:12px 0;margin-bottom:25px;box-shadow:0 2px 6px rgba(0,0,0,0.05);margin-left:-50px;margin-right:-50px;padding-left:50px;padding-right:50px}
.breadcrumb span{display:inline-flex;align-items:center}
.breadcrumb a{color:#1890ff;text-decoration:none;font-weight:600;transition:all 0.2s;position:relative}
.breadcrumb a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#1890ff;transition:width 0.3s}
.breadcrumb a:hover{color:#096dd9}
.breadcrumb a:hover::after{width:100%}
.breadcrumb-separator{color:#bbb;margin:0 8px;font-weight:bold}
.recommended-section{margin-top:60px;padding-top:40px;border-top:3px solid transparent;border-image:linear-gradient(90deg,#1890ff,#722ed1,#eb2f96) 1;position:relative}
.recommended-section::before{content:"";position:absolute;top:-3px;left:0;width:100px;height:3px;background:linear-gradient(90deg,#1890ff,#722ed1);border-radius:2px}
.recommended-title{font-size:28px;font-weight:800;margin-bottom:30px;background:linear-gradient(135deg,#1a1a1a 0%,#333 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0;position:relative;padding-left:45px}
.recommended-title::before{content:"📚";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:32px}
.recommended-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.recommended-card{background:#fff;border-radius:16px;overflow:hidden;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;box-shadow:0 4px 12px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.05);position:relative}
.recommended-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1890ff,#722ed1);opacity:0;transition:opacity 0.3s}
.recommended-card:hover{background:#fff;box-shadow:0 12px 32px rgba(0,0,0,0.15);transform:translateY(-8px) scale(1.02)}
.recommended-card:hover::before{opacity:1}
.recommended-thumbnail{display:block;width:100%;height:200px;overflow:hidden;position:relative;background:linear-gradient(135deg,#f0f5ff,#e6f7ff)}
.recommended-thumbnail::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 100%);opacity:0;transition:opacity 0.3s}
.recommended-card:hover .recommended-thumbnail::after{opacity:1}
.recommended-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1)}
.recommended-card:hover .recommended-thumbnail img{transform:scale(1.15) rotate(2deg)}
.recommended-content{padding:20px;flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff 0%,#fafbfc 100%)}
.recommended-card h3{font-size:17px;margin:0 0 12px;line-height:1.5;flex-shrink:0;font-weight:700}
.recommended-card h3 a{color:#2c3e50;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:all 0.3s;position:relative}
.recommended-card h3 a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#1890ff,#722ed1);transition:width 0.3s}
.recommended-card:hover h4 a{color:#1890ff}
.recommended-card:hover h4 a::after{width:100%}
.recommended-description{color:#666;font-size:14px;line-height:1.7;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.recommended-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#999;padding-top:12px;border-top:2px solid #f0f0f0;font-weight:500}
.recommended-author{color:#1890ff;font-weight:600;display:flex;align-items:center;gap:4px}
.recommended-author::before{content:"✍️";font-size:14px}
.recommended-meta time{display:flex;align-items:center;gap:4px;color:#999}
.recommended-meta time::before{content:"📅";font-size:11px}
@media(max-width:768px){
.article-container{flex-direction:column;margin:20px auto;padding:0 15px;gap:25px}
.article-main{padding:30px 20px;border-radius:8px}
.article-main::before{height:3px}
.article-sidebar{width:100%}
.article-title{font-size:26px;line-height:1.3;padding-bottom:12px}
.article-title::after{width:60px;height:4px}
.article-meta{padding:12px 15px;gap:15px;flex-wrap:wrap}
.article-meta span{font-size:13px}
.article-content{font-size:16px;line-height:1.75;max-width:100%}
.article-content p:first-of-type{font-size:1.05em}
.article-content p:first-of-type::first-letter{font-size:3em;margin:0.05em 0.08em 0 0}
.article-content h1{font-size:1.8em;margin-top:1.5em}
.article-content h1::before{left:-20px;width:4px}
.article-content h2{font-size:1.5em;padding-left:15px;margin-top:1.8em}
.article-content h2::before{width:4px}
.article-content h2::after{width:80px;height:2px}
.article-content h3{font-size:1.3em;padding-left:20px;margin-top:1.5em}
.article-content h3::before{font-size:0.65em}
.article-content h4{font-size:1.2em;padding-left:18px}
.article-content h4::before{font-size:1.1em}
.article-content h5{font-size:1.1em;padding-left:10px;border-left-width:2px}
.article-content h6{font-size:0.95em}
.article-content img{border-radius:8px;margin:2em auto;box-shadow:0 6px 20px rgba(0,0,0,0.1)}
.article-content img:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 10px 30px rgba(0,0,0,0.15)}
.article-content figure{padding:15px;border-radius:8px}
.article-content a[href^="http"]::before{content:"🔗";font-size:0.8em;margin-right:3px}
.article-content ul li{padding-left:1.8em;margin-bottom:0.8em}
.article-content ul li::before{width:7px;height:7px;top:0.7em}
.article-content ul ul li::before{width:5px;height:5px}
.article-content ul ul ul li::before{width:4px;height:4px}
.article-content ol li{padding-left:2em;margin-bottom:0.8em}
.article-content ol li::before{width:1.4em;height:1.4em;font-size:0.8em}
.article-content ol ol li::before{width:1.2em;height:1.2em;font-size:0.7em}
.article-content blockquote{padding:1.2em 1.5em 1.2em 2.5em;margin:2em 0;border-left-width:4px;border-radius:0 8px 8px 0;font-size:1em}
.article-content blockquote::before{font-size:3em;top:10px;left:10px}
.article-content blockquote p{margin:0.6em 0}
.article-content code{padding:0.2em 0.5em;font-size:0.86em;border-radius:4px}
.article-content pre{padding:1.2em;font-size:0.88em;border-radius:8px;margin:2em 0}
.article-content pre::before{top:10px;right:12px;font-size:0.65em;padding:3px 8px}
.article-content table{font-size:0.85em;margin:2em 0;border-radius:8px}
.article-content table th,.article-content table td{padding:12px 14px;font-size:0.95em}
.article-content table th{font-size:0.8em}
.article-content hr{margin:3em 0}
.article-content hr::after{font-size:1.1em}
.article-content kbd{padding:0.25em 0.6em;font-size:0.82em;border-radius:5px}
.article-content dl{padding:1.5em;border-radius:8px}
.article-content dt{font-size:1em;padding-left:15px;border-left-width:3px}
.article-content dd{margin-left:2em;padding-left:12px}
.article-content .note,.article-content .info,.article-content .warning,.article-content .tip,.article-content .success,.article-content .danger{padding:1.2em 1.5em 1.2em 3.5em;border-radius:8px;margin:2em 0;border-left-width:4px}
.article-content .note::before,.article-content .info::before,.article-content .warning::before,.article-content .tip::before,.article-content .success::before,.article-content .danger::before{left:1.2em;top:1.2em;font-size:1.3em}
.article-content video,.article-content iframe{border-radius:8px;margin:2em auto;border-width:2px}
.article-content details{border-radius:8px}
.article-content summary{padding:1em 1.2em 1em 2.8em;font-size:0.95em}
.article-content summary::before{left:1.2em;font-size:0.75em}
.article-content details>*:not(summary){padding:0 1.2em 1.2em}
.article-tags{margin-top:40px;padding-top:25px}
.article-tags::before{font-size:15px;margin-bottom:15px}
.article-tags a{margin:6px 8px 6px 0}
.article-tags span{padding:8px 16px;border-radius:20px;font-size:13px}
.article-tags a:hover span{transform:translateY(-2px) scale(1.03);box-shadow:0 4px 12px rgba(24,144,255,0.35)}
.sidebar-box{padding:20px;margin-bottom:20px;border-radius:10px}
.sidebar-title{font-size:17px;margin-bottom:18px;padding-bottom:10px}
.sidebar-title::after{width:40px;height:2px}
.sidebar-list li{padding:10px 12px;border-radius:6px}
.sidebar-list li:hover{padding-left:17px}
.sidebar-list a{font-size:14px}
.sidebar-list time{font-size:11px;margin-top:6px}
.sidebar-list time::before{font-size:10px}
.breadcrumb{font-size:13px;padding:10px 0;margin-bottom:20px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;flex-wrap:wrap}
.breadcrumb-separator{margin:0 6px;font-size:12px}
.recommended-section{margin-top:40px;padding-top:30px}
.recommended-section::before{width:80px;height:2px}
.recommended-title{font-size:22px;margin-bottom:20px;padding-left:38px}
.recommended-title::before{font-size:26px}
.recommended-grid{grid-template-columns:1fr;gap:20px}
.recommended-card{border-radius:12px}
.recommended-card::before{height:3px}
.recommended-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.recommended-thumbnail{height:180px}
.recommended-card:hover .recommended-thumbnail img{transform:scale(1.1) rotate(1deg)}
.recommended-content{padding:18px}
.recommended-card h3{font-size:16px;margin-bottom:10px}
.recommended-description{font-size:13px;margin-bottom:12px;line-height:1.6}
.recommended-meta{font-size:12px;padding-top:10px;border-top-width:1px}
.recommended-author{font-size:12px}
.recommended-author::before{font-size:12px}
.recommended-meta time::before{font-size:10px}
}

.article-tags-title{display:block;margin-bottom:20px;color:#1a1a1a;font-size:16px;font-weight:700;letter-spacing:0}

/* Article reading typography */
.article-content {
  max-width: 780px;
  margin: 0 auto;
  color: #30343b;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  text-rendering: optimizeLegibility;
}
.article-content::selection,
.article-content *::selection {
  background: #d9eaff;
  color: #1d1d1f;
}
.article-content > *:first-child {
  margin-top: 0;
}
.article-content > *:last-child {
  margin-bottom: 0;
}
.article-content p {
  margin: 0 0 1.45em;
  color: inherit;
  text-align: left;
  text-indent: 0;
  hyphens: auto;
}
.article-content > p:first-of-type {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.article-content > p:first-of-type::first-letter {
  float: none;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  position: static;
  padding: 0;
  color: #1d1d1f;
  background: none;
  border: 0;
  -webkit-text-fill-color: currentColor;
  font-weight: 680;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  scroll-margin-top: 88px;
}
.article-content h1::before,
.article-content h1::after,
.article-content h2::before,
.article-content h2::after,
.article-content h3::before,
.article-content h3::after,
.article-content h4::before,
.article-content h4::after,
.article-content h5::before,
.article-content h5::after,
.article-content h6::before,
.article-content h6::after {
  display: none;
  content: none;
}
.article-content h1,
.article-content h2 {
  margin: 2.35em 0 .8em;
  padding-bottom: .45em;
  border-bottom: 1px solid #e1e4e8;
  font-size: 28px;
  line-height: 1.35;
}
.article-content h3 {
  margin: 2em 0 .65em;
  font-size: 22px;
  line-height: 1.4;
}
.article-content h4 {
  margin: 1.75em 0 .6em;
  font-size: 19px;
  line-height: 1.45;
}
.article-content h5 {
  margin: 1.6em 0 .55em;
  font-size: 17px;
  line-height: 1.5;
}
.article-content h6 {
  margin: 1.5em 0 .5em;
  color: #51565f;
  font-size: 15px;
  line-height: 1.5;
  text-transform: none;
}
.article-content p + h2,
.article-content ul + h2,
.article-content ol + h2,
.article-content table + h2,
.article-content pre + h2,
.article-content blockquote + h2 {
  margin-top: 2.5em;
}
.article-content a {
  display: inline;
  position: static;
  color: #0066cc;
  border: 0;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(0, 102, 204, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-content a::before,
.article-content a::after {
  display: none;
  content: none;
}
.article-content a:hover {
  color: #004f9e;
  text-decoration-color: currentColor;
}
.article-content strong,
.article-content b {
  padding: 0;
  color: #1d1d1f;
  background: none;
  font-weight: 650;
}
.article-content em,
.article-content i {
  position: static;
  padding: 0;
  color: inherit;
  font-style: italic;
}
.article-content ul,
.article-content ol {
  margin: 1.25em 0 1.55em;
  padding-left: 1.55em;
  line-height: 1.75;
}
.article-content ul {
  list-style: disc;
}
.article-content ol {
  list-style: decimal;
  counter-reset: none;
}
.article-content li,
.article-content ul li,
.article-content ol li {
  position: static;
  margin: .45em 0;
  padding-left: .2em;
}
.article-content ul li::before,
.article-content ol li::before {
  display: none;
  content: none;
}
.article-content li::marker {
  color: #667085;
  font-weight: 600;
}
.article-content ul ul,
.article-content ul ol,
.article-content ol ul,
.article-content ol ol {
  margin: .45em 0;
  padding-left: 1.35em;
}
.article-content li > p {
  margin: .45em 0;
}
.article-content blockquote {
  position: static;
  margin: 1.8em 0;
  padding: 18px 20px;
  color: #414751;
  background: #f5f7fa;
  border: 0;
  border-left: 4px solid #0071e3;
  border-radius: 0 6px 6px 0;
  box-shadow: none;
  font-size: 16px;
  font-style: normal;
  line-height: 1.75;
}
.article-content blockquote::before,
.article-content blockquote::after {
  display: none;
  content: none;
}
.article-content blockquote p {
  position: static;
  margin: .7em 0;
  font-weight: 400;
}
.article-content blockquote p:first-child {
  margin-top: 0;
}
.article-content blockquote p:last-child {
  margin-bottom: 0;
}
.article-content blockquote cite {
  display: block;
  margin-top: 12px;
  padding: 0;
  color: #6e7580;
  border: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  text-align: left;
}
.article-content blockquote cite::before {
  content: "- ";
}
.article-content code {
  padding: .16em .42em;
  color: #b42318;
  background: #f3f4f6;
  border: 1px solid #e2e5e9;
  border-radius: 4px;
  box-shadow: none;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .88em;
  font-weight: 400;
}
.article-content code:hover {
  color: #b42318;
  background: #f3f4f6;
  border-color: #e2e5e9;
  box-shadow: none;
}
.article-content pre {
  position: relative;
  margin: 1.8em 0;
  padding: 20px;
  overflow-x: auto;
  color: #e5e7eb;
  background: #17191f;
  border: 1px solid #272a32;
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.7;
  tab-size: 2;
  white-space: pre;
}
.article-content pre:hover {
  box-shadow: none;
  transform: none;
}
.article-content pre::before,
.article-content pre::after {
  display: none;
  content: none;
}
.article-content pre code,
.article-content pre code:hover {
  display: block;
  min-width: max-content;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}
.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  cursor: default;
  background: #f5f5f7;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .08);
  transition: none;
}
.article-content img:hover {
  box-shadow: 0 3px 12px rgba(15, 23, 42, .08);
  transform: none;
}
.article-content figure {
  margin: 30px 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
}
.article-content figure img {
  margin: 0 auto;
}
.article-content figcaption,
.article-content img + em {
  display: block;
  margin: 10px auto 0;
  padding: 0;
  color: #7a8089;
  border: 0;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}
.article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.8em 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  -webkit-overflow-scrolling: touch;
}
.article-content table thead,
.article-content table tbody {
  width: 100%;
}
.article-content table th,
.article-content table td {
  min-width: 112px;
  padding: 12px 14px;
  color: #343941;
  background: #fff;
  border: 1px solid #e4e7eb;
  font-size: inherit;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
.article-content table th {
  color: #292d33;
  background: #f2f4f7;
  border-color: #dfe3e8;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.article-content table th::before,
.article-content table th::after {
  display: none;
  content: none;
}
.article-content table tbody tr,
.article-content table tbody tr:nth-child(even),
.article-content table tbody tr:hover,
.article-content table tbody tr:nth-child(even):hover {
  background: #fff;
  box-shadow: none;
  transform: none;
}
.article-content table tbody tr:nth-child(even) td {
  background: #fafbfc;
}
.article-content hr {
  position: static;
  height: 1px;
  margin: 2.6em 0;
  background: #e1e4e8;
  border: 0;
}
.article-content hr::before,
.article-content hr::after {
  display: none;
  content: none;
}
.article-content mark {
  padding: .1em .25em;
  color: inherit;
  background: #fff1a8;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  font-weight: inherit;
}
.article-content del {
  color: #777d86;
  opacity: 1;
  text-decoration-color: #777d86;
  text-decoration-thickness: 1px;
}
.article-content ins {
  padding: 0 .15em;
  color: #176b3a;
  background: #e9f7ef;
  border: 0;
  border-radius: 2px;
  font-weight: inherit;
  text-decoration: none;
}
.article-content kbd {
  padding: .15em .45em;
  color: #333840;
  background: #f5f5f7;
  border: 1px solid #cfd4dc;
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: none;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .82em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.article-content abbr[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  border: 0;
}
.article-content dl {
  margin: 1.6em 0;
  padding: 18px 20px;
  background: #f8f9fa;
  border: 1px solid #e2e5e9;
  border-radius: 6px;
}
.article-content dt {
  position: static;
  margin: 1em 0 .35em;
  padding: 0;
  color: #1d1d1f;
  border: 0;
  font-size: 16px;
  font-weight: 650;
}
.article-content dt:first-child {
  margin-top: 0;
}
.article-content dd {
  margin: 0 0 .8em;
  padding: 0;
  color: #51565f;
  border: 0;
}
.article-content .note,
.article-content .info,
.article-content .warning,
.article-content .tip,
.article-content .success,
.article-content .danger {
  position: static;
  margin: 1.7em 0;
  padding: 16px 18px;
  color: #343941;
  background: #f5f7fa;
  border: 1px solid #dfe4ea;
  border-left: 4px solid #667085;
  border-radius: 6px;
  box-shadow: none;
}
.article-content .note,
.article-content .info {
  background: #f3f8fe;
  border-left-color: #0071e3;
}
.article-content .tip,
.article-content .success {
  background: #f2f8f4;
  border-left-color: #248a4b;
}
.article-content .warning {
  background: #fff8e8;
  border-left-color: #b7791f;
}
.article-content .danger {
  background: #fff3f2;
  border-left-color: #d92d20;
}
.article-content .note:hover,
.article-content .info:hover,
.article-content .warning:hover,
.article-content .tip:hover,
.article-content .success:hover,
.article-content .danger:hover {
  box-shadow: none;
  transform: none;
}
.article-content .note::before,
.article-content .info::before,
.article-content .warning::before,
.article-content .tip::before,
.article-content .success::before,
.article-content .danger::before {
  display: none;
  content: none;
}
.article-content video,
.article-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.8em auto;
  background: #111;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  box-shadow: none;
}
.article-content iframe {
  min-height: 420px;
  aspect-ratio: 16 / 9;
}
.article-content details {
  margin: 1.6em 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
}
.article-content details[open] {
  background: #fff;
  border-color: #c5d9ee;
  box-shadow: none;
}
.article-content summary {
  position: static;
  padding: 13px 16px;
  color: #30343b;
  background: #f5f7fa;
  cursor: pointer;
  font-weight: 620;
}
.article-content summary::before,
.article-content summary::after {
  display: none;
  content: none;
}
.article-content summary:hover {
  background: #eef2f6;
}
.article-content details > *:not(summary) {
  padding-right: 16px;
  padding-left: 16px;
}
.article-content input,
.article-content select,
.article-content textarea,
.article-content button {
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.article-content sub,
.article-content sup {
  color: inherit;
  font-size: .75em;
  font-weight: inherit;
}
@media (max-width: 768px) {
  .article-container {
    width: 100%;
    max-width: 100%;
    margin: 12px auto 32px;
    padding: 0 12px;
    gap: 18px;
    box-sizing: border-box;
  }
  .article-main {
    width: 100%;
    min-width: 0;
    padding: 24px 18px 30px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  .article-main::before {
    height: 3px;
  }
  .article-sidebar {
    width: 100%;
    min-width: 0;
  }
  .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: -3px -18px 22px;
    padding: 11px 18px;
    background: #f5f7fa;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.6;
	justify-content: flex-start;
  }
  .breadcrumb-separator {
    margin: 0 5px;
    font-size: 11px;
  }
  .breadcrumb [aria-current="page"] {
    display: block;
    width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #6e7580;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-title {
    margin: 0 0 20px;
    padding-bottom: 13px;
    font-size: 26px;
    line-height: 1.32;
    overflow-wrap: anywhere;
  }
  .article-title::after {
    width: 54px;
    height: 3px;
  }
  .article-meta {
    margin-bottom: 28px;
    padding: 13px 14px;
    gap: 9px 14px;
    align-items: flex-start;
    border-left-width: 3px;
  }
  .article-meta > span,
  .article-meta time {
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .article-meta-label {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .article-meta > .article-reading-meta {
    padding-top: 10px;
  }
  .article-content {
    width: 100%;
    max-width: 100%;
    color: #30343b;
    font-size: 16px;
    line-height: 1.78;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .article-content p,
  .article-content p:first-of-type {
    margin: 0 0 1.25em;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
  }
  .article-content p::first-letter,
  .article-content p:first-of-type::first-letter {
    float: none !important;
    margin: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
  .article-content h1,
  .article-content h2 {
    margin: 1.9em 0 .7em;
    padding-bottom: .4em;
    font-size: 23px;
    line-height: 1.4;
  }
  .article-content h3 {
    margin: 1.65em 0 .6em;
    font-size: 20px;
    line-height: 1.45;
  }
  .article-content h4 {
    margin: 1.5em 0 .55em;
    font-size: 18px;
    line-height: 1.5;
  }
  .article-content h5,
  .article-content h6 {
    margin: 1.4em 0 .5em;
    font-size: 16px;
    line-height: 1.5;
  }
  .article-content ul,
  .article-content ol {
    margin: 1em 0 1.3em;
    padding-left: 1.35em;
    line-height: 1.72;
  }
  .article-content li,
  .article-content ul li,
  .article-content ol li {
    margin: .35em 0;
    padding-left: .12em;
  }
  .article-content ul ul,
  .article-content ul ol,
  .article-content ol ul,
  .article-content ol ol {
    margin: .35em 0;
    padding-left: 1.15em;
  }
  .article-content blockquote {
    margin: 1.4em 0;
    padding: 14px 15px;
    border-left-width: 3px;
    border-radius: 0 5px 5px 0;
    font-size: 15px;
    line-height: 1.7;
  }
  .article-content pre {
    width: 100%;
    max-width: 100%;
    margin: 1.4em 0;
    padding: 14px;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.65;
    -webkit-overflow-scrolling: touch;
  }
  .article-content img:not(.emoji) {
    max-width: 100% !important;
    height: auto !important;
    margin: 20px auto !important;
    border-radius: 6px;
  }
  .article-content figure {
    max-width: 100%;
    margin: 20px 0;
  }
  .article-content figure img:not(.emoji) {
    margin: 0 auto !important;
  }
  .article-content figcaption,
  .article-content img + em {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
  }
  .article-content table {
    width: 100%;
    max-width: 100%;
    margin: 1.4em 0;
    font-size: 12px;
    overscroll-behavior-inline: contain;
  }
  .article-content table th,
  .article-content table td {
    min-width: 96px;
    padding: 9px 10px;
    line-height: 1.5;
  }
  .article-content video,
  .article-content iframe {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    border-width: 1px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .article-content iframe {
    min-height: 200px;
  }
  .article-content details {
    margin: 1.35em 0;
    border-radius: 5px;
  }
  .article-content summary {
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.55;
  }
  .article-content details > *:not(summary) {
    padding-right: 14px;
    padding-left: 14px;
  }
}
@media (max-width: 360px) {
  .article-container {
    padding-right: 8px;
    padding-left: 8px;
  }
  .article-main {
    padding: 22px 14px 28px;
  }
  .breadcrumb {
    margin: -3px -14px 20px;
    padding: 10px 14px;
  }
  .article-title {
    font-size: 24px;
  }
  .article-meta {
    padding: 12px;
  }
  .article-meta > span {
    flex: 1 1 100%;
    width: 100%;
  }
  .article-content h1,
  .article-content h2 {
    font-size: 22px;
  }
  .article-content h3 {
    font-size: 19px;
  }
}
/* Twemoji replaces text emoji after DOMContentLoaded. Keep those generated
   images inline instead of treating them as full-width article media. */
.article-content img.emoji {
  display: inline-block;
  width: 1em;
  max-width: 1em;
  height: 1em;
  margin: 0 .08em;
  padding: 0;
  vertical-align: -.12em;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: inherit;
  transform: none;
  transition: none;
}
.article-content img.emoji:hover {
  box-shadow: none;
  transform: none;
}

/* Article topics: compact editorial metadata panel */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 42px;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #e1e6ed;
  border-radius: 8px;
  box-sizing: border-box;
}
.article-tags::before {
  display: none;
  content: none;
}
.article-tags-title {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0 8px 0 0;
  color: #303640;
  font-size: 14px;
  font-weight: 650;
  line-height: 32px;
}
.article-tags-title::before {
  width: 6px;
  height: 18px;
  background: #0071e3;
  border-radius: 3px;
  content: "";
}
.article-tags > a {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}
.article-tags > span:not(.article-tags-title),
.article-tags > a > span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 11px;
  background: #fff;
  border: 1px solid #d8e0e9;
  border-radius: 6px;
  color: #536071;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  box-sizing: border-box;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.article-tags > a:hover > span,
.article-tags > span:not(.article-tags-title):hover {
  background: #eef6ff;
  border-color: #9fc6ed;
  color: #005eb8;
}
.article-tags > a > span::before {
  display: none;
  content: none;
}
@media (max-width: 620px) {
  .article-tags {
    align-items: flex-start;
    gap: 7px;
    margin-top: 34px;
    padding: 15px;
  }
  .article-tags-title {
    width: 100%;
    margin: 0 0 2px;
    line-height: 28px;
  }
  .article-tags > span:not(.article-tags-title),
  .article-tags > a > span {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 12px;
  }
}

/* Keep the article topic panel independent from the site's alternating section bands. */
.article-main section.article-tags {
  background: #f8fafc;
}