:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf6fb;background:#071826;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 95% 45% at 80% -7%,#13364e 0%,transparent 75%),#071826;min-height:100vh}button,select,input{font:inherit}button{cursor:pointer}a{color:inherit}.shell{max-width:1120px;margin:0 auto;padding:0 28px}.topbar{height:95px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff13}.brand{display:flex;gap:13px;align-items:center}.brand-icon{width:46px;height:46px;display:grid;place-items:center;background:#123e4d;color:#63efe0;border:1px solid #3ae6cd33;border-radius:14px}.brand-icon svg{width:31px}.brand strong{font-size:18px;letter-spacing:2px}.brand strong span{color:#64dcd1}.brand small{display:block;font-size:9px;color:#93aeb9;letter-spacing:2.4px;margin-top:5px}.top-actions{display:flex;align-items:center;gap:14px}.live-pill{display:flex;gap:8px;align-items:center;background:#102b35;border:1px solid #2b534f;border-radius:50px;padding:8px 12px;font-size:11px;font-weight:650;color:#98e5c9}.live-pill i{height:7px;width:7px;border-radius:50%;background:#60e9b4;box-shadow:0 0 10px #60e9b4}.live-pill.offline{border-color:#694d33;color:#f4bf79}.live-pill.offline i{background:#f3b366;box-shadow:none}.icon-button{border:1px solid #2a4656;border-radius:11px;background:#122d3b;color:#bddbe5;display:grid;place-items:center;width:35px;height:35px}.icon-button svg,.ghost-button svg,.primary-small svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.intro{display:flex;justify-content:space-between;align-items:center;padding:51px 0 35px}.eyebrow{font-size:11px;letter-spacing:2.2px;font-weight:750;color:#57dacc;display:flex;gap:9px;align-items:center}.eyebrow-line{height:1px;width:24px;background:#57dacc}.intro h1{font-size:clamp(48px,6vw,74px);letter-spacing:-3.9px;line-height:.99;margin:18px 0 19px;font-weight:750}.intro h1 em{font-style:normal;color:#6ce4db}.intro p{color:#9bb1c0;margin:0;font-size:14px;line-height:1.6}.intro-badge{width:152px;height:152px;margin-right:7%;opacity:.52;color:#447785}.intro-badge svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none}.card{background:#0d2433;border:1px solid #254052;border-radius:16px;box-shadow:0 12px 28px #0000000e}.location-panel{padding:23px 26px}.location-top,.location-selector,.location-bottom,.section-head,.map-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}.location-label{color:#70dfd3;font-size:10px;letter-spacing:1.5px;font-weight:750}.pin-mini{font-size:17px;vertical-align:middle;padding-right:5px}.muted{color:#8099a9}.tiny{font-size:11px}.location-selector{margin:18px 0 22px}.location-selector h2{margin:0;font-size:27px;letter-spacing:-.8px}.location-selector p{margin:5px 0 0;color:#8aa6b5;font-size:12px}.primary-small{background:#54e0cf;border:0;border-radius:9px;color:#082533;font-size:12px;font-weight:750;padding:11px 14px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}.primary-small:hover{background:#8ef4e8}.location-bottom{border-top:1px solid #ffffff16;padding-top:17px}.select-wrap{display:flex;gap:12px;align-items:center;font-size:11px;color:#829eaf}.select-wrap select{background:#183746;color:#f2fcff;padding:9px 28px 9px 12px;border:1px solid #365263;border-radius:8px;max-width:240px;outline:none}.tap-hint{font-size:11px;color:#71909e}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:19px 0 22px}.metric{padding:22px 20px 17px;min-width:0}.metric.accent{background:linear-gradient(140deg,#174d56,#0f323e);border-color:#367e81}.metric-heading{font-size:10px;letter-spacing:1.25px;font-weight:740;color:#9bb3c2;display:flex;align-items:center;gap:10px;white-space:nowrap}.metric-icon{font-size:24px;color:#62e4d8;font-weight:400;line-height:14px}.metric-value{margin:25px 0 3px;display:flex;align-items:baseline;gap:7px}.metric-value strong{font-size:41px;letter-spacing:-1.5px;line-height:1;font-weight:750}.metric-value span{font-size:16px;color:#b0c8d0}.metric-description{color:#a8d7d9;font-size:12px;font-weight:600;min-height:17px;margin-top:7px}.mid-dot{opacity:.5}.metric-foot{font-size:10px;color:#819eaa;margin-top:20px;line-height:1.4}.map-section{overflow:hidden}.section-head{padding:24px 26px 18px}.eyebrow.compact{letter-spacing:1.6px;font-size:10px}.section-head h2{font-size:20px;letter-spacing:-.35px;margin:8px 0 0}.ghost-button,.outline-button{background:#183847;border:1px solid #3b5968;color:#cce9ed;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:650;padding:10px 12px}.map-toolbar{display:flex;align-items:center;gap:21px;padding:0 26px 17px}.check-label{font-size:12px;color:#b1cbd4;display:flex;gap:7px;align-items:center;cursor:pointer}.check-label input{accent-color:#50dacc;width:15px;height:15px}.map-note{margin-left:auto;font-size:10px;color:#728f9c}.map-container{height:395px;position:relative;background:#173e4b}.map-container #map{height:100%;width:100%}.map-error{position:absolute;z-index:1000;inset:0;display:grid;place-items:center;background:#17313e;color:#dbe9ed}.map-error[hidden]{display:none}.map-legend{position:absolute;z-index:600;bottom:14px;left:14px;background:#0b2333e8;color:#bfd7df;display:flex;align-items:center;gap:8px;font-size:10px;padding:10px 12px;border:1px solid #ffffff1c;border-radius:9px;pointer-events:none}.legend-dot{width:9px;height:9px;background:#60e1d4;border-radius:50%;box-shadow:0 0 0 3px #57e3d54c}.legend-ship{color:#ffc877;margin-left:9px}.map-bottom{padding:20px 26px}.map-bottom #gps-status{font-size:13px;margin-top:7px;color:#b4d1d8}.position-data{display:flex;gap:26px}.position-data div{display:grid;gap:6px}.position-data span{font-size:9px;color:#83a0ad;letter-spacing:1px}.position-data strong{font-size:13px}.forecast-section,.ais-section{margin-top:22px;overflow:hidden}.chart-label-row{padding:0 26px;display:flex;gap:22px;font-size:11px;color:#9bb6c2}.line-key{display:inline-block;height:3px;width:17px;vertical-align:middle;margin-right:5px;border-radius:5px}.wave-key{background:#5ce3d2}.wind-key{background:#f6bb73}.forecast-chart{height:180px;padding:3px 14px 0 14px}.forecast-chart svg{display:block;width:100%;height:100%}.chart-grid{stroke:#ffffff12;stroke-dasharray:2 4}.chart-tick{fill:#7e9ba9;font-size:10px;font-family:inherit}.chart-line-wave{fill:none;stroke:#64e5d5;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.chart-line-wind{fill:none;stroke:#f4b774;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.forecast-footer{border-top:1px solid #ffffff12;padding:15px 26px;font-size:10px;color:#7e9eac}.empty-state{height:100%;display:grid;place-items:center;color:#8ca5b1;font-size:12px}.tag{color:#e2b77f;background:#664f302e;border:1px solid #a17d4c55;border-radius:50px;padding:7px 10px;font-size:10px;white-space:nowrap}.tag.connected{color:#9cebd5;background:#245e4b52;border-color:#4a9f81}.ais-content{padding:10px 28px 29px;display:flex;gap:30px;align-items:center}.radar-orbit{width:132px;height:132px;flex:none;border:1px solid #266271;border-radius:50%;background:repeating-radial-gradient(circle,#275c5a55 0 1px,transparent 1px 33px),conic-gradient(from 20deg,#4ee2bd24,transparent 70deg);position:relative}.radar-orbit:before,.radar-orbit:after{content:"";position:absolute;background:#2b5561}.radar-orbit:before{width:1px;height:100%;left:50%}.radar-orbit:after{width:100%;height:1px;top:50%}.radar-center{position:absolute;z-index:1;top:calc(50% - 10px);left:calc(50% - 8px);font-size:18px;color:#79e9ce}.ais-content h3{margin:0 0 9px;font-size:16px}.ais-content p{margin:0 0 17px;color:#98b2be;font-size:12px;line-height:1.6;max-width:620px}.ais-list{padding:0 26px 20px;display:grid;gap:6px}.ais-row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #ffffff12;padding:12px 0;font-size:12px;color:#c6dae0}.ais-row small{color:#85a8b3}.settings{border-top:1px solid #ffffff18;padding:0 26px 18px;color:#a7c1ca;font-size:12px}.settings summary{padding:16px 0;cursor:pointer;color:#bddfe4}.settings p{line-height:1.6;margin:0 0 12px}.settings code{font-size:10px;color:#c9f7e9;overflow-wrap:anywhere}.input-row{display:flex;gap:8px}.input-row input{background:#071e2b;border:1px solid #385463;min-width:0;flex:1;border-radius:8px;color:#fff;padding:11px;font-size:12px}.text-button{background:transparent;border:0;color:#81c9c5;font-size:11px;padding:12px 0}.error{color:#f0a68f;min-height:12px}.quick-section{margin:33px 0}.quick-section .section-head{padding:0 0 20px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick{text-decoration:none;padding:17px 15px;display:flex;align-items:center;gap:10px;min-width:0}.quick:hover{border-color:#59c8be}.quick-symbol{display:grid;place-items:center;border-radius:11px;background:#153c45;color:#63e0cc;width:37px;height:37px;flex:none;font-size:21px}.quick strong{display:block;font-size:12px;white-space:nowrap}.quick small{display:block;color:#819eab;font-size:10px;margin-top:4px;white-space:nowrap}.quick .arr{color:#62d6c7;margin-left:auto;align-self:flex-start;font-size:14px}footer{border-top:1px solid #ffffff19;padding:26px 0 38px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#829fab}footer div{white-space:nowrap;letter-spacing:1px;font-weight:700;color:#b3d0da}footer div span{color:#50cbbb}footer p{margin:0;text-align:right;max-width:580px;line-height:1.5}footer a{color:#a7c7cb}.weather-pin{height:21px;width:21px;border-radius:50%;background:#70f2d7;border:4px solid #153c45;box-shadow:0 0 0 2px #66e5d5,0 0 20px #74ffb255}.gps-pin{height:24px;width:24px;background:#ffd08b;border:3px solid #fff;border-radius:4px;transform:rotate(45deg);box-shadow:0 0 15px #fec481b2}.port-pin{height:9px;width:9px;border:2px solid #f6dbc0;border-radius:50%;background:#133b53}.leaflet-container{font-family:inherit!important;background:#183e50!important}.leaflet-control-attribution{font-size:9px!important}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0e2c3e!important;color:#f0f6f9!important}.leaflet-popup-content{font-size:12px!important}#toast{position:fixed;z-index:9999;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,30px);background:#c5f9ec;color:#0a2734;box-shadow:0 10px 30px #0006;padding:12px 18px;border-radius:10px;max-width:calc(100vw - 32px);min-width:200px;text-align:center;font-size:12px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}#toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:830px){.metrics{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}.intro-badge{margin-right:1%}}@media(max-width:560px){.shell{padding:0 15px}.topbar{height:76px}.brand-icon{width:38px;height:38px}.brand strong{font-size:14px;letter-spacing:1px}.brand small{letter-spacing:1.3px;font-size:8px}.live-pill{padding:7px;font-size:10px}.top-actions{gap:8px}.intro{padding:35px 0 27px}.intro h1{font-size:55px;letter-spacing:-3px;margin:15px 0}.intro p{font-size:12px;max-width:290px}.intro-badge{position:absolute;right:18px;top:128px;width:85px;height:85px;opacity:.21}.location-panel{padding:20px}.location-selector{align-items:flex-end}.location-selector h2{font-size:23px}.location-selector p{font-size:11px}.primary-small{padding:10px;font-size:11px}.location-bottom{align-items:start;flex-direction:column;gap:9px}.select-wrap{justify-content:space-between;width:100%}.select-wrap select{max-width:70%;min-width:0}.tap-hint{align-self:flex-end}.metrics{gap:10px;margin:12px 0 16px}.metric{padding:17px 15px 14px}.metric-heading{font-size:9px;letter-spacing:.6px}.metric-icon{font-size:19px}.metric-value{margin-top:22px}.metric-value strong{font-size:35px}.metric-foot{margin-top:16px}.section-head{padding:20px 16px 16px}.section-head h2{font-size:18px}.map-toolbar{padding:0 16px 13px;gap:14px}.map-note{display:none}.map-container{height:350px}.map-bottom{padding:17px 16px}.position-data{gap:12px}.position-data span{font-size:8px}.position-data strong{font-size:11px}.chart-label-row{padding:0 16px}.forecast-footer{padding:13px 16px}.ais-content{padding:12px 18px 21px;gap:15px}.radar-orbit{width:88px;height:88px}.ais-content h3{font-size:14px}.ais-content p{font-size:11px}.settings{padding:0 16px 12px}.quick-grid{gap:9px}.quick{padding:12px 10px}.quick-symbol{width:32px;height:32px}.quick strong{font-size:11px}.quick small{font-size:9px}.quick .arr{display:none}footer{display:block}footer p{text-align:left;margin-top:9px}}@media(max-width:360px){.live-pill span{display:none}.intro h1{font-size:47px}.location-selector{align-items:start;flex-direction:column}.metric-heading{font-size:8px}.metric-value strong{font-size:31px}}

