.caching-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto;padding:2rem;display:grid}@media (max-width:1024px){.caching-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.caching-grid{grid-template-columns:1fr}}.cache-card{border-radius:16px;gap:.8rem;padding:1.2rem}.card-header{align-items:center;gap:.75rem;display:flex}.card-icon{background:var(--surface2);border:1px solid var(--border);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:1rem;display:flex}.card-title{font-family:var(--font-display);color:var(--text-hi);font-size:1rem;font-weight:700}.card-description{color:var(--text-dim);font-size:.8rem;line-height:1.5}.card-tags{flex-wrap:wrap;gap:.5rem;display:flex}.tag{border:1px solid var(--border);color:var(--text-dim);background:#151c2780;border-radius:6px;padding:.2rem .6rem;font-size:.7rem;font-weight:600}.tag.highlight-green{color:#4aedc4;background:#4aedc414;border:1px solid #4aedc44d}.tag.highlight-cyan{color:#00e5ff;background:#00e5ff14;border:1px solid #00e5ff4d}.tag.highlight-yellow{color:#ffd166;background:#ffd16614;border:1px solid #ffd1664d}.tag.highlight-orange{color:#ff9f1c;background:#ff9f1c14;border:1px solid #ff9f1c4d}.card-info-sections{flex-direction:column;gap:.5rem;display:flex}.info-box{background:#0d1117;border-radius:6px;padding:.6rem .8rem .6rem 1.2rem;position:relative;overflow:hidden}.info-box:before{content:"";width:4px;position:absolute;top:0;bottom:0;left:0}.card-green .info-box:before{background:var(--green)}.card-cyan .info-box:before{background:var(--cyan)}.card-yellow .info-box:before{background:var(--yellow)}.card-orange .info-box:before{background:#ff9f1c}.info-label{color:var(--text-hi);margin-right:.5rem;font-size:.85rem;font-weight:700}.info-value{color:var(--text-dim);font-size:.85rem}.caching-viz-wrap{background:var(--surface);border:1px solid var(--border);border-radius:20px;max-width:1000px;margin:4rem auto;padding:3rem;position:relative;overflow:hidden}.viz-flow-controls{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:2rem;display:flex}.viz-tab-btn{background:var(--surface);color:var(--text-dim);border:1px solid var(--border2);cursor:pointer;font-family:var(--font-mono);border-radius:10px;padding:.5rem 1rem;font-size:.75rem;transition:all .2s}.viz-tab-btn:hover{border-color:var(--cyan);color:var(--cyan)}.viz-tab-btn.active{background:var(--cyan);color:#000;border-color:var(--cyan);font-weight:700;box-shadow:0 0 15px #00d9ff4d}.viz-flow-title{text-align:center;font-family:var(--font-hero);color:var(--text-hi);letter-spacing:-.01em;max-width:600px;margin:0 auto 2rem;font-size:1.2rem;font-weight:800}.viz-flow-diagram{border:1px solid var(--border);background:#0d1117;border-radius:20px;flex-direction:column;max-width:900px;min-height:380px;margin:0 auto 2rem;padding:2.5rem 1.5rem;display:flex;position:relative}.viz-nodes{z-index:2;justify-content:space-around;align-items:flex-start;gap:0;width:100%;max-width:700px;height:100px;margin:0 auto 2rem;position:relative;flex-direction:row!important;display:flex!important}.viz-node-container{flex-direction:column;align-items:center;width:140px;display:flex}.viz-node-box{z-index:3;background:#1a1f2b;border:2px solid #2d3748;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:80px;height:56px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.viz-node-label{text-transform:uppercase;letter-spacing:.05em}.viz-node-box.active{border-color:var(--cyan);color:var(--cyan);background:#00d9ff1a;transform:scale(1.05);box-shadow:0 0 24px #00d9ff33}.viz-node-box.hit{border-color:var(--green);color:var(--green);background:#3effa31a}.viz-node-box.miss{color:#ffb07c;background:#ff8c421a;border-color:#ffb07c}.viz-arrows-svg{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0}.viz-connector{stroke:var(--border2);stroke-width:2.5px;fill:none;transition:all .3s}.viz-connector.active{stroke:var(--cyan);stroke-dasharray:8 5;animation:1s linear infinite dash-move}@keyframes dash-move{to{stroke-dashoffset:-13px}}.viz-connector.hit{stroke:var(--green)}.viz-connector.miss{stroke:#ffb07c}.viz-flow-status{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:.3rem .8rem;font-size:.65rem;font-weight:700;position:absolute;top:1rem;right:1.5rem}.viz-flow-diagram .flow-wrap{gap:.4rem}.viz-flow-diagram .flow-step{gap:.6rem}.viz-flow-diagram .step-num{width:26px;height:26px;font-size:.75rem}.viz-flow-diagram .step-body{padding:.45rem .8rem;font-size:.78rem}.viz-legend{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2rem;display:flex}.viz-legend-item{color:var(--text-dim);align-items:center;gap:.5rem;font-size:.75rem;display:flex}.viz-legend-box{border:2px solid;border-radius:4px;width:16px;height:16px}.leg-hit{border-color:var(--green);background:#3effa326}.leg-miss{background:#ff8c4226;border-color:#ffb07c}.viz-playback-controls{border:1px solid var(--border);background:#0003;border-radius:8px;align-items:center;gap:.5rem;padding:.25rem;display:flex}.viz-ctrl-btn{width:28px;height:28px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:all .2s;display:flex}.viz-ctrl-btn:hover{background:var(--surface);color:var(--text-hi)}.viz-ctrl-btn:active{transform:scale(.95)}@keyframes popupIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}[data-theme=light] .viz-flow-diagram{--bg:#080b10;--surface:#0e1219;--surface2:#151c27;--border:#1e2a3a;--border2:#253040;--text:#c9d3e0;--text-dim:#5a6a7e;--text-hi:#eef2f8;--cyan:#00e5ff;--purple:#b985f4;--green:#3effa3;--dim:#1e1e2e;background:#12161f;border-color:#1e2a3a;box-shadow:0 4px 6px #00000026}