.ma {
    width: 36px;
    height: 36px;
}
.ma-orbit-core,
.ma-pulse-core,
.ma-halo-core,
.ma-beacon-core {
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 14px rgba(104,221,248,.65);
}
.ma-orbit-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(104, 221, 248, 0.85);
    left: 15px;
    top: 15px;
    transform-origin: 3px 3px;
    animation: orbit 2.8s linear infinite;
}
.od2 { animation-duration: 3.4s; animation-delay: -.8s; }
.od3 { animation-duration: 4s; animation-delay: -1.4s; }
@keyframes orbit {
    from { transform: rotate(0deg) translateX(14px); }
    to { transform: rotate(360deg) translateX(14px); }
}
.ma-neural { position: relative; }
.ma-nnode {
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--tc);
    box-shadow:0 0 8px rgba(104,221,248,.7);
    animation: nodePulse 1.8s ease-in-out infinite;
}
.nn1 { left:6px; top:6px; }
.nn2 { left:15px; top:3px; animation-delay:.2s; }
.nn3 { left:24px; top:10px; animation-delay:.4s; }
.nn4 { left:9px; top:22px; animation-delay:.6s; }
.nn5 { left:22px; top:24px; animation-delay:.8s; }
@keyframes nodePulse {
    0%,100% { transform:scale(1); opacity:.6; }
    50% { transform:scale(1.35); opacity:1; }
}

/* ── Topology / Manifold icons ──────────────────────────────────── */
:root { --tc: #22c5e8; --tc-a: rgba(104,221,248,.38); --tc-b: rgba(104,221,248,.18); }

.topo-icon { position:relative; width:46px; height:46px; flex-shrink:0; }

/* Manifold sheet */
.manifold-sheet svg { position:absolute; inset:0; overflow:visible; }
.manifold-sheet .gridline { fill:none; stroke:rgba(104,221,248,.22); stroke-width:1; stroke-linecap:round; animation:sheetPulse 3s ease-in-out infinite; }
.manifold-sheet .sheet { fill:rgba(104,221,248,.035); stroke:rgba(104,221,248,.62); stroke-width:1.15; animation:sheetWarp 3.6s ease-in-out infinite; }
.manifold-sheet .tnode { fill:var(--tc); filter:drop-shadow(0 0 6px rgba(104,221,248,.85)); animation:nodeGlow 2s ease-in-out infinite; }
@keyframes sheetWarp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.5px)} }
@keyframes sheetPulse { 0%,100%{opacity:.35} 50%{opacity:.95} }
@keyframes nodeGlow { 0%,100%{opacity:.55} 50%{opacity:1} }

/* Topology torus */
.torus { display:grid; place-items:center; }
.torus-ring { position:absolute; width:34px; height:22px; border-radius:50%; border:1.4px solid rgba(104,221,248,.7); box-shadow:0 0 16px rgba(104,221,248,.12); animation:torusTilt 3.8s ease-in-out infinite; }
.torus-ring.r2 { width:21px; height:34px; opacity:.55; animation-delay:.25s; }
.torus-ring.r3 { width:30px; height:30px; border-color:rgba(51,110,229,.45); opacity:.45; transform:rotate(45deg); }
.torus-core { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--tc); box-shadow:0 0 14px rgba(104,221,248,.8); }
@keyframes torusTilt { 0%,100%{transform:rotate(-8deg) scale(1)} 50%{transform:rotate(8deg) scale(1.08)} }

/* Geodesic nodes */
.geodesic svg { position:absolute; inset:0; }
.geodesic line { stroke:rgba(104,221,248,.35); stroke-width:1.05; stroke-linecap:round; animation:geoLine 2.6s ease-in-out infinite; }
.geodesic circle { fill:var(--tc); filter:drop-shadow(0 0 5px rgba(104,221,248,.8)); animation:geoNode 2s ease-in-out infinite; }
.geodesic circle:nth-of-type(2){animation-delay:.2s} .geodesic circle:nth-of-type(3){animation-delay:.4s}
.geodesic circle:nth-of-type(4){animation-delay:.6s} .geodesic circle:nth-of-type(5){animation-delay:.8s}
.geodesic circle:nth-of-type(6){animation-delay:1s}
@keyframes geoLine { 0%,100%{opacity:.25} 50%{opacity:.9} }
@keyframes geoNode { 0%,100%{r:2.1;opacity:.55} 50%{r:3.1;opacity:1} }

