.tl-controls{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #dce7e1;border-radius:11px;padding:14px 16px;margin:0 0 15px}.tl-control-title{flex-shrink:0;padding-right:8px}.tl-control-title>span{display:block;font-size:10px;letter-spacing:1.5px;color:#628477}.tl-control-title>b{font-size:14px;font-weight:600;color:#234d40}.tl-modes{display:flex;gap:5px;flex:1;flex-wrap:wrap}.tl-modes button{padding:8px 11px;background:#f5f8f6;border:1px solid transparent;font-size:13px;font-weight:550}.tl-modes button.active{background:#dff6ea;border-color:#97cdb7;color:#0b6551}.tl-direction{font-size:11px;color:#608072;display:flex;gap:7px;align-items:center}.tl-direction select{font-size:12px;padding:7px 8px;max-width:155px}.tl-controls>button{font-size:12px;padding:8px 10px;white-space:nowrap}.tl-supply-detail{margin:13px 0}.tl-supply-detail summary{font-size:12px;color:#b5d4c6;cursor:pointer}.tl-supply-detail dl{margin-top:8px}.tl-port-title{font-size:11px;letter-spacing:.4px;color:#accbbe;border-top:1px solid var(--cn-line);padding-top:11px}.tl-ports{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:7px 0 3px}.tl-ports>div>span{display:block;color:#9fc4b4;font-size:11px}.tl-ports strong{font-size:22px;font-weight:500;color:#caffea;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.tl-port-loss{margin:4px 0 0;font-size:11px;color:#a6c6b6}.cn-hud{max-height:calc(100% - 182px);overflow:auto;scrollbar-width:thin;scrollbar-color:#466d5d transparent}.cn-hud .cn-stock{margin-top:12px}.cn-legend{max-width:calc(100% - 350px);flex-wrap:wrap;gap:7px 18px}.cn-legend span{font-size:11px}.cn-caption #tlEncoding{line-height:1.7}.tl-network{background:white;border:1px solid #dde8e1;border-radius:13px;padding:25px;margin:0 0 24px}.tl-network-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.tl-network-head h2{font-size:23px;margin:4px 0 7px}.tl-network-head p{font-size:12px;color:#597366;margin:0;max-width:700px}.tl-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.tl-actions button{font-size:12px;white-space:nowrap;padding:8px 11px}.tl-network-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:start}.tl-chart-label{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:#375f4e;border-bottom:1px solid #e0eae4;padding-bottom:10px;margin-bottom:15px;gap:12px}.tl-chart-label span{font-size:11px;font-weight:400;color:#6f897b}.tl-matrix{max-height:610px;overflow:auto}.tl-matrix svg{display:block;width:100%;min-width:410px;max-width:800px}.tl-matrix [role=button]{cursor:pointer;outline-offset:2px}.tl-matrix [role=button]:focus-visible rect{stroke:#183e31;stroke-width:3}.tl-links{display:grid;gap:9px;max-height:610px;overflow:auto;padding-right:3px}.tl-link-card{display:grid;grid-template-columns:24px 1fr auto;gap:13px;text-align:left;padding:15px 16px;border-color:#e2eae6;border-radius:10px;background:#fafcfb;align-items:center;font-weight:400}.tl-link-card.active{border-color:#198f70;background:#e9f8ef}.tl-link-rank{font:12px ui-monospace,monospace;color:#789487;align-self:start;padding-top:3px}.tl-link-names{display:flex;flex-direction:column;gap:4px}.tl-link-names>b{font-size:13px;font-weight:600;line-height:1.5}.tl-link-names>span{font-size:11px;color:#6a8f7e}.tl-link-quantity{text-align:right}.tl-link-quantity strong{display:block;font:500 25px/1.2 ui-monospace,monospace;color:#087457;letter-spacing:-1px}.tl-link-quantity small,.tl-link-quantity>span{display:block;font-size:11px;color:#6b8d7c;margin-top:4px}.tl-no-flows{font-size:14px;line-height:1.9;padding:30px;color:#688273;background:#f5f8f6;border-radius:10px}.tl-receipt{background:#f0f8f3;border:1px solid #b8d9c7;border-radius:10px;padding:18px 22px;margin-bottom:24px}.tl-receipt-heading{display:flex;justify-content:space-between;font-size:12px;color:#527c65;align-items:center}.tl-receipt-heading button{padding:5px 10px;font-size:12px}.tl-receipt h3{font-size:18px;margin:9px 0 15px}.tl-receipt-numbers{display:flex;gap:23px;align-items:center;flex-wrap:wrap}.tl-receipt-numbers span{font-size:12px;color:#668573;display:block}.tl-receipt-numbers strong{font-size:24px;color:#1b6750;font-weight:500}.tl-receipt-numbers small{font-size:12px}.tl-arrival{height:5px;background:#d5dfd8;border-radius:5px;overflow:hidden;margin-top:15px}.tl-arrival i{height:100%;display:block;background:#25ac83}.tl-receipt p{font-size:12px;margin:9px 0 0;color:#638370}.tl-reading{margin-top:23px;border-top:1px solid #e0eae4;padding-top:17px}.tl-reading summary{font-size:14px;font-weight:600;cursor:pointer;color:#456e58}.tl-reading>div{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:14px}.tl-reading p{font-size:13px;color:#5e7768;line-height:1.9;margin:0}.tl-reading p:last-child{grid-column:1/-1}.tl-reading a{color:#0b8060;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1180px){.tl-controls{flex-wrap:wrap;gap:10px}.tl-control-title{flex-basis:200px}.tl-modes{flex:1;min-width:420px}.tl-direction{margin-left:auto}.tl-network-head{align-items:flex-start}.tl-actions{max-width:290px}.tl-network-grid{gap:22px}.tl-link-card{gap:9px;padding:13px}.tl-link-quantity strong{font-size:21px}}
@media(max-width:850px){.tl-network-head{display:block}.tl-actions{max-width:none;margin-top:15px;justify-content:flex-start}.tl-network-grid{grid-template-columns:1fr}.tl-matrix{max-height:none}.tl-links{max-height:420px}.tl-reading>div{grid-template-columns:1fr}.tl-reading p:last-child{grid-column:auto}}
@media(max-width:760px){.tl-controls{padding:13px;gap:9px}.tl-control-title{flex-basis:100%}.tl-control-title>span{display:none}.tl-modes{display:grid;grid-template-columns:1fr 1fr;min-width:0;width:100%;flex-basis:100%}.tl-modes button{font-size:12px;padding:8px}.tl-direction{margin-left:0;flex:1;justify-content:space-between}.tl-direction select{max-width:170px;width:100%;font-size:12px}.cn-hud{max-height:none;overflow:visible}.cn-legend{max-width:calc(100% - 34px);line-height:1.8}.cn-legend span{font-size:10px}.tl-network{padding:17px 14px}.tl-network-head h2{font-size:20px}.tl-actions{gap:5px}.tl-actions button{font-size:11px;padding:7px 8px}.tl-link-card{grid-template-columns:20px 1fr auto}.tl-link-names>b{font-size:12px}.tl-link-quantity strong{font-size:20px}.tl-receipt{padding:13px}.tl-receipt-numbers{gap:12px}.tl-receipt-numbers strong{font-size:20px}.tl-chart-label{font-size:12px}.tl-ports strong{font-size:25px}.tl-port-title{font-size:12px}.tl-port-loss{font-size:12px}}

.tl-ring-key{background:#0c2528;border-radius:9px;padding:13px 17px;margin:0 0 17px;color:#d8eee2;font-size:12px}.tl-ring-key[hidden]{display:none}.tl-ring-key>div{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;padding:4px 0}.tl-ring-key b{font-weight:500;min-width:142px;color:#add0c0}.tl-ring-key span{display:inline-flex;align-items:center;gap:6px}.tl-ring-key i{display:inline-block;width:12px;height:5px;border:1px solid #a5bdb040}
.tl-network-grid>div{min-width:0}
/* Opening cinema: leave the network the largest area of the first viewport. */
.cn-pulse-stats{display:flex;gap:21px;margin-top:15px;color:#91c2ac;font-size:10px;letter-spacing:.4px}.cn-pulse-stats span{display:flex;align-items:baseline;gap:6px}.cn-pulse-stats b{font:400 23px/1.1 ui-monospace,monospace;color:#d4ffeb;letter-spacing:-.6px}.cn-scene-heading{top:27px;max-width:calc(100% - 365px)}.cn-scene-heading h2{font-size:29px}.cn-scene-actions{margin-top:16px}.cn-cameras{top:245px}.cn-hud{width:255px}.cn-toolbar h1{font-size:22px}.cn-toolbar .cn-overline{font-size:10px}.cn-selectors select{font-size:12px;max-width:224px}.cn-selectors button{font-size:12px}.tl-control-title{max-width:178px}.tl-modes button{padding:8px 9px;font-size:12px}.tl-modes [data-tl-mode=swarm]{font-weight:700}.tl-modes [data-tl-mode=swarm].active{background:#135c4a;color:#e0ffec;border-color:#135c4a}.tl-modes [data-tl-mode=cinema]{font-size:11px;color:#6c8579}.cn-stage{height:clamp(660px,calc(100svh - 265px),900px)}
@media(max-width:1180px){.tl-control-title{flex-basis:170px}.tl-modes{min-width:460px}.cn-pulse-stats{gap:12px}.cn-pulse-stats b{font-size:21px}.cn-hud{width:240px}.cn-scene-heading{max-width:calc(100% - 300px)}}
@media(max-width:760px){.cn-toolbar h1{font-size:21px}.cn-scene-heading{left:17px;top:22px;max-width:calc(100% - 34px)}.cn-scene-heading h2{font-size:23px}.cn-pulse-stats{gap:14px;margin-top:14px;flex-wrap:wrap}.cn-pulse-stats b{font-size:20px}.cn-pulse-stats span{font-size:9px;gap:4px}.cn-cameras{top:232px}.cn-stage{height:auto;min-height:1100px}.cn-hud{width:auto}.tl-control-title{max-width:none;flex-basis:100%}.tl-modes{min-width:0;grid-template-columns:1fr 1fr}.tl-modes [data-tl-mode=swarm]{grid-column:1/-1}.cn-selectors select{max-width:none}}

@media(min-width:761px){.cinema-main{padding-top:14px}.cn-toolbar{margin-bottom:7px}.cn-source{margin:6px 0 9px}.tl-controls{padding:10px 14px;margin-bottom:11px}.cn-stage{height:clamp(590px,calc(100svh - 322px),880px)}.cn-scene-heading h2{font-size:27px}}
@media(max-width:760px){
 body:has(.cinema-main) header{padding:11px 12px;gap:9px;flex-wrap:nowrap}body:has(.cinema-main) .brand{font-size:13px;gap:7px}body:has(.cinema-main) .brandmark{width:32px;height:32px;font-size:21px}body:has(.cinema-main) .brandSub{display:none}body:has(.cinema-main) .headerActions{width:auto;margin:0;gap:5px}body:has(.cinema-main) .headerActions button{font-size:10px;padding:7px 8px;white-space:nowrap}
 .cinema{display:flex;flex-direction:column}.cn-toolbar{display:contents}.cn-toolbar>div:first-child{order:0;margin-bottom:6px}.cn-source{order:1}.cn-stage{order:2}.tl-controls{order:3;margin-top:17px}.cn-selectors{order:4;margin:0 0 12px}.cn-caption{order:5}.tl-ring-key{order:6}.cn-results{order:7}.tl-network{order:8}.cn-analysis{order:9}.cn-toolbar h1{font-size:19px}
}