/* An input dock feeds the personal Milo illustration. Source identities stay
   visible without JS; motion belongs to the same bounded, pausable system. */
.mc-connected{position:relative;width:100%;max-width:535px;isolation:isolate}
.mi-today .mc-connected-label{font-size:10px;line-height:1.5;letter-spacing:.08em;text-align:center;text-transform:uppercase;color:#777;margin:0 0 18px}
.mc-connector-dock{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:0;margin:0;position:relative;z-index:1}
.mc-connector-dock>li{min-width:0;display:flex;justify-content:center}
.mc-connector{appearance:none;border:0;background:transparent;color:#292929;font:inherit;display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 6px 10px;width:100%;max-width:88px;border-radius:19px;cursor:pointer;transition:background .35s,box-shadow .45s,transform .55s cubic-bezier(.22,1,.36,1)}
.mc-connector>img{display:block;object-fit:contain;width:30px;height:30px;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.mc-connector>span{font-size:10px;line-height:1.3;font-weight:400}.mc-connector>small{font-size:8px;line-height:1.4;color:#777;margin-top:-4px;white-space:nowrap}
.mc-connector:hover,.mc-connector.is-active{background:#ffffffc7;box-shadow:0 13px 30px -18px #00000028}
.mc-connector:hover>img{transform:translateY(-2px)}
.mc-connector:focus-visible{outline:2px solid #717171;outline-offset:3px;background:#fff}
.mc-connector-paths{display:block;width:100%;height:88px;overflow:visible;fill:none;stroke-linecap:round}
.mp-tools .mc-connected .mc-connector-paths{width:100%;max-width:none}
.mc-connector-line{stroke:#00000013;stroke-width:1.15;vector-effect:non-scaling-stroke}
.mc-connector-pulse{stroke:url(#mc-source-gradient);stroke-width:1.55;stroke-dasharray:.18 .82;stroke-dashoffset:1;opacity:0;vector-effect:non-scaling-stroke}
.mc-stage .mc-window{position:relative}.mc-stage .mc-example-caption{display:block;margin-top:7px;font-size:9px;color:#858585}.mc-connector-note{font-size:10px;display:block;min-height:15px}
.mi-today .mi-channel-row{border:0}.mi-today .mc-stage{padding-top:54px}
@media(max-width:1150px){.mc-connector-dock{gap:5px}.mc-connector>small{font-size:7px}.mc-connector{padding-inline:3px}}
@media(max-width:600px){.mi-today .mc-stage{padding-top:12px}.mc-connected{max-width:440px}.mc-connector-dock{gap:3px}.mc-connector{padding:10px 2px;border-radius:14px;gap:8px;min-height:76px}.mc-connector>img{width:27px;height:27px}.mc-connector>span{font-size:9px}.mc-connector>small{display:none}.mc-connector-paths{height:67px}.mi-today .mc-connected-label{font-size:9px;margin-bottom:12px}.mc-connector-note{font-size:10px;max-width:270px;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.mc-connector,.mc-connector>img{transition:none}.mc-connector:hover>img{transform:none}.mc-connector-pulse{display:none}}

/* Persistent flow has one explicit pause control, independent of source hover. */
.mc-flow-toggle{position:absolute;right:0;top:-8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;padding:7px;color:#777;background:transparent;cursor:pointer;transition:background .25s,color .25s}
.mc-flow-toggle[hidden]{display:none}.mc-flow-toggle:hover{background:#ffffffc7;color:#171717}.mc-flow-toggle:focus-visible{outline:2px solid #777;outline-offset:2px}
.mc-flow-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mc-connected[data-mc-selected="0"] [data-mc-pulse="0"],.mc-connected[data-mc-selected="1"] [data-mc-pulse="1"],.mc-connected[data-mc-selected="2"] [data-mc-pulse="2"],.mc-connected[data-mc-selected="3"] [data-mc-pulse="3"],.mc-connected[data-mc-selected="4"] [data-mc-pulse="4"]{stroke-width:2.3}
@media(prefers-reduced-motion:reduce){.mc-flow-toggle{transition:none}}