*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.6
}
button{
  font:inherit;
  color:inherit
}
button:focus-visible{
  outline:3px solid var(--clr-link);
  outline-offset:3px
}
.scenario-picker{
  max-width:1398px;
  margin:auto;
  padding:var(--sp-4) var(--sp-4) var(--sp-8)
}
#demo-header{
  display:none;
  max-width:1398px;
  margin:auto;
  padding:var(--sp-4) var(--sp-4) 0
}
.demo-standalone #demo-header{display:block}
#demo-title{
  font-size:var(--t-h1);
  font-weight:650;
  line-height:1.4;
  margin:0
}
.section-title{
  font-size:var(--t-h2);
  font-weight:600;
  line-height:1.4;
  margin:0 0 var(--sp-3)
}
#clients-title{
  width:100%;
  max-width:1398px;
  margin:0 auto var(--sp-3);
  padding:0 var(--sp-4)
}
.selector{
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--r-lg);
  padding:var(--sp-4)
}
 .selector h3{
  font-size:var(--t-h2);
  line-height:1.4;
  margin:0;
  display:flex;
  align-items:center;
  gap:var(--sp-2)
}
.usb-section{display:block}
.cards{
  display:grid;
  grid-auto-columns:minmax(0,1fr);
  grid-auto-flow:column;
  gap:var(--sp-2);
  min-width:0
}
.scenario{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  width:100%;
  min-height:60px;
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--r-card);
  padding:var(--sp-2) var(--sp-3);
  text-align:left;
  cursor:pointer
}
.scenario:hover{
  background:var(--surface-hover);
  border-color:var(--border-strong)
}
.scenario[aria-pressed="true"]{
  border-color:var(--ok);
  background:var(--sel-bg-ok);
  box-shadow:inset 0 0 0 1px var(--ok)
}
.device-pair{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex:0 0 auto
}
.brand{
  width:28px;
  height:28px;
  object-fit:contain
}
.vci-image{
  width:44px;
  height:40px;
  object-fit:contain;
  border-radius:var(--r-sm);
  background:var(--surface-card)
}
.pair-divider{
  height:24px;
  width:1px;
  background:var(--border-subtle)
}
.card-copy{
  min-width:0;
  flex:1 1 auto;
  padding-right:var(--sp-3)
}
.car{
  display:block;
  font-size:var(--t-body);
  font-weight:650;
  line-height:1.5;
  overflow-wrap:anywhere
}
.brand-note{font-size:var(--t-body-sm);font-weight:400;color:var(--text-secondary)}
.vci{
  display:block;
  color:var(--text-secondary);
  font-size:var(--t-body-sm);
  line-height:1.5;
  overflow-wrap:anywhere
}
.tick{
  position:absolute;
  right:var(--sp-2);
  top:var(--sp-2);
  width:20px;
  height:20px;
  color:var(--ok);
  visibility:hidden
}
.tick .chk-sel{display:block;width:20px;height:20px;pointer-events:none}
.scenario[aria-pressed="true"] .tick{
  visibility:visible
}
.driver-note{
  margin:0 0 var(--sp-3);
  color:var(--text-tertiary);
  font-size:var(--t-body-sm);
  line-height:1.7
}
.network{
  margin-top:var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px solid var(--border-subtle)
}
.usb-section h3,.network h3{
  margin-bottom:var(--sp-1)
}
.bridge-note{
  margin:0 0 var(--sp-3);
  color:var(--text-secondary);
  font-size:var(--t-body-sm);
  line-height:1.7
}
.groups{
  list-style:none;
  margin:0;
  padding:0;
  padding-inline-start:var(--sp-4)
}
.group{
  position:relative;
  display:grid;
  grid-template-columns:244px minmax(0,1fr);
  column-gap:var(--sp-4);
  align-items:center;
  margin-top:var(--sp-2)
}
.group:first-child{
  margin-top:0
}
.group::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--text-disabled)
}
.group-label{
  font-size:var(--t-body);
  font-weight:650;
  margin:0;
  padding-left:var(--sp-3);
  line-height:1.6
}
.group-label h4{font:inherit;margin:0}
.applicability{
  display:block;
  font-size:var(--t-body-sm);
  font-weight:400;
  color:var(--text-tertiary);
  line-height:1.6;
  margin:var(--sp-1) 0 0
}[data-group="external"] .scenario{
  max-width:none
}[data-group="external"] .card-copy{
  display:block
}
.diagram-region{margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--border-default)}
.diagram{
  position:relative;
  margin:0;
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--r-lg);
  padding:var(--sp-2) var(--sp-4)
}
.diagram-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-bottom:var(--sp-2)
}
.diagram-head .section-title{margin:0}
.route-chip{
  display:grid;
  font-size:var(--t-body-sm);
  color:var(--text-secondary)
}
.route-chip > span{
  grid-area:1 / 1;
  justify-self:start;
  padding:0 var(--sp-2);
  border-radius:var(--r-sm);
  background:var(--surface-raised)
}
.route-chip > [aria-hidden="true"]{visibility:hidden}
.diagram-paths{display:grid}
.connection-guidance{display:flex;align-items:baseline;gap:var(--sp-2);margin-top:var(--sp-2);color:var(--text-secondary);font-size:var(--t-body-sm);line-height:1.6}
.guidance-icon{flex:0 0 auto}
.guidance-messages{display:grid;min-width:0;flex:1 1 auto}
.guidance-messages p{grid-area:1 / 1;margin:0;overflow-wrap:anywhere}
.guidance-messages [aria-hidden="true"]{visibility:hidden}
.path{
  grid-area:1 / 1;
  align-self:start;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
  min-height:68px
}
.path > .node{width:96px;overflow-wrap:anywhere}
.path[aria-hidden="true"]{visibility:hidden;pointer-events:none}

