@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexMono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/LibreFranklin-200-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/LibreFranklin-200-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--accent:#5AB3DB}
*{box-sizing:border-box}
body{margin:0;font-family:'Libre Franklin','Franklin Gothic Book',Arial,sans-serif;font-weight:400;color:var(--fg);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.only-dark,.only-light{display:contents}
html.theme-dark .only-light,html.theme-light .only-dark{display:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--fg);color:var(--bg);padding:12px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.tileimg{object-position:50% 40%}
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line2);background:transparent;color:var(--fg);cursor:pointer}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mobile-nav a{display:block;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:17px}
.form-msg{padding:16px 18px;border:1px solid var(--line2);font-size:15px}
.form-msg.ok{border-color:var(--accent);background:var(--bg2)}
.form-msg.err{border-color:#d9534f;color:var(--fg)}
.field.invalid{border-color:#d9534f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal{max-width:860px}
.legal h2{font-size:26px;font-weight:400;margin:48px 0 12px}
.legal h3{font-size:19px;font-weight:500;margin:32px 0 8px}
.legal h4{font-size:16px;font-weight:500;margin:24px 0 6px}
.legal p,.legal li{font-size:16px;color:var(--text)}
.legal ul{padding-left:22px}
.legal strong{color:var(--fg);font-weight:500}
@media (max-width:860px){.menu-btn{display:inline-flex}.mobile-nav.open{display:block}.cta-text{display:none}}


html.theme-dark{--bg:#00121f;--bg2:#001b2f;--line:#16364d;--line2:#4a6373;--text:#b8c7d3;--dim:#8fa5b5;--fg:#FFFFFF;--ink:#dce8f0;--shape:#0a2a42;--link:#8ccbe8;--accent-text:var(--accent);--map-op:0.22;--hero-op:0.22}
html.theme-light{--bg:#FFFFFF;--bg2:#eef5f9;--line:#c9dae5;--line2:#7e9aab;--text:#33505f;--dim:#4a6373;--fg:#00121f;--ink:#00263c;--shape:#FFFFFF;--link:#1b6e9c;--accent-text:#1b6e9c;--map-op:0.38;--map-filter:brightness(0);--hero-op:0.3}
.toggle{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px;border:1px solid var(--line2);background:transparent;color:var(--fg);font-size:11px;cursor:pointer;box-sizing:border-box}
.toggle:hover{border-color:var(--accent-text);color:var(--accent-text)}
html{scroll-behavior:smooth}
a{color:var(--link)}a:hover{color:var(--fg)}
.wrap{max-width:1280px;margin:0 auto;padding-inline:40px;box-sizing:border-box}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:0.14em}
.navlink{color:var(--fg);text-decoration:none;font-size:15px;padding:14px 4px}
.navlink:hover{color:var(--accent-text)}
.cta{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:500;text-decoration:none;box-sizing:border-box}
.cta:hover{background:var(--accent);color:#00121f}
.ghost{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 24px;border:1px solid var(--line2);color:var(--fg);text-decoration:none;font-size:12px;box-sizing:border-box}
.ghost:hover{border-color:var(--accent-text);color:var(--accent-text)}
.footlink{color:var(--text);text-decoration:none;font-size:12px;padding:14px 0}
.footlink:hover{color:var(--fg)}
.field{width:100%;box-sizing:border-box;height:52px;padding:0 16px;border:1px solid var(--line2);border-radius:0;font:inherit;font-size:16px;color:var(--fg);background:var(--bg)}
.field:focus{outline:2px solid var(--accent);outline-offset:1px}
.ln{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sh{fill:var(--shape);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.ac{fill:var(--accent);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.win{fill:var(--bg2);stroke:var(--ink);stroke-width:1}
.palm{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.route{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:6 8;animation:dash 1.6s linear infinite}
.drift{animation:drift 9s ease-in-out infinite alternate}
.drift2{animation:drift 13s ease-in-out infinite alternate-reverse}
.sail{animation:sail 14s linear infinite}
.bob{animation:bob 3s ease-in-out infinite}
.wave{animation:wave 4s ease-in-out infinite alternate}
.wave2{animation:wave 5s ease-in-out infinite alternate-reverse}
.spin{animation:spin 40s linear infinite}
.puff{fill:var(--ink);transform-box:fill-box;transform-origin:center;animation:puff 4s ease-out infinite;opacity:0}
.trolley{animation:trolley 8s ease-in-out infinite}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.blink{animation:blink 6s steps(1) infinite}
.shake{animation:shake 0.7s ease-in-out infinite}
.wavearm{animation:wavearm 1.6s ease-in-out infinite}
.step{display:flex;gap:16px;align-items:baseline;padding:14px 0 14px 20px;border:0;border-left:1px solid var(--line);background:none;color:var(--dim);font:inherit;font-size:24px;font-weight:300;text-align:left;cursor:pointer}
.step.on,.step:hover{color:var(--fg);border-left-color:var(--accent)}
.stage{width:100%;min-height:160px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border:1px solid var(--line2);background:var(--bg);color:var(--fg);font:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
.stage.on,.stage:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stage:focus-visible,.step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.span3{grid-column:span 3}
.arw{position:absolute;left:100%;top:50%;width:40px;height:12px;margin-top:-6px}
.arw path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 0.5s ease}
.diagram.built .arw path{stroke-dashoffset:0}
.diagram .b{opacity:0;transform:translateY(12px);transition:opacity 0.5s ease,transform 0.5s ease}
.diagram.built .b{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.diagram .b{opacity:1;transform:none;transition:none}.arw path{stroke-dashoffset:0;transition:none}}
@media (max-width:860px){.span3{grid-column:auto}.arw{display:none}.stage{min-height:0}}
.track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.track.rev{animation-direction:reverse}
.wall:hover .track{animation-play-state:paused}
.tile{flex:none;width:240px;height:280px;margin-right:12px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.tileimg{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}
.hr{fill:var(--ink);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
@media (max-width:860px){.wide{height:300px!important}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}}
@keyframes dash{to{stroke-dashoffset:-56}}
@keyframes drift{from{transform:translateX(-22px)}to{transform:translateX(22px)}}
@keyframes sail{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(140px);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes wave{from{transform:translate(-6px,0)}to{transform:translate(6px,2px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes puff{0%{transform:translate(0,0) scale(0.6);opacity:0}20%{opacity:0.85}100%{transform:translate(12px,-48px) scale(1.7);opacity:0}}
@keyframes trolley{0%,100%{transform:translateX(0)}50%{transform:translateX(-44px)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes blink{0%{fill:var(--bg2)}50%{fill:var(--accent)}}
@keyframes shake{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes wavearm{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-30deg)}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}.puff{opacity:0.6}}
@media (max-width:860px){
.wrap{padding-inline:20px}
.cols{grid-template-columns:minmax(0,1fr)!important}
.navlinks{display:none!important}
.h1{font-size:44px!important}
.h2{font-size:34px!important}
.big{font-size:28px!important}
.sec{padding-block:64px!important}
.hero{min-height:560px!important}
.cell{border-left:0!important;padding-left:0!important}
.maplabel{display:none!important}
.tlabel{display:none}
.toggle{padding:0 14px}
.cta{padding:0 14px}
}