@import url('/assets/robotics/rebuild/article.css');

/* The board is its own rounded panel, so the figure and the site's light diagram paper stay out of it. */
.comparison-short .short-board:has(.ato-board) { background: transparent; }
.comparison-short .short-board .ato-board { max-width: 480px; margin: 0 auto; border-radius: 16px; background: transparent !important; }
/* The chalk font draws the "fi" ligature wrong in WebKit ("filled" reads "flled"). */
.ato-board text { fill: #ece8dc; font-size: 13.5px; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ato-board .ato-h { font-size: 17px; font-weight: 700; }
.ato-board .ato-s { font-size: 12px; fill: #c8c3b4; }
.ato-board .ato-bx { font-size: 14px; }
.ato-board .ato-b { fill: #8ab8ff; }
.ato-board .ato-g { fill: #9be39b; }
.ato-board .ato-p { fill: #ff9fd0; }
.ato-board .ato-r { fill: #ff7a7a; }
.ato-board .ato-y { fill: #f5d76e; }
/* A straight line has a zero-width box, so the chalk filter (sized from that box) would erase it. */
.ato-board :is(.ato-fr, .ato-box) { fill: none; filter: url(#bb-chalk); }
.ato-board .ato-ln { fill: none; }
/* The stacked explorer cards are filled with the board color, so each card hides the outline of the card behind it. */
.ato-board .ato-stack { fill: #1e2622; filter: url(#bb-chalk); }
.ato-board .ato-fr { stroke: #ece8dc; stroke-opacity: .4; stroke-width: 1.5; }
.ato-board .ato-box { stroke-width: 1.5; }
.ato-board .ato-ln { stroke: #ece8dc; stroke-width: 1.6; }