/* AIS vessel symbol, independently rotated to match reported course. */
.ais-ship-icon{font-size:22px;line-height:22px;color:#ffc06e;text-shadow:0 1px 4px #001a27,0 0 10px #ffae4e55;transform-origin:50% 50%;text-align:center}
.leaflet-container img.leaflet-tile{max-width:none!important;max-height:none!important}

/* v4 — Model-based wind particles above the navigable Leaflet map. */
.map-container { isolation:isolate; }
#wind-canvas {
  position:absolute;inset:0;z-index:450;pointer-events:none;
  width:100%;height:100%;display:block;opacity:.97;
}
#wind-canvas[hidden],.wind-field-label[hidden]{display:none!important}
.wind-field-label {
  position:absolute;z-index:550;right:12px;bottom:14px;
  max-width:min(57%,260px);display:flex;gap:7px;align-items:center;
  border:1px solid #84cbbb65;background:#092a38e8;color:#c3f4e9;
  box-shadow:0 5px 18px #05202e55;border-radius:8px;padding:8px 10px;
  font-size:10px;font-weight:600;line-height:1.3;pointer-events:none;
}
.wind-pulse{width:6px;height:6px;border-radius:50%;background:#76f4cf;box-shadow:0 0 9px #76f4cf;flex:none}
.wind-toggle{color:#abeee0;font-weight:650}

/* Shorten the hero and data cards on smaller screens so the marine map is
   accessible without scrolling through an oversized splash screen. */
@media(max-width:830px) {
  .intro{padding:23px 0 20px}
  .intro h1{font-size:44px;margin:10px 0;letter-spacing:-2px}
  .intro-badge{width:95px;height:95px}
}
@media(max-width:560px) {
  .shell{padding:0 12px}
  .topbar{height:60px}
  .brand{gap:8px}
  .brand-icon{width:32px;height:32px;border-radius:10px}
  .brand-icon svg{width:21px}
  .brand strong{font-size:13px;letter-spacing:.6px}
  .brand small{font-size:7px;letter-spacing:.7px;margin-top:2px}
  .live-pill{padding:6px 9px;font-size:9px}
  .icon-button{width:31px;height:31px}
  .intro{padding:12px 1px 10px;min-height:0}
  .intro h1{font-size:26px;letter-spacing:-.9px;line-height:1.12;margin:0}
  .intro h1 br{display:none}
  .intro h1 em:before{content:' ';white-space:pre}
  .intro .eyebrow,.intro p,.intro-badge{display:none}
  .location-panel{padding:12px 13px 11px;border-radius:13px}
  .location-top{margin-bottom:6px}
  .location-label{font-size:9px;letter-spacing:.7px}
  .location-selector h2{font-size:18px;line-height:1.2}
  .location-selector p{font-size:10px;margin-top:4px}
  .primary-small{padding:8px 9px;font-size:10px}
  .primary-small svg{width:14px;height:14px}
  .location-bottom{flex-direction:row;align-items:center;gap:6px;margin-top:10px}
  .select-wrap{flex:1;gap:5px;font-size:10px}
  .select-wrap select{max-width:74%;font-size:11px;padding:7px 21px 7px 7px}
  .tap-hint{display:none}
  .metrics{gap:8px;margin:9px 0 12px}
  .metric{padding:12px 13px 10px;min-height:103px;border-radius:13px}
  .metric-heading{font-size:9px;letter-spacing:.55px;gap:6px}
  .metric-icon{font-size:16px;line-height:12px}
  .metric-value{margin:9px 0 3px;gap:5px}
  .metric-value strong{font-size:30px;letter-spacing:-.6px}
  .metric-value span{font-size:12px}
  .metric-description{font-size:10px;min-height:0;line-height:1.3;margin-top:4px}
  .metric-foot{display:none}
  .map-section{border-radius:14px}
  .section-head{padding:14px 12px 11px}
  .section-head h2{font-size:16px;margin-top:4px}
  .eyebrow.compact{font-size:9px;letter-spacing:1px}
  .ghost-button{padding:7px 8px;font-size:10px}
  .ghost-button svg{width:14px;height:14px}
  .map-toolbar{padding:0 12px 12px;column-gap:14px;row-gap:9px;flex-wrap:wrap}
  .check-label{font-size:11px;gap:5px}
  .check-label input{width:16px;height:16px}
  .map-container{height:385px}
  .map-container #map{min-height:385px}
  .map-legend{font-size:9px;gap:5px;left:9px;bottom:9px;padding:8px}
  .wind-field-label{font-size:9px;right:9px;bottom:9px;padding:7px;max-width:51%}
  .map-bottom{padding:11px 12px}
  .map-bottom #gps-status{font-size:11px}
  .forecast-section,.ais-section{margin-top:13px}
  .quick-section{margin:20px 0}
}
@media(max-width:380px){
  .location-selector h2{font-size:16px}
  .metrics{gap:6px}
  .metric{padding:10px}
  .metric-value strong{font-size:27px}
  .brand strong{font-size:12px}
  .map-toolbar{column-gap:9px}
  .check-label{font-size:10px}
}

/* v6 — persistent AIS favorite, shown even after an AIS disconnect. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.favorite-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-top:1px solid #ffffff18;background:linear-gradient(110deg,#172f40,#102635)}
.favorite-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.favorite-heading{color:#f9c66a;letter-spacing:1.4px;font-size:10px;font-weight:750}
.favorite-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favorite-info #favorite-status{color:#9fc0cd;font-size:10px;line-height:1.3}
.favorite-info #favorite-status.stale{color:#dfba92}
.favorite-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
.favorite-actions input{width:142px;min-width:0;max-width:100%;background:#08202c;border:1px solid #486776;color:#f4fbfc;padding:9px 8px;border-radius:8px;font-size:11px}
.favorite-actions button,.favorite-popup-button,.ais-mark-btn{border:1px solid #537480;border-radius:8px;background:#163f4d;color:#d9f5f5;padding:9px;font-size:11px;font-weight:650}
.favorite-actions button:disabled{opacity:.35;cursor:default}
.favorite-actions .fav-save{background:#d9a94f;color:#111f27;border-color:#fbd47e}
.favorite-actions .fav-remove{color:#e1a9a9}
.favorite-actions #favorite-follow[aria-pressed="true"]{color:#0d252a;background:#80e3cb;border-color:#80e3cb}
.favorite-popup-button{margin-top:9px;cursor:pointer}
.ais-mark-btn{min-width:34px;color:#f3c777;font-size:19px;padding:3px 9px}
.favorite-ship-icon{width:44px;height:44px;border-radius:50%;border:2px solid #f9da85;background:#f3bd51d9;color:#1c2e36;display:flex;align-items:center;justify-content:center;gap:1px;box-shadow:0 0 0 5px #eec87235,0 0 18px #f8cd78;white-space:nowrap}
.favorite-ship-icon.is-stale{background:#304e58;border-color:#cbb68a;color:#e1c78a;box-shadow:0 0 0 4px #eec87222;opacity:.89}
.favorite-star{font-size:21px;line-height:1}
.favorite-direction{display:inline-block;font-size:13px}
@media(max-width:830px){.favorite-panel{display:block}.favorite-info{margin-bottom:9px}.favorite-actions{justify-content:flex-start}}
@media(max-width:560px){.favorite-panel{padding:12px;gap:8px}.favorite-actions{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}.favorite-actions input{width:100%;grid-column:span 2}.favorite-actions .fav-save{grid-column:span 1}.favorite-actions #favorite-center,.favorite-actions #favorite-follow,.favorite-actions #favorite-remove{grid-column:span 1}.favorite-actions button{padding:9px 5px;font-size:10px}.favorite-heading{font-size:9px}}