:root{--abyss:#041b2c;--deep:#073b58;--mid:#0e6488;--surface:#39a6c8;--foam:#dff9ff;--sand:#eef3f2;--ink:#12344a;--muted:#607f8f;--coral:#ff8b66;--line:#a9cad5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#fff;background:var(--abyss);font-family:"Segoe UI","Microsoft YaHei UI",sans-serif;line-height:1.68}a{color:inherit;text-decoration:none}img{max-width:100%}.ocean-shell{width:min(1220px,calc(100% - 48px));margin-inline:auto}
.ocean-header{position:sticky;top:0;z-index:50;border-bottom:1px solid #22506b;background:rgba(4,27,44,.95);backdrop-filter:blur(14px)}.ocean-nav{min-height:70px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}.ocean-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900}.ocean-brand img{display:block;width:34px;height:34px;object-fit:contain}.ocean-links{display:flex;justify-content:center;gap:clamp(18px,3vw,38px);color:#9eb7c5;font-size:13px;font-weight:800}.ocean-links a:hover{color:#72d9ee}
.ocean-button{display:inline-flex;align-items:center;justify-content:center;min-width:170px;min-height:52px;padding:0 24px;border:1px solid var(--coral);border-radius:3px;color:#1f1b18;background:var(--coral);font-weight:900;white-space:nowrap;word-break:keep-all;writing-mode:horizontal-tb;transition:transform .2s ease,filter .2s ease}.ocean-button:hover{filter:brightness(1.06);transform:translateY(-2px)}.ocean-button--small{min-width:128px;min-height:40px;padding-inline:15px}.ocean-text-link{color:#0e7194;font-weight:900}a:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.sea-cross-section{overflow:hidden;background:#7cc7dd}.sea-stage{position:relative;min-height:820px;background:linear-gradient(180deg,#7cc7dd 0 31%,#1590b3 31.2% 48%,#0b5a7b 48.2% 70%,#07334e 70.2%)}.sea-title{position:absolute;z-index:8;top:60px;left:4%;width:61%;color:var(--ink)}.ocean-label{margin:0 0 12px;color:#167495;font-size:9px;font-weight:900;letter-spacing:.14em}.sea-title h1,.buoy-layout h2,.depth-layout h2,.course-layout h2,.fleet-copy h2,.harbor-layout h2,.storm-layout h2,.guide-layout h2,.faq-layout h2,.callout-layout h2{margin:0;font-family:"Arial Narrow","Microsoft YaHei UI",sans-serif;font-size:clamp(50px,6.3vw,84px);line-height:.96;letter-spacing:-.055em;text-wrap:balance}.sea-title>p:not(.ocean-label){max-width:590px;margin:23px 0;color:#386a80}.sea-surface{position:absolute;z-index:5;top:30%;right:-8%;left:-8%;height:40px;border-top:4px solid var(--foam);transform:rotate(-1deg)}.sea-surface i{position:absolute;top:-17px;width:150px;height:30px;border-radius:50%;border-top:4px solid rgba(255,255,255,.75)}.sea-surface i:nth-child(1){left:8%}.sea-surface i:nth-child(2){left:34%}.sea-surface i:nth-child(3){right:30%}.sea-surface i:nth-child(4){right:5%}
.navigation-route{position:absolute;z-index:4;top:190px;right:-3%;left:-3%;width:106%;height:300px}.navigation-route path{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:7 8;vector-effect:non-scaling-stroke}.navigation-route circle{fill:var(--coral);stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke}.buoy{position:absolute;z-index:7;text-align:center}.buoy i{display:block;width:14px;height:55px;margin:auto;border-radius:8px 8px 2px 2px;background:repeating-linear-gradient(0deg,var(--coral) 0 9px,#fff 9px 18px)}.buoy span{display:block;padding:4px 8px;color:#fff;background:#095675;font-size:8px}.buoy--a{top:285px;left:14%}.buoy--b{top:300px;left:38%}.buoy--c{top:302px;right:21%}
.navigation-window{position:absolute;z-index:8;top:330px;left:50%;width:220px;height:auto;margin:0;padding:0;border:8px solid #d5e7eb;border-radius:45%;background:#052e45;box-shadow:0 0 0 3px #557e8d,0 16px 40px rgba(0,0,0,.3);transform:translateX(-50%);overflow:visible;align-self:center}.navigation-window figcaption,.fleet-window figcaption{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #52798a;color:#91b3c0;font-size:8px}.navigation-window img,.fleet-window img{display:block;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0;object-fit:contain;object-position:center;clip-path:none;transform:none}
.compass-selector{position:absolute;z-index:7;right:7%;bottom:95px;width:210px;height:210px;border:1px solid #6d9bad;border-radius:50%;color:#91bac9}.compass-selector>span{position:absolute;font:800 9px Consolas,monospace}.compass-selector span:nth-child(1){top:8px;left:50%}.compass-selector span:nth-child(2){right:8px;top:50%}.compass-selector span:nth-child(3){bottom:8px;left:50%}.compass-selector span:nth-child(4){left:8px;top:50%}.compass-selector i{position:absolute;top:50%;left:50%;width:4px;height:75px;background:var(--coral);transform-origin:bottom;transform:translate(-50%,-100%) rotate(38deg)}.compass-selector b,.compass-selector small{position:absolute;left:0;width:100%;text-align:center}.compass-selector b{top:44%;color:#fff}.compass-selector small{top:57%;font-size:8px}.depth-scale{position:absolute;z-index:6;bottom:60px;left:3%;display:grid;gap:30px;color:#86b5c6;font:800 8px Consolas,monospace}.depth-scale span{padding-left:35px;border-top:1px solid #5a8ba0}.route-disclaimer{position:absolute;z-index:6;bottom:20px;left:3%;margin:0;color:#6ea0b3;font-size:8px}
.buoy-section{padding:clamp(105px,13vw,165px) 0;color:var(--ink);background:#f3f7f7}.buoy-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(50px,8vw,105px)}.buoy-layout h2,.depth-layout h2,.course-layout h2,.fleet-copy h2,.harbor-layout h2,.storm-layout h2,.guide-layout h2,.faq-layout h2{font-size:clamp(40px,5vw,68px)}.buoy-register{border-top:2px solid #315c70}.buoy-register article{display:grid;grid-template-columns:130px 1fr 1fr;gap:25px;padding:19px 0;border-bottom:1px solid var(--line)}.buoy-register b{color:#0d7397}.buoy-register span{font-weight:900}.buoy-register p{margin:0;color:var(--muted)}
.ocean-depths{padding:clamp(100px,12vw,150px) 0;background:#0b5372}.depth-layout>header{display:grid;grid-template-columns:.4fr 1.6fr;gap:38px;margin-bottom:60px}.depth-layout .ocean-label{color:#8de0ed}.depth-bands article{display:grid;grid-template-columns:100px 180px 1fr;gap:25px;padding:25px;border-top:1px solid #397f99}.depth-bands article:nth-child(2){background:#07445f}.depth-bands article:nth-child(3){background:#052f47}.depth-bands span{color:var(--coral);font-weight:900}.depth-bands h3,.depth-bands p{margin:0}.depth-bands p{color:#9fc2cf}
.course-section{padding:clamp(100px,12vw,150px) 0;color:var(--ink);background:#e9f2f3}.course-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(50px,8vw,105px)}.course-layout ol{list-style:none;margin:0;padding:0;border-left:2px dashed #75aabd}.course-layout li{position:relative;padding:0 0 30px 35px}.course-layout li::before{content:"";position:absolute;top:3px;left:-9px;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:var(--coral)}.course-layout span{color:#0d7397;font-size:9px;font-weight:900}.course-layout b{display:block;font-size:20px}.course-layout p{margin:5px 0;color:var(--muted)}
.fleet-section{padding:clamp(100px,12vw,150px) 0;color:var(--ink);background:#fff}.fleet-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(50px,8vw,100px);align-items:center}.fleet-window{align-self:center;height:auto;margin:0;padding:0;border:1px solid var(--line);border-radius:50px 5px 50px 5px;background:#e9f4f6;overflow:visible;transform:none}.fleet-copy>p:not(.ocean-label){color:var(--muted)}.fleet-copy nav{display:flex;flex-wrap:wrap;gap:6px;margin:27px 0}.fleet-copy nav a{padding:7px 11px;border:1px solid var(--line);color:#0d7397;font-size:9px;font-weight:900}
.harbor-section{padding:clamp(100px,12vw,150px) 0;background:#06344d}.harbor-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(50px,8vw,105px)}.harbor-layout .ocean-label{color:#82dceb}.harbor-layout dl{margin:0;border-top:1px solid #3b7189}.harbor-layout dl>div{display:grid;grid-template-columns:160px 1fr;gap:25px;padding:19px 0;border-bottom:1px solid #3b7189}.harbor-layout dt{color:#85ddec;font-weight:900}.harbor-layout dd{margin:0;color:#9fc1cf}
.storm-section{padding:clamp(100px,12vw,150px) 0;color:var(--ink);background:#e5edef}.storm-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(50px,8vw,105px)}.storm-layout>div{border-top:1px solid var(--line)}.storm-layout article{display:grid;grid-template-columns:160px 1fr 120px;gap:25px;padding:19px 0;border-bottom:1px solid var(--line)}.storm-layout span{font-weight:900}.storm-layout p{margin:0;color:var(--muted)}.storm-layout b{color:#0d7397;font-size:10px}.storm-layout>.ocean-text-link{grid-column:2}
.ocean-guides{padding:clamp(100px,12vw,150px) 0;color:var(--ink);background:#fff}.guide-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(50px,8vw,105px)}.guide-layout>div{border-top:1px solid var(--line)}.guide-layout article{display:grid;grid-template-columns:65px 1fr 1fr 55px;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)}.guide-layout span,.guide-layout a{color:#0d7397;font-weight:900}.guide-layout h3,.guide-layout p{margin:0}.guide-layout p{color:var(--muted)}.guide-layout a{text-align:right}
.ocean-faq{padding:clamp(100px,12vw,150px) 0;color:var(--ink);background:#e7f1f3}.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(50px,8vw,105px)}.faq-layout>div{border-top:1px solid var(--line)}.faq-layout details{border-bottom:1px solid var(--line)}.faq-layout summary{padding:20px 0;cursor:pointer;list-style:none;font-weight:900}.faq-layout summary::-webkit-details-marker{display:none}.faq-layout details p{margin:0 0 20px;color:var(--muted)}
.ocean-callout{padding:72px 0;background:#1488ae}.callout-layout{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end}.callout-layout .ocean-label{color:#c9f5ff}.callout-layout h2{max-width:17ch}.ocean-button--light{border-color:#fff;color:#0c698b;background:#fff}
.ocean-footer{padding:52px 0 22px;background:#031725}.footer-layout{display:grid;grid-template-columns:1.5fr .6fr .6fr;gap:46px}.footer-layout h3{margin:0 0 10px;color:#76d9ed;font-size:12px}.footer-layout>div>a:not(.ocean-brand){display:block;margin:7px 0;color:#93b2c0;font-size:12px}.footer-layout>div:first-child p{color:#93b2c0;font-size:12px}.copyright{grid-column:1/4;margin:20px 0 0;padding-top:18px;border-top:1px solid #27495c;color:#628292;font-size:10px}
@media(max-width:900px){.sea-title{width:70%}.navigation-window{width:180px}.buoy-layout,.course-layout,.fleet-layout,.harbor-layout,.storm-layout,.guide-layout,.faq-layout{grid-template-columns:1fr}.storm-layout>.ocean-text-link{grid-column:auto}.guide-layout article{grid-template-columns:65px 1fr}.guide-layout p{grid-column:2}.guide-layout a{grid-column:2;text-align:left}}
@media(max-width:680px){.ocean-shell{width:min(100% - 24px,1220px)}.ocean-nav{grid-template-columns:auto auto}.ocean-nav>.ocean-button{display:none}.ocean-links{grid-column:1/3;grid-row:2;justify-content:flex-start;overflow-x:auto;padding:10px 0}.sea-stage{min-height:1050px}.sea-title{top:50px;width:100%}.sea-title h1{font-size:clamp(44px,13vw,62px)}.sea-surface{top:36%}.navigation-route{top:300px}.buoy{display:none}.navigation-window{top:435px;width:165px}.compass-selector{right:50%;bottom:100px;width:180px;height:180px;transform:translateX(50%)}.depth-scale{display:none}.buoy-register article{grid-template-columns:1fr;gap:6px}.depth-layout>header{grid-template-columns:1fr}.depth-bands article{grid-template-columns:1fr;gap:6px}.storm-layout article{grid-template-columns:1fr;gap:6px}.guide-layout article{grid-template-columns:1fr}.guide-layout p,.guide-layout a{grid-column:auto}.callout-layout{grid-template-columns:1fr}.callout-layout .ocean-button{width:100%}.footer-layout{grid-template-columns:1fr 1fr}.footer-layout>div:first-child{grid-column:1/3}.copyright{grid-column:1/3}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ocean-button{transition:none}}
.navigation-window,.fleet-window{align-self:center;height:auto;padding:0;margin-top:0;margin-bottom:0;overflow:visible}.navigation-window img,.fleet-window img{display:block;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0;object-fit:contain;object-position:center;clip-path:none}