/* Keep each explanation's artwork, labels and instructions in deliberate rows. */
.up-stream-route{display:grid;grid-template-columns:minmax(0,1fr) clamp(42px,7vw,110px) minmax(0,1fr);gap:12px;align-items:center}
.up-stream-route>span{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;align-items:baseline;min-width:0;text-wrap:balance}
.up-stream-route .up-signal{width:100%;height:30px;object-fit:contain;margin:0}
.fp-party{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.4fr);gap:12px;align-items:start;min-width:0}
.fp-party-host,.fp-party-code,.fp-party-friends{display:grid;grid-template-rows:100px auto;align-items:center;min-width:0}
.fp-party-host,.fp-party-code{grid-template-columns:minmax(0,1fr)}
.fp-party-friends{grid-template-columns:repeat(2,minmax(0,1fr))}
.fp-party img,.fp-party-friends img{width:100%;max-width:100px;height:100px;object-fit:contain;margin:0 auto}
.fp-party-friends img+img{margin:0 auto}
.fp-party-host>span,.fp-party-friends>span,.fp-party-code small{grid-row:2;align-self:start;min-width:0;max-width:100%;margin-top:8px;white-space:normal;text-wrap:balance}
.fp-party-code>span{min-width:0;max-width:100%;letter-spacing:0;box-sizing:border-box}
.gp-clip-labels{display:flex;align-items:center;justify-content:space-between;position:relative;margin-inline:20%;min-height:20px}
.gp-clip-labels>span:first-child{transform:translateX(-50%)}
.gp-clip-labels>span:last-child{transform:translateX(50%)}
.gp-clip-labels strong{position:absolute;left:50%;transform:translateX(-50%)}
.gp-clip figcaption{font:12px/1.6 'Segoe UI',sans-serif;text-transform:none;letter-spacing:normal;margin:10px auto 0;max-width:42ch;text-wrap:balance}
@media(max-width:760px){
 .up-stream-route{gap:8px}
 .fp-party{gap:8px}
 .fp-party-host,.fp-party-code,.fp-party-friends{grid-template-rows:80px auto}
 .fp-party img,.fp-party-friends img{height:80px;max-width:80px}
 .fp-party-code>span{font-size:clamp(13px,3.4vw,20px)}
 .gp-input-pair{align-items:start}
 .gp-input-pair>div{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:76px auto;justify-items:center;align-items:center;gap:8px}
 .gp-input-pair img{max-height:76px;object-fit:contain}
 .gp-input-pair>div>span{align-self:start;text-wrap:balance}
 .gp-pair-plus{align-self:start;line-height:76px}
 .gp-clip-labels{margin-inline:16%}
}