/* The website languages use the quick-start picker. On narrow screens only the active diagram and hint set the height. */
@media(max-width:1199.98px){
  .quick-start + .diagram-region :is(.diagram-paths,.guidance-messages) > [aria-hidden="true"]{display:none}
}
.node{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:96px;
  padding:var(--sp-1);
  text-align:center
}
.node svg{
  height:44px;
  width:44px;
  color:var(--text-secondary)
}
.node-image{width:58px;height:44px;object-fit:contain}
.node-image-vci{width:48px}
.node strong{
  font-size:var(--t-body-sm);
  font-weight:600
}
.node small{
  font-size:var(--t-caption);
  color:var(--text-tertiary)
}
.node.mech svg,.node.mech strong{
  color:var(--clr-mech-600)
}
.node.tech svg,.node.tech strong{
  color:var(--clr-tech-600)
}
.arrow{
  color:var(--text-disabled);
  font-size:var(--t-h2)
}
.computer{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  border:1px solid var(--border-default);
  border-radius:var(--r-card);
  padding:var(--sp-1);
  background:var(--surface-hover)
}
.ports{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-2)
}
.port{
  font-size:var(--t-body-sm);
  text-align:center
}
.port b{
  display:block;
  font-weight:500
}
.port span{
  color:var(--text-tertiary)
}
.cable{
  font-size:var(--t-caption);
  color:var(--text-tertiary);
  white-space:nowrap
}[hidden]{
  display:none!important
}
@media(max-width:1100px){.group{
  grid-template-columns:200px minmax(0,1fr);
  column-gap:var(--sp-3)
}
.scenario{
  gap:var(--sp-2);
  padding:var(--sp-2)
}
.device-pair{
  gap:var(--sp-1)
}
.brand{
  width:24px;
  height:24px
}
.vci-image{
  width:36px;
  height:36px
}}
@media(max-width:850px){.group{
  display:block
}
.group-label{
  margin-bottom:var(--sp-2)
}
.group{
  margin-top:var(--sp-3)
}
.group::before{
  top:8px
}
.applicability{
  display:inline;
  margin-left:var(--sp-2)
}
.scenario{
  min-height:64px
}
}
@media(max-width:600px){.scenario-picker{
  padding:var(--sp-3) var(--sp-2) var(--sp-6)
}
#demo-header{padding:var(--sp-3) var(--sp-2) 0}
.groups{padding-inline-start:var(--sp-2)}
#clients-title{padding:0 var(--sp-2)}
.selector{
  padding:var(--sp-3)
}
.cards{
  grid-auto-flow:row;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2)
}
.scenario{
  display:block;
  min-height:88px;
  padding:var(--sp-2)
}
.device-pair{
  gap:var(--sp-2);
  margin-bottom:var(--sp-1)
}
.brand{
  width:24px;
  height:24px
}
.vci-image{
  width:36px;
  height:32px
}
.card-copy{
  padding-right:0
}
.car{
  font-size:var(--t-body-sm)
}
.vci{
  font-size:var(--t-body-sm)
}
.applicability{
  display:block;
  margin-left:0
}
.group-label{
  font-size:var(--t-body)
}[data-group="external"]{
  grid-template-columns:1fr
}[data-group="external"] .scenario{
  display:flex;
  align-items:center;
  min-height:64px
}[data-group="external"] .device-pair{
  margin:0
}[data-group="external"] .card-copy{
  display:block
}
.diagram{
  padding:var(--sp-2) var(--sp-3)
}
.diagram-head{
  align-items:flex-start
}
.path{
  gap:var(--sp-1);
  justify-content:flex-start
}
.node{
  min-width:76px
}
.path > .node{width:76px}
.computer{
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-1);
  width:100%
}
.ports{padding:var(--sp-1);gap:var(--sp-1)}
}