/* Folded manifold */
.fold { display:grid; place-items:center; }
.fold-panel { position:absolute; width:32px; height:18px; border:1px solid rgba(104,221,248,.45); background:linear-gradient(135deg,rgba(104,221,248,.08),rgba(51,110,229,.04)); transform:skewY(-16deg); border-radius:5px; animation:foldFloat 3.4s ease-in-out infinite; }
.fold-panel.p2 { transform:translateY(9px) skewY(16deg); opacity:.7; border-color:rgba(104,221,248,.28); animation-delay:.3s; }
.fold-bridge { position:absolute; width:22px; height:1px; background:rgba(104,221,248,.45); transform:rotate(90deg); animation:foldBridge 3.4s ease-in-out infinite; }
.fold-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--tc); box-shadow:0 0 12px rgba(104,221,248,.8); animation:foldDot 2s ease-in-out infinite; }
@keyframes foldFloat { 0%,100%{translate:0 0} 50%{translate:0 -2px} }
@keyframes foldBridge { 0%,100%{opacity:.25} 50%{opacity:.85} }
@keyframes foldDot { 0%,100%{transform:translate(-9px,-6px)} 50%{transform:translate(9px,6px)} }

/* Curvature field */
.curvature svg { position:absolute; inset:0; }
.curvature path { fill:none; stroke:rgba(104,221,248,.38); stroke-width:1.1; stroke-linecap:round; animation:curveFlow 2.8s ease-in-out infinite; }
.curvature path:nth-child(2){animation-delay:.15s} .curvature path:nth-child(3){animation-delay:.3s} .curvature path:nth-child(4){animation-delay:.45s}
.curvature .mass { fill:var(--tc); filter:drop-shadow(0 0 7px rgba(104,221,248,.8)); animation:massPulse 2.2s ease-in-out infinite; }
@keyframes curveFlow { 0%,100%{opacity:.25;stroke-dasharray:3 5} 50%{opacity:.9;stroke-dasharray:8 3} }
@keyframes massPulse { 0%,100%{r:4;opacity:.7} 50%{r:5.5;opacity:1} }

/* Homotopy loop */
.loop { display:grid; place-items:center; }
.loop-path { position:absolute; width:34px; height:34px; border:1.2px solid rgba(104,221,248,.45); border-radius:42% 58% 46% 54%; animation:loopMorph 3s ease-in-out infinite; }
.loop-path.l2 { width:24px; height:24px; border-color:rgba(104,221,248,.35); animation-delay:.35s; }
.loop-path.l3 { width:14px; height:14px; border-color:rgba(51,110,229,.55); animation-delay:.7s; }
.loop-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--tc); box-shadow:0 0 11px rgba(104,221,248,.8); animation:loopOrbit 2.5s linear infinite; }
@keyframes loopMorph { 0%,100%{border-radius:42% 58% 46% 54%;transform:rotate(0deg)} 50%{border-radius:58% 42% 54% 46%;transform:rotate(18deg)} }
@keyframes loopOrbit { from{transform:rotate(0deg) translateX(17px)} to{transform:rotate(360deg) translateX(17px)} }

/* Atlas patches */
.atlas { display:grid; place-items:center; }
.patch { position:absolute; width:22px; height:18px; border:1px solid rgba(104,221,248,.42); border-radius:50%; background:rgba(104,221,248,.04); animation:patchPulse 2.4s ease-in-out infinite; }
.pa1 { transform:translate(-7px,-5px) rotate(-22deg); }
.pa2 { transform:translate(8px,-2px) rotate(18deg); animation-delay:.25s; }
.pa3 { transform:translate(0,9px) rotate(8deg); animation-delay:.5s; }
.atlas-core { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--tc); box-shadow:0 0 12px rgba(104,221,248,.8); }
@keyframes patchPulse { 0%,100%{opacity:.35} 50%{opacity:.9} }

