.react-articles-container{max-width:1200px;margin:0 auto;padding:20px}.topic-chip{cursor:pointer;margin:4px;transition:all .3s}.topic-chip:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.article-content{background:var(--background-paper);border-radius:8px;margin-top:30px;padding:20px;box-shadow:0 2px 4px #0000001a}.code-block{color:#d4d4d4;background:#1e1e1e;border-radius:6px;margin:16px 0;padding:16px;font-family:Courier New,monospace;font-size:14px;line-height:1.5;overflow-x:auto}.example-container{border:1px solid var(--divider);background:var(--background-default);border-radius:8px;margin:16px 0;padding:20px}.mcp-container{border:2px solid var(--primary-main);background:var(--background-paper);border-radius:12px;margin:20px 0;padding:24px;box-shadow:0 4px 12px #0000001a}.mcp-header{border-bottom:2px solid var(--primary-main);align-items:center;gap:12px;margin-bottom:20px;padding-bottom:12px;display:flex}.mcp-title{color:var(--primary-main);font-size:1.5rem;font-weight:700}.mcp-description{color:var(--text-secondary);margin-bottom:20px;line-height:1.6}.mcp-requirements{background:var(--background-default);border-left:4px solid var(--primary-main);border-radius:8px;margin:16px 0;padding:16px}.requirement-item{margin:8px 0;padding-left:20px;position:relative}.requirement-item:before{content:"•";color:var(--primary-main);font-weight:700;position:absolute;left:0}.interactive-demo{border:1px solid var(--divider);background:var(--background-default);border-radius:8px;margin:20px 0;padding:20px}.demo-controls{flex-wrap:wrap;gap:12px;margin-bottom:16px;display:flex}.demo-button{border:1px solid var(--primary-main);color:var(--primary-main);cursor:pointer;background:0 0;border-radius:6px;padding:8px 16px;transition:all .3s}.demo-button:hover{background:var(--primary-main);color:#fff}.demo-output{background:var(--background-paper);border:1px solid var(--divider);border-radius:6px;min-height:100px;padding:16px;font-family:monospace}@media (max-width:768px){.react-articles-container{padding:10px}.topic-chip{margin:2px;font-size:.8rem}.article-content{padding:15px}.mcp-container{padding:16px}.demo-controls{flex-direction:column}.demo-button{width:100%}}[data-theme=dark] .code-block{color:#e6e6e6;background:#2d2d2d}[data-theme=dark] .example-container{background:var(--background-paper)}[data-theme=dark] .demo-output{background:var(--background-default)}
