.oop-mermaid-wrap{flex-direction:column;align-items:center;width:100%;max-width:900px;margin:0 auto 2rem;display:flex}.oop-mermaid-wrap .mermaid{justify-content:center;width:100%;display:flex}.oop-mermaid-wrap .mermaid svg{max-width:100%;height:auto}.oop-diagram-outer{border:1px solid var(--border);background:#0d1117;border-radius:20px;max-width:900px;margin:0 auto;padding:2rem 1.5rem 2.5rem;position:relative;overflow:hidden}.oop-diagram-outer:before{content:"";pointer-events:none;background:radial-gradient(circle,#7c4dff1f 0%,#0000 70%);border-radius:50%;width:220px;height:220px;position:absolute;top:-60px;left:-60px}.oop-flow-status-badge{background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);border-radius:20px;padding:.3rem .8rem;font-size:.65rem;font-weight:700;position:absolute;top:1rem;right:1.5rem}.oop-flow-title{text-align:center;font-family:var(--font-display);color:var(--text-hi);max-width:600px;margin:0 auto 2rem;font-size:1.15rem;font-weight:800}.oop-class-scene{flex-direction:column;align-items:center;gap:0;min-height:260px;display:flex;position:relative}.oop-class-row{z-index:2;justify-content:center;gap:2rem;width:100%;display:flex;position:relative}.oop-class-box{background:#1a1f2b;border:2px solid #2d3748;border-radius:12px;width:140px;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.oop-class-box.highlight{background:#7c4dff14;border-color:#7c4dff;transform:scale(1.06);box-shadow:0 0 22px #7c4dff66}.oop-class-box.highlight-cyan{background:#00e5ff12;border-color:#00e5ff;box-shadow:0 0 22px #00e5ff66}.oop-class-box.highlight-pink{background:#ff408112;border-color:#ff4081;box-shadow:0 0 22px #ff408166}.oop-class-box.highlight-green{background:#1de9b612;border-color:#1de9b6;box-shadow:0 0 22px #1de9b666}.oop-class-box.highlight-amber{background:#ffab0012;border-color:#ffab00;box-shadow:0 0 22px #ffab0059}.oop-class-box.faded{opacity:.3}.oop-class-header{font-family:var(--font-display);color:var(--text-hi);letter-spacing:.04em;text-align:center;border-bottom:1px solid #2d3748;padding:.5rem .7rem;font-size:.72rem;font-weight:800}.oop-class-meta{color:var(--text-dim);letter-spacing:0;font-size:.6rem;font-weight:400;display:block}.oop-class-body{flex-direction:column;gap:.3rem;padding:.5rem .7rem;display:flex}.oop-class-field,.oop-class-method{font-family:var(--font-mono);color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:.6rem;line-height:1.4;transition:color .3s;overflow:hidden}.oop-class-field.lit{color:#7c4dff}.oop-class-method.lit{color:#00e5ff}.oop-class-method.lit-green{color:#1de9b6}.oop-class-method.lit-pink{color:#ff4081}.oop-class-method.lit-amber{color:#ffab00}.oop-class-divider{background:#2d3748;width:100%;height:1px;margin:.25rem 0}.oop-svg-connectors{pointer-events:none;z-index:1;width:100%;position:absolute;inset:0;overflow:visible}.oop-connector{stroke:#2d3748;stroke-width:2px;fill:none;marker-end:url(#oop-arrow);transition:stroke .35s,stroke-width .35s}.oop-connector.active-purple{stroke:#7c4dff;stroke-width:2.5px;stroke-dasharray:7 4;animation:.9s linear infinite oop-dash}.oop-connector.active-cyan{stroke:#00e5ff;stroke-width:2.5px;stroke-dasharray:7 4;animation:.9s linear infinite oop-dash}.oop-connector.active-pink{stroke:#ff4081;stroke-width:2.5px;stroke-dasharray:7 4;animation:.9s linear infinite oop-dash}.oop-connector.active-green{stroke:#1de9b6;stroke-width:2.5px;stroke-dasharray:7 4;animation:.9s linear infinite oop-dash}@keyframes oop-dash{to{stroke-dashoffset:-11px}}.oop-step-list{flex-direction:column;gap:.45rem;max-width:600px;margin:1.5rem auto 0;display:flex}.oop-step-row{align-items:flex-start;gap:.75rem;transition:opacity .3s;display:flex}.oop-step-row.faded{opacity:.35}.oop-step-row.active{opacity:1}.oop-step-num{border:2px solid var(--border2);width:26px;height:26px;color:var(--text-dim);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.72rem;font-weight:700;transition:border-color .3s,color .3s;display:flex}.oop-step-row.active .oop-step-num{color:#7c4dff;border-color:#7c4dff}.oop-step-body{background:var(--surface2);color:var(--text-dim);border-radius:8px;flex:1;padding:.45rem .85rem;font-size:.8rem;line-height:1.5;transition:background .3s,color .3s}.oop-step-row.active .oop-step-body{color:var(--text-hi);background:#7c4dff12}.oop-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}.oop-tab-btn:hover{color:#7c4dff;border-color:#7c4dff}.oop-tab-btn.active{color:#fff;background:#7c4dff;border-color:#7c4dff;font-weight:700;box-shadow:0 0 15px #7c4dff66}.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)}.oop-rating-dots{align-items:center;gap:4px;display:flex}.oop-dot{background:var(--border2);border-radius:50%;width:10px;height:10px;transition:background .2s}.oop-dot.on{background:#7c4dff;box-shadow:0 0 6px #7c4dff99}.oop-res-icon-youtube{color:#f44}.oop-res-icon-web{color:#4a90e2}.oop-res-icon-course{color:#f5a623}[data-theme=light] .oop-mermaid-wrap{--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:1px solid #1e2a3a;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #00000026}