.network-showcase{background:#edf1ef}.showcase-window{background:#fff;border:1px solid #c8d2cf;border-radius:12px;box-shadow:0 24px 50px #193f3420;overflow:hidden}.showcase-top{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid #dbe2df;color:#202c29}.showcase-top strong{font-size:1.2rem}.showcase-top strong span{font-weight:400;color:#596860;margin-left:10px}.showcase-top>span{font-size:.65rem;letter-spacing:.1em}.showcase-app{display:grid;grid-template-columns:220px minmax(0,1fr)}.showcase-app>aside{background:#202c29;color:#dce6e1;padding:24px 14px;display:flex;flex-direction:column;gap:7px}.showcase-app>aside>span{display:flex;align-items:center;gap:12px;padding:12px;font-size:.78rem;border-radius:5px}.showcase-app>aside>small{font-size:.7rem;color:#a8b9b0;margin:24px 12px 0}.showcase-app .broker-icon{width:18px;height:18px;flex-basis:18px}.showcase-selected{background:#e8f4ee;color:#14694f}.showcase-work{background:#f6f8f7;padding:26px}.showcase-title{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#26342e;margin-bottom:24px}.showcase-title h3{font-size:1.4rem;margin:8px 0 0}.showcase-title small{font-size:.65rem;letter-spacing:.1em;color:#526b60}.showcase-label{padding:6px 10px;border:1px solid #c5d9cf;border-radius:20px;font-size:.65rem;white-space:nowrap}.showcase-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.showcase-metrics>div{background:#fff;border:1px solid #dce4df;border-radius:7px;padding:18px}.showcase-metrics span,.showcase-metrics small{display:block;font-size:.75rem;color:#526259}.showcase-metrics strong{display:block;font-size:2rem;font-weight:600;color:#14694f;margin:8px 0}.showcase-metrics small{font-size:.65rem}.showcase-attention{display:flex;align-items:center;gap:16px;padding:18px;margin:20px 0;background:#e6f2ec;border:1px solid #bddece;border-radius:7px;color:#205c46}.showcase-attention strong,.showcase-attention span{display:block;font-size:.8rem}.showcase-attention b{margin-left:auto;font-size:.75rem}.showcase-table{background:white;border:1px solid #dce4df;border-radius:7px;padding:20px}.showcase-table>div{display:flex;justify-content:space-between;font-size:.85rem}.showcase-table small{font-size:.65rem;color:#607269}.showcase-table table{margin:16px 0 0;font-size:.75rem;min-width:0}.showcase-table th{background:#f4f7f5;color:#55685d;font-size:.65rem;padding:10px}.showcase-table td{padding:13px 10px;color:#293d31;border-color:#e1e7e3}.showcase-table td>span{display:inline-block;background:#edf4ef;color:#256649;border-radius:4px;padding:5px 7px;font-size:.65rem}.showcase-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.showcase-bottom>span{font-size:.75rem;color:#354d40}.showcase-bottom small{display:block;font-size:.65rem;color:#627468;padding-left:23px}.network-showcase>.section-heading .button{margin-top:4px}
/* Static product preview reflects the current multi-colour demo application. */
.network-showcase{background:var(--pale)}.showcase-window{border-color:#dcddeb;box-shadow:0 24px 50px #30294a18}.showcase-top{color:#292837;border-color:#e0e2ed}.showcase-app>aside{background:#252433;color:#ece9f8}.showcase-app>aside>small{color:#c2bfd3}.showcase-selected{background:#eeeaff;color:#4b3c96}.showcase-work{background:#f5f6fb}.showcase-title{color:#262738}.showcase-title small,.showcase-top strong span{color:#60647a}.showcase-label{border-color:#ddd7ef}.showcase-metrics>div{border-color:#e0e2ee;border-top:3px solid #5d63d7}.showcase-metrics strong{color:#454ab5}.showcase-metrics>div:nth-child(2){border-top-color:#d28235}.showcase-metrics>div:nth-child(2) strong{color:#a05b18}.showcase-metrics>div:nth-child(3){border-top-color:#2d99ad}.showcase-metrics>div:nth-child(3) strong{color:#197283}.showcase-metrics span,.showcase-metrics small{color:#60647a}.showcase-attention{background:#fff5e8;border-color:#edd8bc;color:#85591f}.showcase-table{border-color:#e0e2ed}.showcase-table th{background:#f3f3f9;color:#606078}.showcase-table td{color:#313348;border-color:#e4e4ee}.showcase-table small{color:#626579}.showcase-table td>span{background:#f2eafa;color:#784993}.showcase-table tr:nth-child(2) td>span{background:#fff1df;color:#87561b}.showcase-table tr:nth-child(3) td>span{background:#edf0ff;color:#4b55a3}.showcase-bottom>span{color:#474b8a}.showcase-bottom small{color:#626579}
@media(max-width:1000px){.showcase-app{grid-template-columns:170px minmax(0,1fr)}.showcase-app>aside>span{font-size:.7rem;padding:10px 5px}.showcase-work{padding:20px}.showcase-title{display:block}.showcase-label{display:inline-block;margin-top:12px}}
@media(max-width:650px){.showcase-app{grid-template-columns:1fr}.showcase-app>aside{display:none}.showcase-top{padding:16px;gap:12px;align-items:flex-start}.showcase-top>span{font-size:.55rem;max-width:90px}.showcase-top strong span{display:block;font-size:.8rem;margin:4px 0 0}.showcase-work{padding:14px}.showcase-metrics{gap:7px}.showcase-metrics>div{padding:10px}.showcase-metrics span{font-size:.65rem}.showcase-metrics small{display:none}.showcase-metrics strong{font-size:1.6rem}.showcase-attention b{display:none}.showcase-table{padding:12px;overflow-x:auto}.showcase-table table{min-width:430px}.showcase-bottom{grid-template-columns:1fr;gap:14px}}