/* The company brain — one diagram for the AI section. Loaded after turquoise.css. */
.brain { background: #0a1418; border: 1px solid #d7e3e6; color: #e3f6fa; overflow: hidden; }
.brain__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; background: #0b8fa8; }
.brain__ask-k { font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.brain__q { flex: 1 1 320px; min-height: 1.3em; margin: 0; font: 500 17px/1.3 "Newsreader", Georgia, serif; color: #fff; }
.brain__q::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: #fff; animation: br-caret 1s steps(1) infinite; }
@keyframes br-caret { 50% { opacity: 0; } }
.brain__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brain__chips button { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: #fff; font: 600 11.5px "Source Sans 3", sans-serif; cursor: pointer; }
.brain__chips button[aria-pressed="true"] { background: #fff; color: #0b8fa8; border-color: #fff; }
.brain__scroll { overflow-x: auto; scrollbar-width: thin; }
.brain__svg { display: block; width: 100%; min-width: 860px; height: auto; font-family: "Source Sans 3", system-ui, sans-serif; }
.brain__answer { display: flex; gap: 14px; align-items: baseline; padding: 11px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: #0d1b20; min-height: 44px; }
.brain__answer > span { flex: none; font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #7ae9ff; }
.brain__answer p { margin: 0; font-size: 14px; line-height: 1.5; color: #e3f6fa; opacity: 0; transition: opacity 0.5s ease; }
.brain__answer p.is-in { opacity: 1; }
.brain__answer sup { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin: 0 1px; font: 600 9.5px/1 "IBM Plex Mono", monospace; background: #7ae9ff; color: #0a1418; vertical-align: 2px; }

/* svg parts */
.br-grid line { stroke: rgba(122, 233, 255, 0.045); }
.br-col__n { font: 600 11px "IBM Plex Mono", monospace; fill: #7ae9ff; }
.br-col__t { font: 600 14px "Source Sans 3", sans-serif; fill: #fff; letter-spacing: 0.01em; }
.br-src rect { fill: rgba(255, 255, 255, 0.04); stroke: rgba(122, 233, 255, 0.22); transition: fill 0.3s, stroke 0.3s; }
.br-src text { font-size: 13px; fill: rgba(227, 246, 250, 0.8); }
.br-ico { fill: none; stroke: #7ae9ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.br-src.is-on rect { fill: rgba(122, 233, 255, 0.14); stroke: #7ae9ff; }
.br-src.is-on text { fill: #fff; }
.br-wire { fill: none; stroke: rgba(122, 233, 255, 0.16); stroke-width: 1.2; }
.br-pk { fill: rgba(122, 233, 255, 0.55); }
.br-pk.is-on { fill: #fff; r: 2.8; }
.br-fold { fill: none; stroke: rgba(122, 233, 255, 0.09); stroke-width: 1.2; }
.br-lobe__k { font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; fill: rgba(227, 246, 250, 0.6); }
.br-hit circle { fill: #fff; stroke: #0b8fa8; stroke-width: 1.5; }
.br-hit text { font: 700 9px "IBM Plex Mono", monospace; fill: #0a1418; }
.br-hit__ray { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; stroke-dasharray: 2 3; }
.br-hit { animation: br-pop 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes br-pop { from { opacity: 0; transform-box: fill-box; } }
.br-node text { font-size: 10.5px; fill: rgba(227, 246, 250, 0.75); paint-order: stroke; stroke: #102931; stroke-width: 3px; transition: fill 0.3s; }
.br-node.is-dim { opacity: 0.35; }
.br-node.is-on text { fill: #fff; font-weight: 600; }
.br-rack > rect { stroke: rgba(122, 233, 255, 0.28); }
.br-rack__k { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.12em; fill: #7ae9ff; }
.br-rack__s { font-size: 11px; fill: rgba(227, 246, 250, 0.55); }
.br-model rect:first-child { fill: rgba(255, 255, 255, 0.035); stroke: rgba(122, 233, 255, 0.2); transition: all 0.3s; }
.br-model__n { font: 600 13px "Source Sans 3", sans-serif; fill: #fff; }
.br-model__r { font: 500 10px "IBM Plex Mono", monospace; fill: rgba(227, 246, 250, 0.55); }
.br-led { fill: rgba(122, 233, 255, 0.14); }
.br-model.is-on rect:first-child { fill: rgba(122, 233, 255, 0.14); stroke: #7ae9ff; }
.br-model.is-on .br-led { fill: #7ae9ff; animation: br-led 0.5s ease-in-out infinite alternate; }
.br-model.is-on .br-led:nth-of-type(3) { animation-delay: 0.12s; } .br-model.is-on .br-led:nth-of-type(4) { animation-delay: 0.24s; } .br-model.is-on .br-led:nth-of-type(5) { animation-delay: 0.36s; }
@keyframes br-led { from { opacity: 0.3; } to { opacity: 1; } }
.br-bus { fill: none; stroke: rgba(122, 233, 255, 0.12); stroke-width: 1.2; transition: stroke 0.3s; }
.br-bus.is-on { stroke: rgba(122, 233, 255, 0.75); stroke-width: 1.6; }
.br-pulse { fill: #fff; transition: opacity 0.2s; }
.br-pulse-halo { fill: #7ae9ff; opacity: 0.8; }
.br-card > rect { fill: #f4fbfc; stroke: rgba(255, 255, 255, 0.5); opacity: 0.12; transition: opacity 0.4s; }
.br-card.is-in > rect { opacity: 1; }
.br-card__h { font: 600 13px "Source Sans 3", sans-serif; fill: rgba(227, 246, 250, 0.4); }
.br-card__via { font-size: 10.5px; fill: rgba(227, 246, 250, 0.3); }
.br-card.is-in .br-card__h { fill: #2f3a3d; } .br-card.is-in .br-card__via { fill: #7b8a8c; }
.br-msg { padding: 9px 11px; background: #e3f4f7; border-radius: 2px 10px 10px 10px; font: 400 12.5px/1.45 "Source Sans 3", sans-serif; color: #2f3a3d; opacity: 0; transition: opacity 0.4s; }
.br-card.is-in .br-msg { opacity: 1; }
.br-msg b { color: #0a6f83; }
.br-btn rect { fill: rgba(255, 255, 255, 0.06); }
.br-btn text { font: 600 13px "Source Sans 3", sans-serif; fill: rgba(227, 246, 250, 0.35); }
.br-card.is-in .br-btn rect { fill: #e7eef0; } .br-card.is-in .br-btn text { fill: #2f3a3d; }
.br-card.is-in .br-btn--a rect { fill: #0b8fa8; } .br-card.is-in .br-btn--a text { fill: #fff; }
.br-card.is-done .br-btn--a rect { fill: #12805c; }
.br-tap { fill: rgba(255, 255, 255, 0.5); opacity: 0; }
.br-card.is-done .br-tap { animation: br-tap 0.6s ease-out; }
@keyframes br-tap { 0% { opacity: 0.9; r: 6; } 100% { opacity: 0; r: 26; } }
.br-row rect { fill: rgba(255, 255, 255, 0.035); stroke: rgba(122, 233, 255, 0.14); transition: all 0.3s; }
.br-row text { font-size: 12.5px; fill: #fff; }
.br-row__dot { fill: none; stroke: rgba(122, 233, 255, 0.3); stroke-width: 1.4; transition: all 0.3s; }
.br-row__tick { fill: none; stroke: #0a1418; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.br-row.is-on rect { fill: rgba(52, 211, 153, 0.1); stroke: rgba(52, 211, 153, 0.55); }
.br-row.is-on .br-row__dot { fill: #34d399; stroke: #34d399; }
.br-row.is-on .br-row__tick { opacity: 1; }
.br-stat__v { font: 600 20px "Source Sans 3", sans-serif; fill: #fff; }
.br-stat__k { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; fill: rgba(227, 246, 250, 0.5); }
.brain + .aj-own2 { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .brain__q::after, .br-model.is-on .br-led { animation: none; } }

/* ---------------------------------------------------------------- artistic memory: lobes, 3D cloud, curved graph */
.br-lobe { stroke: rgba(122, 233, 255, 0.6); stroke-width: 1.3; }
.br-lobe__halo { fill: none; stroke: rgba(31, 179, 204, 0.55); stroke-width: 10; opacity: 0.55; }
.br-dot { transition: none; }
.br-link { stroke: #7ae9ff; stroke-width: 0.8; }
.br-cl { font: 600 10.5px "Source Sans 3", sans-serif; fill: #e3f6fa; paint-order: stroke; stroke: rgba(11, 28, 34, 0.9); stroke-width: 3px; letter-spacing: 0.02em; transition: opacity 0.4s; }
.br-query circle:last-child { fill: #fff; }
.br-query__halo { fill: rgba(255, 255, 255, 0.18); stroke: #fff; stroke-width: 1; animation: br-ring 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes br-ring { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.br-hit { animation: br-fade 0.4s ease both; }
@keyframes br-fade { from { opacity: 0; } }
.br-hit circle { fill: #fff; stroke: #0b8fa8; stroke-width: 1.5; }
.br-hit__ray { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 2 3; }
.br-syn { fill: rgba(122, 233, 255, 0.35); }
.br-syn__l { stroke: rgba(122, 233, 255, 0.08); stroke-width: 0.8; }
.br-spark { fill: #c3f4ff; filter: drop-shadow(0 0 3px #7ae9ff); }
.br-edge__base { fill: none; stroke: rgba(122, 233, 255, 0.2); stroke-width: 1.2; transition: stroke 0.3s; }
.br-edge__glow { fill: none; stroke: #7ae9ff; stroke-width: 6; opacity: 0; transition: opacity 0.4s; }
.br-edge__flow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 3 9; opacity: 0; }
.br-edge__rel { font: 500 9px "IBM Plex Mono", monospace; fill: #7ae9ff; opacity: 0; transition: opacity 0.4s; paint-order: stroke; stroke: #0f2930; stroke-width: 3px; }
.br-edge.is-on .br-edge__base { stroke: #7ae9ff; stroke-width: 2; }
.br-edge.is-on .br-edge__glow { opacity: 0.45; }
.br-edge.is-on .br-edge__flow { opacity: 0.9; animation: br-flow 0.9s linear infinite; }
.br-edge.is-on .br-edge__rel { opacity: 1; }
@keyframes br-flow { to { stroke-dashoffset: -24; } }
.br-node__halo { fill: rgba(122, 233, 255, 0.08); stroke: none; transition: all 0.3s; }
.br-node__core { fill: #0f2a32; stroke: rgba(122, 233, 255, 0.65); stroke-width: 1.4; transition: all 0.3s; }
.br-node.is-on .br-node__core { fill: #7ae9ff; stroke: #fff; }
.br-node.is-on .br-node__halo { fill: rgba(122, 233, 255, 0.28); animation: br-breathe 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes br-breathe { 50% { transform: scale(1.35); opacity: 0.6; } }
.br-node.is-dim { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) { .br-edge.is-on .br-edge__flow, .br-node.is-on .br-node__halo, .br-query__halo { animation: none; } }

/* ---------------------------------------------------------------- depth & polish */
.brain { background: radial-gradient(120% 90% at 40% 45%, #0e2128 0%, #0a1418 55%, #070e11 100%); }
.br-grid { display: none; }
.br-stars circle { fill: #bfefff; animation: br-twinkle 4s ease-in-out infinite; }
@keyframes br-twinkle { 50% { opacity: 0.05; } }
.br-col__n { font: 600 10.5px "IBM Plex Mono", monospace; fill: #7ae9ff; letter-spacing: 0.08em; }
.br-col__t { font: 600 15px "Source Sans 3", sans-serif; fill: #fff; letter-spacing: 0.005em; }
.br-col__s { font: 500 9.5px "IBM Plex Mono", monospace; fill: rgba(227, 246, 250, 0.42); letter-spacing: 0.06em; text-transform: uppercase; }
.br-lobe { stroke: rgba(150, 236, 255, 0.55); stroke-width: 1; }
.br-lobe__halo { stroke: rgba(31, 179, 204, 0.6); stroke-width: 14; opacity: 0.5; }
.br-fold2 { fill: none; stroke: #9fe9f7; stroke-width: 0.8; }
.br-fissure { stroke: #7ae9ff; stroke-width: 6; opacity: 0.35; }
.br-fissure__core { stroke: rgba(195, 244, 255, 0.55); stroke-width: 0.8; stroke-dasharray: 1 5; }
.br-lobe__k { font: 600 9.5px "IBM Plex Mono", monospace; letter-spacing: 0.16em; fill: rgba(227, 246, 250, 0.5); }
.br-wire { stroke: rgba(122, 233, 255, 0.1); stroke-width: 1; }
.br-wire__flow { fill: none; stroke: rgba(122, 233, 255, 0.55); stroke-width: 1.2; stroke-dasharray: 14 120; animation: br-wireflow 3.2s linear infinite; }
@keyframes br-wireflow { to { stroke-dashoffset: -134; } }
.br-pk { fill: rgba(195, 244, 255, 0.5); }
.br-pk.is-on { fill: #fff; filter: drop-shadow(0 0 3px #7ae9ff); }
.br-src rect { fill: rgba(255, 255, 255, 0.025); stroke: rgba(122, 233, 255, 0.16); }
.br-src.is-on rect { fill: rgba(122, 233, 255, 0.1); stroke: rgba(122, 233, 255, 0.85); filter: drop-shadow(0 0 6px rgba(122, 233, 255, 0.35)); }
.br-dots--far circle { opacity: 0.5; }
.br-cl { font-size: 10px; letter-spacing: 0.03em; }
.br-node text { font-size: 10px; }
.br-rack > rect { stroke: rgba(122, 233, 255, 0.22); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.br-model rect:first-child { fill: rgba(255, 255, 255, 0.025); stroke: rgba(122, 233, 255, 0.14); }
.br-model.is-on rect:first-child { fill: rgba(122, 233, 255, 0.1); stroke: rgba(122, 233, 255, 0.85); filter: drop-shadow(0 0 8px rgba(122, 233, 255, 0.3)); }
.br-card > rect { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45)); }
.br-row rect { fill: rgba(255, 255, 255, 0.02); stroke: rgba(122, 233, 255, 0.1); }
.br-stat__v { font: 300 24px "Source Sans 3", sans-serif; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .br-stars circle, .br-wire__flow { animation: none; } }

/* ==========================================================================
   Light theme
   ========================================================================== */
.brain { background: radial-gradient(120% 90% at 40% 45%, #ffffff 0%, #f6fafb 60%, #eef4f6 100%) !important; color: #2f3a3d; }
.brain__answer { background: #ffffff; border-top: 1px solid #e3eaec; }
.brain__answer > span { color: #0b8fa8; } .brain__answer p { color: #2f3a3d; }
.brain__answer sup { background: #0b8fa8; color: #fff; }
.br-stars { display: none; }
.br-col__n { fill: #0b8fa8; } .br-col__t { fill: #1f2a2e; } .br-col__s { fill: #8a979b; }
.br-src rect { fill: #ffffff; stroke: #d7e3e6; } .br-src text { fill: #55605f; }
.br-ico { stroke: #0b8fa8; }
.br-src.is-on rect { fill: #e3f4f7; stroke: #0b8fa8; filter: none; } .br-src.is-on text { fill: #1f2a2e; }
.br-wire { stroke: rgba(11, 143, 168, 0.18); }
.br-wire__flow { stroke: rgba(11, 143, 168, 0.55); }
.br-pk { fill: rgba(11, 143, 168, 0.45); } .br-pk.is-on { fill: #0b8fa8; filter: none; }
.br-lobe { stroke: rgba(11, 143, 168, 0.5); }
.br-lobe__halo { stroke: rgba(11, 143, 168, 0.25); opacity: 0.6; }
.br-fold2 { stroke: #0b8fa8; }
.br-fissure { stroke: #0b8fa8; opacity: 0.18; } .br-fissure__core { stroke: rgba(11, 143, 168, 0.5); }
.br-lobe__k { fill: #6b7a7f; }
.br-link { stroke: #0b8fa8; }
.br-cl { fill: #1f2a2e; stroke: rgba(255, 255, 255, 0.95); }
.br-query circle:last-child { fill: #0a6f83; }
.br-query__halo { fill: rgba(11, 143, 168, 0.15); stroke: #0b8fa8; }
.br-hit circle { fill: #ffffff; stroke: #0a6f83; } .br-hit text { fill: #0a6f83; }
.br-hit__ray { stroke: rgba(10, 111, 131, 0.5); }
.br-syn { fill: rgba(11, 143, 168, 0.3); } .br-syn__l { stroke: rgba(11, 143, 168, 0.1); }
.br-spark { fill: #0b8fa8; filter: none; }
.br-edge__base { stroke: rgba(11, 143, 168, 0.22); }
.br-edge__glow { stroke: #1fb3cc; }
.br-edge__flow { stroke: #0a6f83; }
.br-edge__rel { fill: #0a6f83; stroke: #f4f9fa; }
.br-edge.is-on .br-edge__base { stroke: #0b8fa8; } .br-edge.is-on .br-edge__glow { opacity: 0.25; }
.br-node__halo { fill: rgba(11, 143, 168, 0.08); }
.br-node__core { fill: #ffffff; stroke: rgba(11, 143, 168, 0.6); }
.br-node text { fill: #55605f; stroke: #f4f9fa; }
.br-node.is-on .br-node__core { fill: #0b8fa8; stroke: #ffffff; }
.br-node.is-on .br-node__halo { fill: rgba(11, 143, 168, 0.22); }
.br-node.is-on text { fill: #1f2a2e; }
.br-rack > rect { stroke: #d7e3e6; filter: drop-shadow(0 14px 24px rgba(15, 40, 48, 0.12)); }
.br-rack__k { fill: #0b8fa8; } .br-rack__s { fill: #8a979b; }
.br-model rect:first-child { fill: #ffffff; stroke: #e0e8ea; }
.br-model__n { fill: #1f2a2e; } .br-model__r { fill: #8a979b; }
.br-led { fill: rgba(11, 143, 168, 0.15); }
.br-model.is-on rect:first-child { fill: #eaf6f8; stroke: #0b8fa8; filter: none; }
.br-model.is-on .br-led { fill: #0b8fa8; }
.br-bus { stroke: rgba(11, 143, 168, 0.15); } .br-bus.is-on { stroke: rgba(11, 143, 168, 0.7); }
.br-pulse { fill: #0a6f83; } .br-pulse-halo { fill: #1fb3cc; opacity: 0.5; }
.br-card > rect { fill: #ffffff; stroke: #d7e3e6; opacity: 0.5; filter: drop-shadow(0 14px 24px rgba(15, 40, 48, 0.14)); }
.br-card__h { fill: #b4c0c3; } .br-card__via { fill: #c6d0d3; }
.br-btn rect { fill: #f1f5f6; } .br-btn text { fill: #b4c0c3; }
.br-tap { fill: rgba(11, 143, 168, 0.4); }
.br-row rect { fill: #ffffff; stroke: #e0e8ea; }
.br-row text { fill: #1f2a2e; }
.br-row__dot { stroke: #cfdcdf; } .br-row__tick { stroke: #ffffff; }
.br-row.is-on rect { fill: #e6f5ef; stroke: rgba(18, 128, 92, 0.45); }
.br-row.is-on .br-row__dot { fill: #12805c; stroke: #12805c; }
.br-stat__v { fill: #1f2a2e; } .br-stat__k { fill: #8a979b; }
/* phone stage indicator (hidden when the whole diagram fits) */
.brain__steps { display: none; }
@media (max-width: 900px) {
  .brain__scroll { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .brain__scroll::-webkit-scrollbar { display: none; }
  .brain__svg { min-width: 900px; }
  .brain__steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.08); background: #0a1418; }
  .brain__steps button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 10px 12px; border: 0; border-top: 2px solid transparent; background: transparent; color: rgba(227, 246, 250, 0.55); font: 600 12px "Source Sans 3", system-ui, sans-serif; text-align: left; cursor: pointer; transition: color 0.25s, border-color 0.25s, background-color 0.25s; }
  .brain__steps button b { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.1em; color: rgba(122, 233, 255, 0.55); }
  .brain__steps button.is-on { color: #fff; border-top-color: #7ae9ff; background: rgba(122, 233, 255, 0.07); }
  .brain__steps button.is-on b { color: #7ae9ff; }
  .brain__answer { min-height: 92px; }
}

/* ---------------------------------------------------------------- depth, kept quiet: one answer line, six evidence chips, one trace line */
.brain__answer { flex-wrap: wrap; row-gap: 4px; padding: 12px 16px 10px; }
.brain__meta { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 0 54px; font: 500 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #8a979b; opacity: 1; }
.brain__meta b { color: #0b8fa8; font-weight: 600; }
.brain__deep { display: grid; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #e3eaec; background: #fbfdfd; }
.brain__ev { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.brain__ev li { display: grid; grid-template-columns: 16px 1fr; gap: 7px; align-items: start; padding: 7px 9px; background: #fff; border: 1px solid #e3eaec; border-radius: 6px; font: 400 12px/1.3 "Source Sans 3", sans-serif; color: #55605f; min-width: 0; opacity: 0.3; transform: translateY(3px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; }
.brain__ev li.is-on { opacity: 1; transform: none; border-color: #bfe3ea; }
.brain__ev li b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #0b8fa8; color: #fff; font: 700 9px "IBM Plex Mono", monospace; }
.brain__ev li span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brain__ev li em { display: block; font: 600 9px "IBM Plex Mono", monospace; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #0a6f83; }
.brain__tr { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0.04em; color: #b4c0c3; }
.brain__tr li { position: relative; padding: 0 10px 0 0; margin-right: 10px; transition: color 0.35s; white-space: nowrap; }
.brain__tr li::after { content: "→"; position: absolute; right: -6px; color: #cfdcdf; }
.brain__tr li:last-child::after { content: none; }
.brain__tr li.is-on { color: #1f2a2e; }
.brain__tr li.is-on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #0b8fa8; vertical-align: 1px; }
.brain__after { margin: 0; font: 500 12px/1.4 "Source Sans 3", sans-serif; color: #12805c; opacity: 0; transition: opacity 0.5s ease; min-height: 17px; }
.brain__after.is-in { opacity: 1; }
.brain__after.is-in::before { content: "Then · "; font: 600 9.5px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 900px) { .brain__ev { grid-template-columns: repeat(3, minmax(0, 1fr)); } .brain__meta { margin-left: 0; } .brain__tr { font-size: 10.5px; } }
@media (max-width: 560px) { .brain__ev { grid-template-columns: 1fr 1fr; } }
/* ---------------------------------------------------------------- colour: ten sources, six channels, model hues */
.br-src rect { fill: #ffffff; stroke: #e0e8ea; }
.br-src text { font-size: 12.5px; }
.br-src__dot { fill: color-mix(in srgb, var(--c, #0b8fa8) 14%, #fff); transition: fill 0.3s; }
.br-src .br-ico { stroke: var(--c, #0b8fa8); }
.br-src.is-on rect { fill: color-mix(in srgb, var(--c, #0b8fa8) 8%, #fff); stroke: var(--c, #0b8fa8); }
.br-src.is-on .br-src__dot { fill: var(--c, #0b8fa8); }
.br-src.is-on .br-ico { stroke: #fff; }
.br-wire__flow { opacity: 0.55; }
.br-pk.is-on { filter: none; }
.br-model.is-on rect:first-child { fill: color-mix(in srgb, var(--c, #0b8fa8) 9%, #fff); stroke: var(--c, #0b8fa8); }
.br-model.is-on .br-led { fill: var(--c, #0b8fa8); }
.br-led { fill: color-mix(in srgb, var(--c, #0b8fa8) 18%, #fff); }
.br-chans__k { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.12em; fill: #8a979b; }
.br-chan circle { fill: #ffffff; stroke: #e0e8ea; stroke-width: 1.2; transition: fill 0.35s, stroke 0.35s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform-box: fill-box; transform-origin: center; }
.br-chan .br-ico { stroke: #9aa7ab; transition: stroke 0.35s; }
.br-chan text { font: 500 9.5px "Source Sans 3", sans-serif; fill: #8a979b; transition: fill 0.35s; }
.br-chan.is-on circle { fill: var(--c); stroke: var(--c); transform: scale(1.1); }
.br-chan.is-on .br-ico { stroke: #fff; }
.br-chan.is-on text { fill: #1f2a2e; font-weight: 600; }
.br-row rect { fill: #ffffff; }
.br-row text { font-size: 12px; }
.br-card > rect { stroke: #d7e3e6; }