<div class="ctag-stage">
  <div class="ctag-inner">
    <div class="ctag-list">
      <div class="ctag-t">
        <div class="ctag-pill" style="background:#eff6ff;border-color:#bfdbfe;color:#1e40af"><span class="ctag-dot" style="background:#3b82f6"></span>Machine Learning</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#dbeafe;color:#1e40af">ML</div><div><div class="ctag-name">Machine Learning</div><div class="ctag-count">1,284 articles</div></div></div>
            <div class="ctag-desc">Algorithms that enable systems to learn from data without explicit programming. Covers supervised, unsupervised, and reinforcement learning.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:88%;background:#3b82f6"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+14% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Deep Learning</span><span class="ctag-rel-pill">Neural Nets</span><span class="ctag-rel-pill">PyTorch</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Fine-tuning LLMs on custom datasets</div>
            <div class="ctag-ex-item">Understanding transformer attention</div>
            <div class="ctag-ex-item">Gradient descent, explained visually</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#f0fdf4;border-color:#bbf7d0;color:#15803d"><span class="ctag-dot" style="background:#22c55e"></span>Open Source</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#dcfce7;color:#15803d">OS</div><div><div class="ctag-name">Open Source</div><div class="ctag-count">2,941 articles</div></div></div>
            <div class="ctag-desc">Software with source code available for anyone to use, inspect, modify, and distribute. Covers licensing, contributing, and ecosystem news.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:94%;background:#22c55e"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ all-time high</strong></span><span>+22% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">GitHub</span><span class="ctag-rel-pill">Linux</span><span class="ctag-rel-pill">Licensing</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">How to write a great README</div>
            <div class="ctag-ex-item">OSS licensing: MIT vs Apache vs GPL</div>
            <div class="ctag-ex-item">First PR tips for new contributors</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fdf4ff;border-color:#e9d5ff;color:#7e22ce"><span class="ctag-dot" style="background:#a855f7"></span>System Design</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#f3e8ff;color:#7e22ce">SD</div><div><div class="ctag-name">System Design</div><div class="ctag-count">876 articles</div></div></div>
            <div class="ctag-desc">The process of defining the architecture, components, and interfaces of a system to satisfy specified requirements at scale.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:76%;background:#a855f7"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+3% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Distributed</span><span class="ctag-rel-pill">CAP Theorem</span><span class="ctag-rel-pill">Databases</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Designing a rate limiter from scratch</div>
            <div class="ctag-ex-item">When to use a message queue</div>
            <div class="ctag-ex-item">Read replicas and write-ahead logs</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fff7ed;border-color:#fed7aa;color:#c2410c"><span class="ctag-dot" style="background:#f97316"></span>Career</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#ffedd5;color:#c2410c">CR</div><div><div class="ctag-name">Career</div><div class="ctag-count">3,102 articles</div></div></div>
            <div class="ctag-desc">Advice on navigating tech careers — from first job to staff engineer, negotiation, interviews, and switching roles.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:82%;background:#f97316"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+9% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Interviews</span><span class="ctag-rel-pill">Salary</span><span class="ctag-rel-pill">Remote work</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">The staff engineer path, explained</div>
            <div class="ctag-ex-item">How to negotiate a competing offer</div>
            <div class="ctag-ex-item">Writing your first performance review</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fff1f2;border-color:#fecdd3;color:#be123c"><span class="ctag-dot" style="background:#f43f5e"></span>Security</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#ffe4e6;color:#be123c">SE</div><div><div class="ctag-name">Security</div><div class="ctag-count">1,540 articles</div></div></div>
            <div class="ctag-desc">Application security, cryptography, threat modelling, vulnerability research, and secure development practices for engineers.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:70%;background:#f43f5e"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+18% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">OWASP</span><span class="ctag-rel-pill">Auth</span><span class="ctag-rel-pill">CVE</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">SQL injection prevention in 2024</div>
            <div class="ctag-ex-item">JWT vs sessions: which to use</div>
            <div class="ctag-ex-item">Zero-trust architecture basics</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#f0fdfa;border-color:#99f6e4;color:#0f766e"><span class="ctag-dot" style="background:#14b8a6"></span>DevOps</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#ccfbf1;color:#0f766e">DO</div><div><div class="ctag-name">DevOps</div><div class="ctag-count">1,188 articles</div></div></div>
            <div class="ctag-desc">Practices and tools that unify software development and IT operations — CI/CD, containerisation, infrastructure as code, monitoring.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:66%;background:#14b8a6"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+2% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Docker</span><span class="ctag-rel-pill">Kubernetes</span><span class="ctag-rel-pill">Terraform</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Building zero-downtime deploys</div>
            <div class="ctag-ex-item">Helm charts for beginners</div>
            <div class="ctag-ex-item">Observability vs. monitoring</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fefce8;border-color:#fef08a;color:#854d0e"><span class="ctag-dot" style="background:#eab308"></span>Performance</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#fef9c3;color:#854d0e">PF</div><div><div class="ctag-name">Performance</div><div class="ctag-count">922 articles</div></div></div>
            <div class="ctag-desc">Techniques for optimising speed, throughput, and resource efficiency — from query tuning to Core Web Vitals.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:60%;background:#eab308"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+1% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Profiling</span><span class="ctag-rel-pill">Caching</span><span class="ctag-rel-pill">Web Vitals</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">N+1 queries and how to fix them</div>
            <div class="ctag-ex-item">React re-renders: a visual guide</div>
            <div class="ctag-ex-item">Redis caching patterns in production</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#f8fafc;border-color:#e2e8f0;color:#475569"><span class="ctag-dot" style="background:#94a3b8"></span>Architecture</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#f1f5f9;color:#475569">AR</div><div><div class="ctag-name">Architecture</div><div class="ctag-count">748 articles</div></div></div>
            <div class="ctag-desc">Software architecture patterns, trade-offs, and design decisions — microservices, monoliths, event-driven, hexagonal, and beyond.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:54%;background:#94a3b8"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↓ slight dip</strong></span><span>−3% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">DDD</span><span class="ctag-rel-pill">Microservices</span><span class="ctag-rel-pill">Clean Code</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Monolith first: the case for starting simple</div>
            <div class="ctag-ex-item">CQRS and event sourcing, explained</div>
            <div class="ctag-ex-item">When to break up a microservice</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.ctag-stage {
  background: #fff;
  /* Top room — content-tag cards pop UP from each pill (~300px tall). */
  padding: 320px 28px 36px;
  font-family: 'Inter', system-ui, sans-serif;
}
.ctag-inner {
  max-width: 560px;
  margin: 0 auto;
}
.ctag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.ctag-t {
  position: relative;
}
.ctag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: help;
  transition: transform .15s, box-shadow .15s;
}
.ctag-t:hover .ctag-pill {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.ctag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ctag-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 260px;
  background: #fff;
  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.11),
    0 2px 8px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}