/* Fiber bundle */
.bundle svg { position:absolute; inset:0; }
.bundle .base { fill:none; stroke:rgba(104,221,248,.35); stroke-width:1.2; }
.bundle .fiber { stroke:rgba(104,221,248,.65); stroke-width:1; stroke-linecap:round; animation:fiberRise 2.2s ease-in-out infinite; }
.bundle .fiber:nth-of-type(2){animation-delay:.15s} .bundle .fiber:nth-of-type(3){animation-delay:.3s}
.bundle .fiber:nth-of-type(4){animation-delay:.45s} .bundle .fiber:nth-of-type(5){animation-delay:.6s}
.bundle circle { fill:var(--tc); filter:drop-shadow(0 0 5px rgba(104,221,248,.85)); }
@keyframes fiberRise { 0%,100%{opacity:.35;transform:translateY(1px)} 50%{opacity:1;transform:translateY(-2px)} }

/* Manifold portal */
.portal { display:grid; place-items:center; }
.portal-ring { position:absolute; width:36px; height:36px; border-radius:50%; border:1px solid rgba(104,221,248,.38); animation:portalSpin 4s linear infinite; }
.portal-ring::before { content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed rgba(104,221,248,.28); }
.portal-slice { position:absolute; width:34px; height:12px; border:1px solid rgba(104,221,248,.45); border-radius:50%; background:rgba(104,221,248,.04); animation:portalSlice 2.7s ease-in-out infinite; }
.portal-slice.s2 { transform:rotate(60deg); animation-delay:.25s; }
.portal-slice.s3 { transform:rotate(-60deg); animation-delay:.5s; }
.portal-core { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--tc); box-shadow:0 0 14px rgba(104,221,248,.85); }
@keyframes portalSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes portalSlice { 0%,100%{opacity:.25} 50%{opacity:.85} }

/* Saddle point */
.saddle svg { position:absolute; inset:0; overflow:visible; }
.saddle path { fill:none; stroke:rgba(104,221,248,.42); stroke-width:1.05; stroke-linecap:round; animation:saddleWave 3s ease-in-out infinite; }
.saddle path:nth-child(2){animation-delay:.2s} .saddle path:nth-child(3){animation-delay:.4s}
.saddle path:nth-child(4){animation-delay:.6s}
.saddle circle { fill:var(--tc); filter:drop-shadow(0 0 6px rgba(104,221,248,.8)); animation:saddleCore 2s ease-in-out infinite; }
@keyframes saddleWave { 0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:.9;transform:translateY(-1px)} }
@keyframes saddleCore { 0%,100%{r:3.4} 50%{r:4.8} }

/* Semantic triangulation */
.triangulate svg { position:absolute; inset:0; }
.triangulate polygon { fill:rgba(104,221,248,.035); stroke:rgba(104,221,248,.4); stroke-width:1.05; animation:triPulse 2.8s ease-in-out infinite; }
.triangulate polygon:nth-child(2){animation-delay:.25s} .triangulate polygon:nth-child(3){animation-delay:.5s}
.triangulate circle { fill:var(--tc); filter:drop-shadow(0 0 5px rgba(104,221,248,.85)); animation:triNode 2s ease-in-out infinite; }
@keyframes triPulse { 0%,100%{opacity:.25} 50%{opacity:.9} }
@keyframes triNode { 0%,100%{opacity:.55} 50%{opacity:1} }

/* Topology compass */
.topo-compass { display:grid; place-items:center; }
.tc-ring { position:absolute; inset:5px; border-radius:50%; border:1px solid rgba(104,221,248,.32); }
.tc-loop { position:absolute; width:28px; height:16px; border-radius:50%; border:1px solid rgba(104,221,248,.55); animation:tcLoop 3.2s ease-in-out infinite; }
.tc-loop.t2 { transform:rotate(60deg); animation-delay:.25s; }
.tc-loop.t3 { transform:rotate(-60deg); animation-delay:.5s; }
.tc-needle { position:absolute; width:3px; height:18px; top:5px; border-radius:99px; background:linear-gradient(var(--tc),transparent); transform-origin:50% 18px; animation:tcNeedle 2.8s ease-in-out infinite; }
.tc-core { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--tc); box-shadow:0 0 12px rgba(104,221,248,.8); }
@keyframes tcLoop { 0%,100%{opacity:.35} 50%{opacity:.9} }
@keyframes tcNeedle { 0%,100%{transform:rotate(-42deg)} 50%{transform:rotate(42deg)} }