/* Data consolidation mock animation (mapper.html) — not shown on phones */
.mx{position:relative;margin-top:2rem;display:grid;grid-template-columns:1fr .9fr 1.25fr;gap:2.4rem;align-items:start}
.mx svg.cl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.mx svg.cl path{fill:none;stroke-width:1.3}
.mx .col{position:relative;z-index:2;display:grid;gap:.8rem}
.mx .src{border:1px solid var(--border-soft);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden;opacity:.3;
  transform:translateX(-10px);transition:opacity .5s,transform .5s}
.mx .src.in{opacity:1;transform:none}
.mx .src .hd{display:flex;justify-content:space-between;padding:.4rem .75rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,.025)}
.mx .src .hd b{color:var(--ghost);letter-spacing:.03em}
.mx table{width:100%;min-width:0;border-collapse:collapse;font-family:'Space Mono',ui-monospace,Consolas,monospace;font-size:.7rem}
.mx th{font-weight:500;text-align:left;padding:.28rem .75rem;color:var(--muted-dim);font-size:.64rem}
.mx th.key span{display:inline-block;padding:.05rem .3rem;border-radius:5px;border:1px dashed transparent;transition:.35s}
.mx th.key.hot span{color:var(--ghost);border-color:var(--violet);background:rgba(155,123,255,.18)}
.mx th.key.done span{color:#CDBEFF;border-color:rgba(155,123,255,.6)}
.mx td{padding:.26rem .75rem;color:var(--muted);border-top:1px solid rgba(240,244,255,.04);white-space:nowrap}
.mx td.k span{display:inline-block;padding:0 .25rem;border-radius:4px;transition:.35s}
.mx td.k.on span{color:var(--ghost);background:rgba(0,200,180,.16)}
.mx td.k.lone span{color:#FFD08A;background:rgba(255,181,71,.18)}

.mx .map{position:relative;z-index:2;border:1px solid var(--border);border-radius:16px;padding:1rem;
  background:radial-gradient(120% 90% at 50% 0%,rgba(155,123,255,.09),rgba(10,15,30,.4))}
.mx .map .gh{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#CDBEFF;margin-bottom:.7rem}
.mx .concept{border:1px dashed rgba(155,123,255,.5);border-radius:12px;padding:.75rem;min-height:5.5rem;transition:border-color .4s,background .4s}
.mx .concept.on{border-style:solid;border-color:var(--violet);background:rgba(155,123,255,.07)}
.mx .concept .cn{font-size:.82rem;font-weight:700;color:var(--ghost);letter-spacing:.05em}
.mx .tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:.45rem 0 .2rem;min-height:1.2rem}
.mx .tags span{font-family:'Space Mono',ui-monospace,Consolas,monospace;font-size:.6rem;color:#CDBEFF;border:1px solid rgba(155,123,255,.5);
  border-radius:99px;padding:.05rem .4rem}
.mx .items{display:grid;gap:.45rem;margin-top:.8rem}
.mx .it{position:relative;font-family:'Space Mono',ui-monospace,Consolas,monospace;font-size:.76rem;color:var(--ghost);padding:.38rem .65rem;
  border-radius:9px;border:1px solid var(--teal);background:rgba(0,200,180,.12);opacity:0;transform:scale(.7);transition:opacity .35s,transform .4s}
.mx .it.in{opacity:1;transform:none}
.mx .it.lone{border-color:#FFB547;background:rgba(255,181,71,.12)}
.mx .it small{float:right;font-size:.6rem;color:var(--muted)}
.mx .fly{position:fixed;z-index:50;pointer-events:none;font-family:'Space Mono',ui-monospace,Consolas,monospace;font-size:.64rem;color:var(--ghost);
  padding:.05rem .35rem;border-radius:5px;border:1px solid var(--violet);background:rgba(155,123,255,.3);box-shadow:0 0 14px var(--violet)}

.mx .out{position:relative;z-index:2;border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.mx .out .hd{padding:.45rem .8rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--border-soft)}
.mx .out td{white-space:normal;vertical-align:top}
.mx .out tr.r{opacity:0;transition:opacity .4s}
.mx .out tr.r.in{opacity:1}
.mx .out td i{display:block;font-style:normal;font-size:.55rem;color:var(--muted-dim);letter-spacing:.04em}
.mx .out tr.lone td{background:rgba(255,181,71,.07)}
.mx .out tr.lone td:first-child{color:#FFD08A}
.mx .out .note{font-size:.7rem;color:#FFD08A;padding:.5rem .8rem;border-top:1px solid var(--border-soft);opacity:0;transition:opacity .4s}
.mx .out .note.in{opacity:1}

.mx-steps{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}
.mx-steps span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:99px;border:1px solid var(--border-soft);color:var(--muted-dim);transition:.3s}
.mx-steps span.on{color:#062a26;background:var(--teal);border-color:var(--teal)}
.mx-steps span.done{color:var(--teal);border-color:var(--border)}
.mx-foot{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;margin-top:1.3rem;flex-wrap:wrap}
.mx-say{font-size:.92rem;color:var(--ghost);min-height:1.4em;flex:1}
.mx-say em{font-style:normal;color:var(--teal)}
.mx-stats{display:flex;gap:1.6rem}
.mx-stats div{font-size:.68rem;color:var(--muted)}
.mx-stats b{display:block;font-size:1.3rem;color:var(--ghost)}
.mx-stats b.t{color:var(--teal)}.mx-stats b.a{color:var(--amber)}
.mx-btn{font:inherit;font-size:.8rem;color:var(--teal);background:transparent;border:1px solid var(--border);border-radius:99px;padding:.45rem 1rem;cursor:pointer}
.mx-btn:hover{border-color:var(--teal)}
@media (max-width:1000px){.mx{grid-template-columns:1fr 1fr}.mx .out{grid-column:1 / -1}}
@media (max-width:820px){.mx{grid-template-columns:1fr}.mx svg.cl{display:none}}
@media (max-width:600px){.no-phone{display:none!important}}