.ctag-t:hover .ctag-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.ctag-head {
  padding: 13px 14px 11px;
  border-bottom: 1px solid #f4f4f4;
}
.ctag-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ctag-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ctag-name {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}
.ctag-count {
  font-size: 10px;
  color: #bbb;
  margin-top: 1px;
}
.ctag-desc {
  font-size: 11.5px;
  color: #666;
  line-height: 1.55;
}
.ctag-pop {
  padding: 10px 14px;
  border-bottom: 1px solid #f4f4f4;
}
.ctag-pop-label {
  font-size: 7.5px;
  color: #ccc;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ctag-track {
  height: 5px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.ctag-fill {
  height: 100%;
  border-radius: 3px;
}
.ctag-trend {
  font-size: 10px;
  color: #bbb;
  display: flex;
  justify-content: space-between;
}
.ctag-trend-left strong {
  color: #555;
  font-weight: 600;
}
.ctag-rel {
  padding: 10px 14px;
  border-bottom: 1px solid #f4f4f4;
}
.ctag-rel-label {
  font-size: 7.5px;
  color: #ccc;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ctag-rel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ctag-rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f4f4f6;
  color: #888;
  border: 1px solid #eee;
}
.ctag-ex {
  padding: 10px 14px 12px;
}
.ctag-ex-label {
  font-size: 7.5px;
  color: #ccc;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ctag-ex-item {
  font-size: 10.5px;
  color: #777;
  margin-bottom: 4px;
  padding-left: 9px;
  position: relative;
  line-height: 1.4;
}
.ctag-ex-item::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: #ccc;
}