/* Small instructional parts, with labels and meaningful numbers in HTML. */
.gp-input-pair{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;gap:16px;max-width:680px;margin:18px 0 22px;padding:14px 0;border-block:1px solid #294659}
.gp-input-pair>div{display:flex;align-items:center;gap:12px;min-width:0}
.gp-input-pair img{display:block;object-fit:contain;background:none;border:0;border-radius:0;height:auto;flex:none}
.gp-link{width:72px}.gp-input-pair .gp-wav{width:54px}
.gp-input-pair>div>span{color:#c2d7e5;font:14px/1.5 'Segoe UI',sans-serif}
.gp-pair-plus{font-size:25px;color:#ffac62;text-align:center}
.gp-master-flow{display:grid;grid-template-columns:minmax(80px,1fr) 30px minmax(120px,1.3fr) 30px minmax(80px,1fr);align-items:center;gap:12px;margin:18px 0 22px;padding:12px 0 18px;border-block:1px solid #294659}
.gp-file{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;min-width:0}
.gp-file img{display:block;width:68px;height:auto;background:none;border:0;border-radius:0}
.gp-file>span{color:#c2d7e5;font:14px/1.5 'Segoe UI',sans-serif}
.gp-target{display:grid;gap:4px;text-align:center;color:#9dbbcd;font:12px/1.5 'Segoe UI',sans-serif}
.gp-target strong{color:#e8edf6;font:25px/1.2 'Share Tech Mono',monospace}
.gp-arrow{color:#ffac62;font-size:25px;text-align:center}
.gp-clip{margin:18px 0 22px;padding:15px 0;border-block:1px solid #294659}
.gp-clip-labels{display:grid;grid-template-columns:1fr 1fr 1fr;margin:0 20%;color:#ffb66e;font:12px/1.5 'Segoe UI',sans-serif}
.gp-clip-labels strong{color:#c2d7e5;white-space:nowrap;text-align:center;font-weight:600}
.gp-clip-labels>span:last-child{text-align:right}
.gp-wave{height:92px;position:relative;margin:3px 0;isolation:isolate}
.gp-bars{position:absolute;inset:8px 0;display:flex;gap:4px;align-items:center;z-index:1}
.gp-bars i{display:block;flex:1;height:var(--bar);background:#345a6b;border-radius:2px}
.gp-bars i:nth-child(n+11):nth-child(-n+38){background:#16c2e7}
.gp-selection{position:absolute;inset:0 20%;background:#00aaff12;border-block:1px solid #217184}
.gp-handle{position:absolute;top:0;bottom:0;z-index:2;width:28px;transform:translateX(-50%);pointer-events:none}
.gp-handle img{display:block;width:100%;height:100%;object-fit:contain;background:none;border:0;border-radius:0}
.gp-start{left:20%}.gp-end{left:80%}
.gp-clip figcaption{color:#9dbbcd;font:12px/1.5 'Segoe UI',sans-serif;text-align:center;margin-top:8px}
@media(max-width:760px){.gp-input-pair{gap:8px}.gp-input-pair>div{flex-direction:column;gap:7px;align-items:center;text-align:center}.gp-input-pair>div>span{font-size:13px}.gp-master-flow{grid-template-columns:minmax(0,1fr) 15px minmax(90px,1.1fr) 15px minmax(0,1fr);gap:4px}.gp-file{flex-direction:column;gap:5px}.gp-file img{width:52px}.gp-file>span{font-size:12px;text-align:center}.gp-target{font-size:11px}.gp-target strong{font-size:20px}.gp-arrow{font-size:19px}.gp-bars{gap:2px}.gp-clip-labels{font-size:11px;margin-inline:16%}.gp-start{left:16%}.gp-end{left:84%}.gp-selection{inset-inline:16%}.gp-wave{height:82px}}