/* ============ OPERATING-MODEL SIMULATOR ============  pairs with sim.js. Tokens only. */
.sim{margin:2.4rem 0 1.6rem}
.sim-picks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sim-picks button{font-family:var(--body);font-size:14px;color:var(--ink);background:var(--white);border:1px solid var(--line-strong);
  border-radius:100px;padding:10px 16px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.sim-picks button:hover{transform:translateY(-2px);border-color:var(--ink)}
.sim-picks button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sim-picks button:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

.sim-stage{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-float);padding:clamp(12px,2vw,22px);overflow:hidden}
.sim-svg{display:block;width:100%;height:auto;font-family:var(--body)}
.sim-col{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;fill:var(--ink-45)}
.sim-node text{font-size:13.5px;fill:var(--ink)}
.sim-node circle{fill:var(--cobalt)}
.n-route rect{fill:var(--paper);stroke:var(--line-strong);stroke-width:1}
.sim-step{font-size:13px;fill:var(--ink-70)}
.sim-n{font-family:var(--mono);font-size:10px;fill:var(--ember-ink);letter-spacing:.08em}
.n-ok path{fill:var(--white);stroke:var(--ember);stroke-width:1.5}
.n-ok text{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;fill:var(--ember-ink)}
.sim-note{font-size:11.5px;fill:var(--ink-45)}
.sim-node .sim-kpi-l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:var(--ink-45)}
.sim-node .sim-kpi-from{font-family:var(--display);font-size:20px;fill:var(--ink-45);text-decoration:line-through}
.sim-node .sim-kpi-to{font-family:var(--display);font-size:30px;font-weight:600;fill:var(--cobalt);letter-spacing:-.02em}
.sim-wire{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round}

/* the drawing: wires draw in, nodes settle, in sequence (--d per element) */
.drawn .sim-wire{stroke-dasharray:600;stroke-dashoffset:600;animation:sim-draw .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
.drawn .sim-node{opacity:0;transform:translateY(6px);animation:sim-pop .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes sim-draw{to{stroke-dashoffset:0}}
@keyframes sim-pop{to{opacity:1;transform:none}}
.sim-stage.instant .sim-wire,.sim-stage.instant .sim-node{animation:none;stroke-dashoffset:0;opacity:1;transform:none}

.sim-out{margin-top:18px;opacity:0;transform:translateY(8px);transition:opacity .5s ease .9s,transform .6s cubic-bezier(.2,.8,.2,1) .9s}
.sim-out.in{opacity:1;transform:none}
.sim-out h3{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px);letter-spacing:-.015em;margin:0 0 6px}
.sim-lead{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);margin:0 0 10px}
.sim-out ol{margin:0;padding-left:20px}
.sim-out li{font-size:15px;line-height:1.6;color:var(--ink-70);margin:6px 0}
.sim-foot{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-45);max-width:70ch}
.sim-foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}

@media (max-width:640px){.sim-svg{min-width:640px}.sim-stage{overflow-x:auto}}
@media (prefers-reduced-motion:reduce){.sim-out{transition:none;opacity:1;transform:none}.sim-picks button{transition:none}}