.port-eyebrow{font-size:11px;letter-spacing:1.3px;font-weight:700;color:#00869a;margin:0 0 9px}.port-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}.port-canvas{padding:0;overflow:hidden}.port-canvas-heading{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e1e9ed;font-size:12px;color:#536b7b;gap:10px}.port-demo{background:#e7f5f2;color:#147363;padding:5px 8px;border-radius:5px;white-space:nowrap;font-size:10px}.port-scene{position:relative;background:#fff;isolation:isolate;overflow:hidden}.port-picture{display:block;width:100%;height:auto}.port-hotspot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border:3px solid white;border-radius:50%;background:#006e85;color:#fff;box-shadow:0 2px 7px #062b5d70;cursor:pointer;z-index:4;font-size:12px;font-weight:700;transition:transform .2s,background .2s}.port-hotspot:hover,.port-hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.15);outline:3px solid #fcc451;outline-offset:3px}.port-hotspot.selected{background:#faad32;color:#123047;box-shadow:0 0 0 7px #ffaa3240}.port-legend{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:15px;border-top:1px solid #e1e9ed;background:#f9fbfc}.port-legend button{display:flex;align-items:center;gap:7px;text-align:left;border:1px solid transparent;border-radius:5px;background:transparent;padding:7px;color:#4a6272;font:inherit;font-size:12px;cursor:pointer}.port-legend button span{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#e3edf2;color:#426075;font-weight:700}.port-legend button.active{background:#e6f3f5;border-color:#b7dfe4;color:#007689}.port-legend button.active span{background:#00869a;color:white}.port-info{position:sticky;top:20px}.port-info p:not(.port-eyebrow){line-height:1.65;font-size:13px}.port-info h2{font-size:23px;line-height:1.15;margin-bottom:16px}.port-object-icon{width:48px;height:48px;display:grid;place-items:center;background:#e5f3f5;color:#008198;border-radius:12px;margin-bottom:20px}.port-object-icon svg{width:27px;height:27px}.port-info dl{border-top:1px solid #e5ebef;margin:20px 0;padding-top:15px}.port-info dt{font-size:11px;color:#82919c;margin-bottom:5px}.port-info dd{font-size:13px;margin:0 0 15px;line-height:1.4;font-weight:600}.port-info .button{white-space:normal;text-align:left;line-height:1.4}.port-tour{margin-top:18px}.port-tour h2{margin-bottom:5px}.port-tour .muted{font-size:13px}.port-controls{display:flex;gap:8px}.port-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.port-steps button{font:inherit;display:flex;align-items:center;gap:8px;border:1px solid #dfe7eb;border-radius:7px;background:#f7f9fb;padding:15px 10px;color:#64798b;text-align:left;cursor:pointer}.port-steps button span{font-size:11px}.port-steps button strong{font-size:12px;flex:1}.port-steps button.active{background:#e5f4f5;border-color:#1799a6;color:#006d80}.port-caption{padding:13px 16px;background:#f0f5f8;border-left:3px solid #10a1af;font-size:13px;min-height:44px}.port-animation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.port-animation>*{opacity:0}.approach-route,.road-route{fill:none;stroke:#ffcf51;stroke-width:.6;stroke-dasharray:1 1;filter:drop-shadow(0 0 .2px #102b4b)}.water-ring{fill:#59dbff22;stroke:#3ee1ed;stroke-width:.3}.storage-glow{fill:#ffd05855;stroke:#f4b928;stroke-width:.4}.passenger-glow{fill:#57dbe755;stroke:#008fbc;stroke-width:.4}.territory-glow{fill:none;stroke:#f4b928;stroke-width:1;stroke-dasharray:2 1}.effect-approach .approach-route,.effect-approach .water-ring,.effect-road .road-route,.effect-storage .storage-glow,.effect-passenger .passenger-glow,.effect-territory .territory-glow{opacity:1;animation:port-pulse 2s ease-in-out infinite}.moving-vessel,.moving-container,.moving-truck{display:none;position:absolute;padding:6px;border-radius:8px;box-shadow:0 3px 12px #0c334d55;background:#fff;color:#007e98;z-index:2;pointer-events:none}.moving-vessel svg,.moving-container svg,.moving-truck svg{width:22px;height:22px}.effect-approach .moving-vessel{display:block;animation:port-approach 4.5s ease-in-out infinite}.effect-lift .moving-container{display:block;background:#ffce55;color:#533a10;animation:port-lift 4.5s ease-in-out infinite}.effect-road .moving-truck{display:block;background:#ffce55;color:#533a10;animation:port-road 4.5s ease-in-out infinite}@keyframes port-approach{0%{left:58%;top:82%;opacity:0}10%{opacity:1}55%{left:56%;top:64%}90%,100%{left:38%;top:45%;opacity:1}}@keyframes port-lift{0%,15%{left:36%;top:45%}45%{left:41%;top:23%}80%,100%{left:34%;top:29%}}@keyframes port-road{0%{left:24%;top:35%}35%{left:40%;top:24%}55%{left:48%;top:17%}85%{left:79%;top:21%}100%{left:87%;top:13%}}@keyframes port-pulse{50%{opacity:.5}}button:focus-visible{outline:3px solid #e6a522;outline-offset:3px}
@media(min-width:1600px){.port-layout{grid-template-columns:minmax(0,1fr) 330px}.port-info p:not(.port-eyebrow){font-size:15px}}
@media(max-width:1150px){.port-layout{grid-template-columns:minmax(0,1fr)}.port-info{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.port-info .port-object-icon{display:none}.port-info .port-eyebrow,.port-info h2{grid-column:1/-1}.port-info dl{margin:0;border:0;padding:0}.port-info .button{align-self:start}.port-info .small{margin:0}.port-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:740px){.port-layout{gap:12px}.port-hotspot{width:29px;height:29px;border-width:2px;font-size:10px}.port-info{display:block}.port-info dl{margin:15px 0}.port-info .small{margin-top:12px}.port-legend{gap:2px;padding:8px}.port-legend button{font-size:11px;padding:5px 2px;gap:5px}.port-canvas-heading{font-size:11px;padding:12px 10px}.port-steps button{padding:12px 8px}.port-tour .title-row{align-items:start;gap:14px}.port-controls{flex-wrap:wrap}.port-eyebrow{font-size:10px}.moving-vessel,.moving-container,.moving-truck{padding:3px}.moving-vessel svg,.moving-container svg,.moving-truck svg{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){.port-animation>*,.moving-vessel,.moving-container,.moving-truck{animation:none!important}.effect-approach .moving-vessel{left:38%;top:45%}.effect-lift .moving-container{left:34%;top:29%}.effect-road .moving-truck{left:79%;top:21%}.port-hotspot{transition:none}}

.port-paused .port-animation>*,.port-paused .moving-vessel,.port-paused .moving-container,.port-paused .moving-truck{animation-play-state:paused}
.brand small{font-size:12px}
.port-complete .moving-truck{animation:none;left:87%;top:13%}.port-complete .road-route{animation:none;opacity:1}