/* ---------- The Maths of AI: "Where each idea lives" transit map ---------- */
.ml{max-width:1440px;margin:0 auto;padding:40px 7vw 96px}
.ml-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:0 0 22px}
.ml-intro{max-width:640px}
.ml-intro h2{margin:0 0 14px;font:500 clamp(30px,3.6vw,46px)/1.06 var(--sans);letter-spacing:-.035em}
.ml-intro p:not(.eyebrow){margin:0;color:var(--muted);font:400 15px/1.7 var(--sans)}
.ml-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ml-modes{display:inline-flex;padding:3px;border:1px solid var(--line2);border-radius:6px}
.ml-modes button,.ml-pause{min-height:34px;padding:0 14px;border:0;border-radius:4px;background:transparent;color:var(--muted);font:500 12px var(--sans);cursor:pointer}
.ml-modes button[aria-pressed="true"]{background:#f5f5f5;color:#111}
.ml-pause{border:1px solid var(--line2)}
.ml-modes button:hover,.ml-pause:hover{color:var(--text)}
.ml-modes button[aria-pressed="true"]:hover{color:#111}
.ml-modes button:focus-visible,.ml-pause:focus-visible,.ml-key:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px}
.ml-prompt{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;color:var(--muted);font:400 15px/1.6 var(--mono)}
.ml-prompt-k{color:var(--dim);font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ml-words .is-cur{color:#fff;box-shadow:inset 0 -2px #c4b2ff}
.ml-next{padding:1px 7px;border-radius:5px;background:rgba(196,178,255,.16);color:#fff;animation:ml-in .5s ease}
@keyframes ml-in{from{opacity:0}to{opacity:1}}

.ml-stage{position:relative;padding:14px 18px 8px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle,#1a1c20 1px,transparent 1.2px) 0 0/22px 22px,#0a0b0c;overflow:hidden}
.ml-svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.ml-svg text{user-select:none}

/* lines */
.ml-track,.ml-glow,.ml-flow{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ml-track{stroke:var(--c);stroke-width:2.4;opacity:.85}
.ml-line.stream .ml-track{stroke-width:4;opacity:1}
.ml-glow{stroke:var(--c);stroke-width:16;opacity:.09}
.ml-flow{stroke:#fff;stroke-width:1.6;stroke-dasharray:2 16;opacity:.55;animation:ml-flow 1.4s linear infinite}
@keyframes ml-flow{to{stroke-dashoffset:-18}}
.ml-line.thin .ml-track{stroke-width:1.2;stroke-dasharray:3 4;opacity:.7}
.ml-line.blade .ml-track{stroke-width:3.2}
.ml-line.loop .ml-track{stroke-width:1.4;stroke-dasharray:5 6;opacity:.5}
.ml-line.loop .ml-flow{stroke:var(--c);stroke-width:2.4;opacity:0}
.is-training .ml-line.loop .ml-track{opacity:.95}
.is-training .ml-line.loop .ml-flow{opacity:.9}

/* stations */
.ml-mark,.ml-add{fill:#0b0c0e;stroke:var(--c);stroke-width:1.8;transition:fill .3s,stroke .3s}
.ml-plus{stroke:var(--c);stroke-width:1.6}
.ml-no{fill:var(--c);font:500 9.5px var(--mono);pointer-events:none}
.ml-halo{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center}
.ml-tokmark{fill:none;stroke:#e8eaed;stroke-width:1.4}
.ml-name{fill:var(--text);font:500 14px var(--sans)}
.ml-sub{fill:var(--quiet);font:400 11px var(--mono)}
.ml-note{fill:var(--dim);font:400 11px var(--mono)}
.ml-st[data-idea]{cursor:pointer;outline:none}
.ml-st[data-idea]:hover .ml-mark,.ml-st[data-idea]:focus-visible .ml-mark{stroke-width:3}
.ml-st[data-idea]:focus-visible .ml-halo{opacity:.3}
.ml-st.is-now .ml-halo{animation:ml-pulse 1.4s ease-out infinite}
@keyframes ml-pulse{0%{opacity:.4;transform:scale(.55)}100%{opacity:0;transform:scale(1.3)}}
.ml-st.is-step .ml-mark{stroke:#ffb46a;fill:#2b1a07}
.ml-st.is-step .ml-no{fill:#ffd7a8}

/* focus: one idea lit everywhere it lives */
.ml-svg [data-idea]{transition:opacity .25s}
.has-focus [data-idea]:not(.is-on){opacity:.16}
.has-focus .ml-st.is-on .ml-halo{opacity:.28;transform:scale(1);animation:none}
.has-focus .ml-st.is-on .ml-mark{stroke-width:3}

/* block, output, token */
.ml-frame{fill:rgba(255,255,255,.018);stroke:var(--line2)}
.ml-ghost{fill:none;stroke:var(--line2)}
.ml-ghost.g1{opacity:.55}.ml-ghost.g2{opacity:.28}
.ml-frame,.ml-ghost{transition:stroke .4s}
.is-repeat .ml-frame,.is-repeat .ml-ghost{stroke:#c4b2ff}
.ml-frame-t,.ml-frame-c{fill:var(--quiet);font:500 10.5px var(--mono);letter-spacing:.12em}
.ml-frame-c tspan{fill:var(--text)}
.ml-word{fill:#fff;font:500 20px var(--sans)}
.ml-bar rect{fill:#c9ccd1;opacity:.8}
.ml-bar:first-child rect{fill:#fff;opacity:1}
.ml-bar-t{fill:var(--body);font:400 11.5px var(--mono)}
.ml-bar-p{fill:var(--quiet);font:400 11px var(--mono)}
.ml-tok{pointer-events:none}
.ml-tok-core{fill:#fff}
.ml-tok-glow{fill:#c4b2ff;opacity:.75}
.ml-trail circle{fill:#fff}
.ml-tok.is-grad .ml-tok-glow,.ml-trail.is-grad circle{fill:#ffb46a}
.ml-tok.is-grad .ml-tok-core{fill:#ffe3c2}

/* legend and card */
.ml-foot{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:28px;margin-top:22px}
.ml-legend{display:grid;gap:4px;align-content:start}
.ml-key{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font:400 14px var(--sans);text-align:left;cursor:pointer}
.ml-key i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.ml-key-no{color:var(--c);font:500 11px var(--mono)}
.ml-key:hover{color:var(--text);background:#111214}
.ml-key[aria-pressed="true"]{border-color:var(--c);color:var(--text);background:#111214}
.ml-card{min-height:178px;padding:20px 24px;border:1px solid var(--line);border-left:2px solid var(--c,#e8eaed);border-radius:16px;background:#0c0d0f}
.ml-card.has-art{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:22px;align-items:start}
.ml-art{position:relative;display:block;aspect-ratio:4/3;border:1px solid #23262b;border-radius:12px;overflow:hidden;background:#05060a;isolation:isolate}
.ml-art:hover{border-color:var(--ir-accent)}
.ml-kicker{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--quiet);font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.ml-kicker i{width:7px;height:7px;border-radius:50%;background:var(--c,#e8eaed)}
.ml-card h3{margin:0 0 6px;font:500 24px/1.15 var(--sans);letter-spacing:-.02em}
.ml-eq{margin:0 0 10px;color:var(--c);font:400 13px var(--mono)}
.ml-text{margin:0;max-width:68ch;color:var(--body);font:400 15px/1.65 var(--sans)}
.ml-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:16px 0 0}
.ml-foot-note{margin:16px 0 0;color:var(--dim);font:400 11px/1.6 var(--mono)}

@media(max-width:900px){
  .ml-head{flex-direction:column;align-items:flex-start;gap:18px}
}
@media(max-width:760px){
  .ml{padding:24px 16px 64px}
  .ml-stage{padding:10px 4px 6px;border-radius:18px}
  .ml-prompt{flex-wrap:wrap;gap:4px 10px;font-size:13px}
  .ml-foot{grid-template-columns:1fr;gap:16px}
  .ml-card{order:-1;min-height:0;padding:16px 18px}
  .ml-card h3{font-size:20px}
  .ml-card.has-art{grid-template-columns:1fr;gap:14px}
  .ml-art{aspect-ratio:16/9}
  .ml-text{font-size:14px}
  .ml-legend{grid-template-columns:1fr 1fr}
  .ml-key{min-height:40px;padding:0 8px;font-size:12.5px;gap:7px}
}
@media(prefers-reduced-motion:reduce){
  .ml-flow,.ml-st.is-now .ml-halo,.ml-next{animation:none}
}