/* Flat harbour shared by the marketing page and browser entry screen. */
.harbour{--scene-sky:light-dark(#bfe3f5,#0b1530);--scene-water:light-dark(#9cc6de,#14264a);--building:light-dark(#7d95ba,#1e2e52);--scene-cloud:light-dark(#ffffffbb,#b4c0d22e);--road:light-dark(#56627a,#0c1426);--scene-line:light-dark(#eef2f7,#3a4a66);--yellow:var(--amber);--warm:var(--orange);position:relative;min-width:0}
.harbour .scene{position:relative;height:330px;background:var(--scene-sky);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.harbour .sun{position:absolute;left:35px;top:40px;width:46px;height:46px;background:light-dark(#ffb547,#f4f1de);border-radius:50%;box-shadow:0 0 40px light-dark(#ffb54740,#f4f1de20)}
.harbour .sun:after{content:'';position:absolute;top:-6px;left:13px;width:46px;height:46px;border-radius:50%;background:light-dark(transparent,var(--scene-sky))}
.harbour .cloud{position:absolute;top:67px;left:60%;width:70px;height:10px;border-radius:50px;background:var(--scene-cloud)}
.harbour .cloud:before{content:'';position:absolute;left:15px;bottom:0;width:40px;height:32px;background:inherit;border-radius:50%}
.harbour .cloud:after{content:'';position:absolute;left:42px;bottom:0;width:35px;height:25px;background:inherit;border-radius:50%}
.harbour .stars{position:absolute;left:45%;top:35px;width:2px;height:2px;background:light-dark(transparent,#f4f7fb);color:light-dark(transparent,#f4f7fb);box-shadow:35px 12px 0 currentColor,-38px 16px 0 currentColor,94px 45px 0 currentColor,-71px 39px 0 currentColor;opacity:.4}
.harbour .city{position:absolute;display:flex;gap:4px;align-items:end}
.harbour .tower{background:var(--building);width:20%;height:70%;border-radius:2px 2px 0 0;position:relative}
.harbour .tower:nth-child(2){height:100%}.harbour .tower:nth-child(3){height:55%}.harbour .tower:nth-child(4){height:85%}
.harbour .tower:after{content:'';position:absolute;inset:12px 7px;background:repeating-linear-gradient(to bottom,var(--yellow) 0 3px,transparent 3px 13px);opacity:.5}
.harbour .bridge{position:absolute}.harbour .bridge:before,.harbour .bridge:after{content:'';position:absolute}
.harbour .bridge-pier{position:absolute}.harbour .water{position:absolute;width:100%;background:var(--scene-water)}
.harbour .water:after{content:'';position:absolute;top:9px;left:18%;width:58%;height:12px;border-top:1px solid light-dark(#ffffff80,#fbbf4a55);border-bottom:1px solid light-dark(#ffffff80,#fbbf4a55);transform:skew(-30deg)}
.harbour .shore{position:absolute;bottom:0;width:100%;background:var(--road)}
.harbour .shore:after{content:'';position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(to right,var(--scene-line) 0 20px,transparent 20px 50px)}
.harbour .wheel{position:absolute;border-radius:50%}.harbour .wheel.two{left:auto}
.harbour .motion-button{margin-top:12px}
.harbour .cloud{animation:harbour-cloud 10s ease-in-out infinite alternate}
.harbour .water:after{animation:harbour-water 5s ease-in-out infinite alternate}
@keyframes harbour-cloud{to{translate:20px 0}}
@keyframes harbour-water{to{translate:10px 0;opacity:.4}}
.harbour.paused *,.harbour.offscreen *,.harbour.inactive *{animation-play-state:paused!important}

.harbour .scene{isolation:isolate;overflow:hidden;--steel:light-dark(#5f7aa3,#7083a2);--stone:light-dark(#8fa5bb,#425672)}
.harbour .scene .city{top:auto;bottom:98px;height:87px;left:4%;width:27%}
.harbour .scene .bridge{top:auto;bottom:98px;left:28%;width:46%;height:98px;overflow:hidden;z-index:1}
.harbour .bridge:before{inset:0 0 auto;height:172px;border:5px solid var(--steel);border-radius:50%;background:none}
.harbour .bridge:after{left:0;right:0;top:12px;height:160px;border:3px solid var(--steel);border-radius:50%;background:none}
.harbour .bridge-hangers{position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0 13px,var(--steel) 13px 14px);clip-path:polygon(0 93%,6% 60%,14% 39%,24% 22%,36% 12%,50% 9%,64% 12%,76% 22%,86% 39%,94% 60%,100% 93%,100% 100%,0 100%);opacity:.8}
.harbour .bridge-truss{position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--steel);border-top:1px solid light-dark(#b2c3d8,#899aba)}
.harbour .scene .bridge-pier{top:auto;bottom:91px;left:26%;width:15px;height:75px;background:var(--stone);z-index:2;border-top:5px solid var(--steel)}
.harbour .scene .bridge-pier.right{left:73%}.harbour .bridge-pier:before{content:'';position:absolute;left:3px;right:3px;top:8px;bottom:0;background:light-dark(#a8b9c9,#4e6482)}.harbour .bridge-pier:after{content:'';position:absolute;left:-2px;right:-2px;top:-7px;height:3px;background:var(--stone)}
.harbour .scene .opera{position:absolute;top:auto;bottom:96px;right:2%;width:24%;height:56px;display:block;border:0;z-index:3;background:none}
.harbour .opera:after{content:'';position:absolute;left:-5%;right:-5%;bottom:-3px;height:6px;background:light-dark(#9b8c78,#68778c);border-radius:50% 50% 2px 2px}
.harbour .opera .sail{position:absolute;bottom:0;left:0;width:37%;height:46px;margin:0;background:light-dark(#edf4f9,#afc3d9);clip-path:polygon(0 100%,2% 84%,7% 68%,15% 50%,27% 33%,43% 18%,61% 7%,78% 0,76% 18%,76% 36%,79% 55%,87% 78%,100% 100%)}
.harbour .opera .sail:after{content:'';position:absolute;inset:0;background:light-dark(#ffffff,#e5eef8);clip-path:polygon(43% 18%,61% 7%,78% 0,76% 18%,76% 36%,79% 55%,87% 78%,100% 100%,54% 100%,48% 71%,45% 41%)}
.harbour .opera .sail:nth-child(2){left:20%;height:56px;width:44%;z-index:2}.harbour .opera .sail:nth-child(3){left:50%;height:42px;width:35%;z-index:3}.harbour .opera .sail:nth-child(4){left:72%;height:29px;width:28%;transform:scaleX(-1);z-index:4}
.harbour .scene .water{top:auto!important;bottom:53px;height:45px;z-index:4}
.harbour .shore{height:53px;z-index:5}.harbour .shore:after{top:25px}
.harbour .traffic{position:absolute;inset:0;z-index:6;pointer-events:none}
.harbour .vehicle{position:absolute;left:22%;bottom:8px;translate:none;transform:none;animation:none}
.harbour .bus{width:98px;height:32px;background:var(--teal);border:0;border-radius:5px 10px 3px 3px;z-index:3;box-shadow:0 2px 0 #09101f66}
.harbour .bus:before{content:'';position:absolute;left:6px;right:5px;top:5px;height:13px;background:repeating-linear-gradient(to right,#d9ebf1 0 13px,#16434e 13px 15px);border:0;border-radius:2px 5px 0 0}
.harbour .bus .wheel{left:13px;bottom:-5px;width:12px;height:12px;border:4px solid #0b111c;background:#a8b6c9}.harbour .bus .wheel.two{left:auto;right:14px}
.harbour .bus .headlight{position:absolute;right:1px;bottom:5px;width:4px;height:3px;background:#fff2c7;border-radius:1px}.harbour .bus .rear-light{position:absolute;left:0;bottom:5px;width:3px;height:4px;background:#f98a5c}
.harbour .car{width:47px;height:13px;bottom:34px;left:62%;background:var(--yellow);border-radius:8px 6px 3px 3px;z-index:2;transform:scaleX(-1)}
.harbour .car:before{content:'';position:absolute;top:-9px;left:9px;width:29px;height:11px;background:inherit;border-radius:10px 14px 0 0;clip-path:polygon(0 100%,15% 14%,69% 0,100% 100%)}
.harbour .car:after{content:'';position:absolute;top:-7px;left:17px;width:15px;height:7px;background:#193d58;clip-path:polygon(0 100%,8% 10%,70% 0,100% 100%)}
.harbour .car .wheel{width:9px;height:9px;left:6px;bottom:-4px;border:3px solid #0b111c;background:#a8b6c9}.harbour .car .wheel.two{left:auto;right:7px}
.harbour .car-two{background:var(--violet);left:5%}
.harbour .bus{animation:shout-bus-pass 16s linear infinite;animation-delay:0s}
.harbour .car{animation:shout-car-pass 10s linear infinite;animation-delay:-3s}
.harbour .car-two{animation-delay:-8s}
@keyframes shout-bus-pass{0%{left:-110px}88%,100%{left:calc(100% + 10px)}}
@keyframes shout-car-pass{0%{left:calc(100% + 10px)}92%,100%{left:-58px}}
@media(prefers-reduced-motion:reduce){.harbour .vehicle{animation:none!important}}

.harbour .bus:before{right:6px;border-radius:2px 5px 0 0}
.harbour .bus:after{content:none}
.harbour .bus .wheel{z-index:4;width:13px;height:13px;bottom:-5px;border:4px solid #0b111c;background:#b4c0d2;box-shadow:0 0 0 1px #09101f33}
.harbour .bus .wheel.two{right:19px;left:auto}
.harbour .bus .headlight{z-index:3}

.harbour .roof-luggage{position:absolute;left:11px;top:-17px;width:26px;height:8px;border-radius:3px;background:var(--warm);border:1px solid #27354a;z-index:3;box-shadow:0 2px 0 #27354a}
.harbour .roof-luggage:before,.harbour .roof-luggage:after{content:'';position:absolute;top:0;bottom:0;width:2px;background:#27354a}
.harbour .roof-luggage:before{left:5px}.harbour .roof-luggage:after{right:5px}
.harbour .car-two .roof-luggage{background:var(--teal);width:30px;left:8px}
.harbour .tow-rig{width:139px;height:35px;bottom:8px;left:55%;z-index:3}
.harbour .caravan{position:absolute;left:0;bottom:0;width:73px;height:33px;background:light-dark(#f5efe2,#dbe4ef);border:1px solid #748499;border-radius:8px 14px 4px 4px;box-shadow:0 2px 0 #09101f33}
.harbour .caravan:before{content:'';position:absolute;top:7px;left:9px;right:10px;height:11px;border-radius:3px;background:#3f7792;border:1px solid #305c73}
.harbour .caravan:after{content:'';position:absolute;left:0;right:0;bottom:6px;height:4px;background:var(--violet)}
.harbour .caravan .wheel{left:32px;bottom:-5px;width:12px;height:12px;border:4px solid #0b111c;background:#a8b6c9;z-index:4}
.harbour .tow-hitch{position:absolute;left:73px;bottom:5px;width:16px;height:3px;background:#8d99ac}
.harbour .tow-rig .tow-car{position:absolute;left:87px;bottom:0;background:var(--blue);transform:none;animation:none!important}
.harbour .tow-car .roof-luggage{background:var(--yellow);left:10px}
.harbour .bus{animation:shout-bus-pass 24s linear infinite}
.harbour .tow-rig{animation:shout-caravan-pass 24s linear infinite;animation-delay:-12s}
@keyframes shout-caravan-pass{0%{left:-150px}88%,100%{left:calc(100% + 10px)}}
@media(prefers-reduced-motion:reduce){.harbour .tow-rig{animation:none!important}}

@media(prefers-reduced-motion:reduce){.harbour *{animation:none!important}.harbour .bus{left:8%}.harbour .tow-rig{left:52%}.harbour .car{left:70%}.harbour .car-two{left:15%}}