.scenario-picker{
  max-width:1398px;
  margin:auto;
  padding-bottom:0
}
.generic-vci{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-tertiary)
}
.generic-vci svg{
  width:28px;
  height:28px
}
.scenario-status{
  margin:0;
  color:var(--text-secondary);
  font-size:var(--t-body-sm)
}
.scenario-status:empty{
  display:none
}
/* Loading is announced without inserting a transient line below the diagram; errors remain visible. */
.scenario-status:not(.is-error){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.port small{
  display:block;
  font-size:var(--t-caption);
  color:var(--text-tertiary)
}[data-group="link"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row
}


@media(min-width:1200px){
/* All scenes contribute to these tracks, including hidden ones. The first four nodes keep their positions. */
.diagram-paths{grid-template-columns:repeat(4,minmax(0,max-content) max-content) minmax(0,max-content);justify-content:center;align-items:start;gap:var(--sp-2)}
.path{display:contents}
.path > *{grid-row:1;justify-self:center}
.path > .node{width:auto}
.path > .arrow{align-self:center}
.path > :nth-child(1){grid-column:1}
.path > :nth-child(2){grid-column:2}
.path > :nth-child(3){grid-column:3}
.path > :nth-child(4){grid-column:4}
.path > :nth-child(5){grid-column:5}
.path > :nth-child(6){grid-column:6}
.path > :nth-child(7){grid-column:7}
.path > :nth-child(8){grid-column:8}
.path > :nth-child(9){grid-column:9;justify-self:start}
[data-group="link"]{
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.group:has([data-group="link"]) .scenario{
  gap:var(--sp-2)
}
.group:has([data-group="link"]) .device-pair{
  gap:var(--sp-1)
}
.group:has([data-group="link"]) .brand{
  width:24px;
  height:24px
}
.group:has([data-group="link"]) .vci-image{
  width:32px;
  height:32px
}}


#clients{padding-top:var(--sp-6)}
#clients-title{border-top:1px solid var(--border-default);padding-top:var(--sp-6)}

.go-to-operation{
  margin-inline-start:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3);
  min-height:36px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-btn);
  background:var(--surface-card);
  font-size:var(--t-body-sm);
  cursor:pointer
}
.go-to-operation:hover:not(:disabled){background:var(--surface-hover)}
.go-to-operation:disabled{color:var(--text-disabled);cursor:default}
.client-heading{
  scroll-margin-top:var(--sp-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0 var(--sp-4);
  width:100%;
  max-width:1398px;
  margin-inline:auto;
  padding:0 var(--sp-4);
  min-height:36px
}
.client-heading h3{
  margin:0;
  border-inline-start:3px solid var(--clr-tech-600);
  padding-inline-start:var(--sp-2);
  font-size:var(--t-body);
  font-weight:600;
  line-height:1.6
}
.client-heading[data-role="mechanic"] h3{border-color:var(--clr-mech-600)}
.client-heading h3:focus-visible{outline:2px solid var(--clr-link);outline-offset:var(--sp-1)}
.client-actions{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--sp-4)}
.client-actions a{display:inline-flex;align-items:center;gap:var(--sp-1);padding-block:var(--sp-2);color:var(--clr-link);font-size:var(--t-body-sm);text-decoration:none}
.client-actions a:hover{text-decoration:underline}
.client-actions a:focus-visible{outline:2px solid var(--clr-link);outline-offset:var(--sp-1)}
.external-computers{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;
  gap:var(--sp-2);
  width:320px;
  max-width:100%
}
.external-computers .node{min-width:0;display:grid;grid-template-rows:44px auto auto;justify-items:center;align-content:start;overflow-wrap:anywhere}
.external-computers .cable{display:flex;align-items:center;justify-content:center;height:calc(44px + 2 * var(--sp-1))}
@media(max-width:600px){
  .diagram-head .section-title{order:0}
  .go-to-operation{order:1;min-height:44px}
  .diagram-head .route-chip{order:2;max-width:100%}
  .client-heading{padding-inline:var(--sp-2)}
  .client-actions{gap:0 var(--sp-3)}
  .client-actions a{min-height:44px}
}

.quick-start-card {
  padding: var(--sp-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
}
.quick-start-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.scenario-name { margin: 0; font-size: var(--t-h2); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.quick-start .go-to-operation {
  min-height: 44px;
  margin: 0;
  padding-inline: var(--sp-4);
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--surface-card);
  font-weight: 600;
}
.quick-start .go-to-operation:hover:not(:disabled) { background: var(--text-secondary); }
.quick-start .go-to-operation:disabled { background: var(--surface-raised); color: var(--text-secondary); border-color: var(--border-default); }
.scenario-toggle {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 44px;
  padding: var(--sp-2) 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.scenario-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--clr-link);
  font-weight: 600;
}
.scenario-toggle-label svg { flex: none; }
.scenario-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.scenario-toggle:hover .scenario-toggle-label { text-decoration: underline; }
.scenario-toggle:focus-visible { outline: 2px solid var(--clr-link); outline-offset: 2px; }
.scenario-options { margin-top: var(--sp-2); }
.scenario-options .selector {
  margin-top: var(--sp-2);
  padding: 0;
  border: 0;
  background: transparent;
}
@media (min-width: 1200px) {
  .scenario-options .group { grid-template-columns: 252px minmax(0, 1fr); }
}
.quick-start + .diagram-region { margin-top: var(--sp-4); padding-top: 0; border: 0; }
@media (max-width: 600px) {
  .quick-start-row { flex-direction: column; align-items: start; gap: var(--sp-2); }
  .scenario-toggle { align-self: stretch; }
}