@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#030b0e;--ink:#ecebe2;--muted:#9bacae;--line:rgba(191,217,207,.18);--cyan:#70e3e2;--gold:#b49a6b;--panel:rgba(5,14,17,.91)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--bg);font-family:'DM Sans',Arial,sans-serif;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}#app{min-height:100vh;position:relative;overflow:hidden}.grain{position:fixed;inset:0;z-index:30;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.81' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E")}.site-header{height:87px;padding:0 3.5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(150,183,174,.13);position:relative;z-index:15;background:#030b0de8}.brand{display:flex;gap:15px;align-items:center;color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.15em;font-weight:600;white-space:nowrap}.brand strong{font-weight:700;letter-spacing:.18em}.brand-separator{color:var(--gold);padding:0 10px}.brand-logo{width:auto;height:26px;display:block;flex:0 0 auto}.mobile-menu-toggle{display:none;border:1px solid rgba(127,215,211,.35);background:rgba(7,21,25,.82);color:#d9e8e2;padding:9px 12px;font-size:10px;font-weight:700;letter-spacing:.18em}.navigation{height:100%;display:flex;gap:36px;align-items:stretch}.nav-link{position:relative;color:#5e7979;background:none;border:0;font-size:10px;letter-spacing:.14em;font-weight:700;display:flex;align-items:center;gap:9px;transition:color .25s}.nav-link span{color:#9caead}.nav-link.active,.nav-link:hover,.nav-link.active span{color:var(--cyan)}.nav-link.active:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;border-bottom:2px solid var(--cyan)}.nav-count{font-size:9px;border:1px solid #49676b;padding:1px 4px}.header-status{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.15em;color:#a7c5bd}.header-status i,.beacon{width:5px;height:5px;background:#7ae3be;border-radius:50%;box-shadow:0 0 12px #69c7b8;display:inline-block;flex-shrink:0}.viewport{height:calc(100svh - 116px);min-height:630px;position:relative;overflow:hidden;background:#030b0f}.viewport:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(2,9,11,.90) 0%,rgba(2,9,11,.52) 18%,transparent 42%,transparent 72%,rgba(2,9,11,.45) 100%),linear-gradient(0deg,rgba(2,9,11,.9) 0%,transparent 18%,transparent 85%,rgba(2,9,11,.28) 100%)}.map-scene{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none;overflow:hidden}.map-scene.visible{opacity:1;pointer-events:auto}.map-scene svg{width:100%;height:100%;display:block}.land-body{fill:url(#landFill);stroke:#9e8a62;stroke-opacity:.7;stroke-width:1.1}.coast-edge{fill:none;stroke:#bca376;stroke-width:1.35;stroke-opacity:.82}.coast-edge path{filter:drop-shadow(0 0 4px rgba(197,151,85,.33))}.beach-lines{stroke:#a68c5b;stroke-opacity:.45;fill:none;stroke-width:5}.river-cut{stroke:#061820;stroke-width:19;fill:none;stroke-linecap:round}.river-cut path+path{stroke:#817657;stroke-width:1;opacity:.6}.urban-lines{stroke:#968568;stroke-opacity:.23;stroke-width:.7;fill:none}.urban-lines .building{stroke:#938566;stroke-opacity:.31;fill:#151c19;fill-opacity:.42}.urban-lines .street{stroke:#968568;stroke-opacity:.35;stroke-width:1.35}.marina-docks path{fill:none;stroke:#b2aaa0;stroke-opacity:.7;stroke-width:2.2}.marina-docks .finger{stroke:#aca99d;stroke-opacity:.72;stroke-width:1.1}.marina-docks .boat{stroke:#dedbc4;stroke-opacity:.55;stroke-width:.75}.breakwaters path{fill:none;stroke:#94815f;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.72}.breakwaters .breakwater-center{stroke:#ddc493;stroke-width:1.2;opacity:.95}.quay-details{stroke:#ae976d;stroke-width:2;fill:none;opacity:.4}.water-ripple path{stroke:#1a6372;stroke-width:1;stroke-opacity:.27;fill:none}.water-ripple{animation:currentPulse 12s ease-in-out infinite alternate}.current-lines path{stroke:#3fc6d3;stroke-opacity:.4;stroke-width:.8;fill:none;stroke-dasharray:4 14;animation:driftDash 18s linear infinite}.current-lines path:nth-child(2n){animation-duration:24s;stroke-opacity:.27}.current-lines path:nth-child(3n){animation-duration:33s;stroke-opacity:.18}.release-object{filter:drop-shadow(0 0 6px rgba(85,225,220,.8))}.port-map-labels,.ocean-map-labels{font-family:'Barlow Condensed',sans-serif}.map-keyword{font-size:25px;letter-spacing:.24em;font-weight:600;fill:#c5c6b3}.map-subtitle{font-size:11px;letter-spacing:.12em;fill:#c0aa7f}.label-rule{stroke:#b49a6b;stroke-width:.75;fill:none}.water-label{font-size:28px;letter-spacing:.36em;fill:#2d808e;opacity:.38}.secondary-label{font-size:16px;letter-spacing:.22em}.map-dim-label{font-size:12px;letter-spacing:.15em;fill:#9b9178;opacity:.8}.plot-marks{fill:none;stroke:#77c7c7;stroke-opacity:.4;stroke-width:1}.left-composition{position:absolute;top:18%;left:3.5%;z-index:5;pointer-events:none}.eyebrow{font-size:9px;font-weight:700;letter-spacing:.21em;color:var(--gold);display:flex;gap:12px;align-items:center;text-transform:none}.small-line{width:23px;border-top:1px solid #8f7652}.left-composition h1{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(95px,12vw,204px);font-weight:700;line-height:.89;letter-spacing:-.016em;margin:18px 0 20px;color:#e2e1d4;text-shadow:0 0 34px rgba(2,9,10,.55)}.title-cross{font-family:Arial;font-size:.13em;font-weight:400;vertical-align:top;margin-left:10px;color:var(--cyan);letter-spacing:0}.title-subfr{margin:-6px 0 16px;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}.tagline{font-size:clamp(13px,1.35vw,17px);letter-spacing:.17em;font-weight:700;line-height:1.75;margin:0}.intro{margin-top:24px;font-size:12px;line-height:1.95;color:#9ab3b5;letter-spacing:.015em;max-width:370px}.micro-guide{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.micro-guide span{border:1px solid rgba(188,163,118,.35);padding:6px 9px;font-size:9px;letter-spacing:.14em;color:#c4cbbf;background:rgba(7,21,25,.35)}.release-panel,.tracking-panel,.my-objects-panel{position:absolute;right:3.5%;top:13%;z-index:8;width:clamp(320px,27vw,420px);padding:29px 30px 22px;background:var(--panel);border:1px solid rgba(178,193,173,.23);box-shadow:0 16px 70px #0009;backdrop-filter:blur(19px);transition:opacity .25s,transform .25s;max-height:calc(100% - 100px);overflow-y:auto;scrollbar-color:#385253 transparent;scrollbar-width:thin}.hidden{display:none!important}.panel-topline{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--gold);letter-spacing:.19em;font-weight:700;padding-bottom:22px;border-bottom:1px solid var(--line)}.tiny-icon{color:var(--cyan);font-size:19px;font-weight:400}.release-panel h2,.tracking-panel h2,.my-objects-panel h2{font:700 47px/.9 'Barlow Condensed',sans-serif;letter-spacing:.02em;margin:26px 0 16px}.period{color:var(--cyan)}.panel-description{font-size:12px;line-height:1.75;color:#a5b6b3;margin:0 0 12px}.panel-helper{font-size:10px;line-height:1.7;color:#8ea6a3;margin:0 0 24px}.release-panel form>label,.option-label{display:flex;justify-content:space-between;color:#bec9be;font-size:9px;font-weight:700;letter-spacing:.19em;margin-top:16px;margin-bottom:9px}.release-panel form>label span{color:#607c7c}.release-panel input[type=text],.release-panel #objectName{display:block;width:100%;padding:12px 13px;background:#071519;border:1px solid #405050;border-radius:0;outline:none;color:#ebf3ea;font:600 17px 'Barlow Condensed',sans-serif;letter-spacing:.15em;text-transform:uppercase;transition:border .25s}.release-panel #objectName:focus{border-color:var(--cyan)}.color-options,.symbol-options{border:0;margin:0;padding:0;display:flex;gap:13px}.color-choice input,.symbol-options input{position:absolute;opacity:0;width:0;height:0}.color-choice{cursor:pointer;padding:5px;border:1px solid transparent;display:inline-flex}.color-choice:has(input:checked){border-color:#aac2b9}.color-choice:has(input:focus-visible){outline:2px solid var(--cyan)}.swatch{width:24px;height:24px;display:inline-block}.swatch.cyan{background:#70e3e2}.swatch.amber{background:#d9ac67}.swatch.coral{background:#f07a76}.swatch.silver{background:#ced5d0}.symbol-options label{cursor:pointer;flex:1;position:relative}.symbol-options label span{height:37px;border:1px solid #2e4344;display:flex;align-items:center;justify-content:center;color:#899a97;font-size:16px}.symbol-options input:checked+span{border-color:#92d4cb;color:var(--cyan);background:#102326}.symbol-options input:focus-visible+span{outline:2px solid var(--cyan)}.release-btn{border:0;background:#b8d8cc;color:#071316;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;font-weight:800;letter-spacing:.13em;padding:19px 17px;width:100%;margin-top:26px;transition:background .2s,transform .2s}.release-btn:hover:not(:disabled){background:#79e6d8;transform:translateY(-2px)}.release-btn:disabled{opacity:.6;cursor:wait}.arrow-up{font-size:21px;line-height:.4}.panel-foot{display:flex;justify-content:space-between;margin-top:22px;font-size:8px;letter-spacing:.15em;color:#779092}.tracking-panel h2{font-size:58px;word-break:break-word;line-height:1}.tracking-position{color:var(--gold);font-size:10px;letter-spacing:.15em}.tracker-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;padding-bottom:26px;border-bottom:1px solid var(--line);gap:12px}.tracker-stats>div{display:flex;flex-direction:column;gap:10px}.tracker-stats small{font-size:9px;letter-spacing:.14em;color:#9fafa9}.tracker-stats strong{font:600 34px 'Barlow Condensed',sans-serif;letter-spacing:.06em;color:#e1e8df}.tracker-line{padding:16px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.tracker-line span{font-size:9px;letter-spacing:.15em;color:#859996}.tracker-line strong{font-size:10px;letter-spacing:.09em;font-weight:600;color:#cbd8cf;text-align:right}.tracking-note{font-size:10px;line-height:1.7;color:#748f90;margin-top:17px}.secondary-btn{background:#9bded3}.ghost-btn{border:1px solid #3b5554;color:#a5c5bc;background:transparent;width:100%;text-align:left;padding:15px;font-size:10px;letter-spacing:.12em;margin-top:12px}.ghost-btn:hover{border-color:var(--cyan)}.text-btn{border:0;background:none;color:#b6ccc3;font-size:16px}.objects-list{display:flex;flex-direction:column;gap:8px}.object-row{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:14px 12px;background:#0a1a1d;border:1px solid #284245;color:#dce5db;width:100%;gap:10px}.object-row:hover{border-color:var(--cyan)}.object-row strong{display:block;font-size:11px;letter-spacing:.15em}.object-row small{display:block;color:#859d9b;margin-top:6px;letter-spacing:.1em;font-size:9px}.object-row .object-mark{font-size:20px}.empty-text{font-size:12px;color:#91a7a1;line-height:1.6}.scene-bottom-left,.scene-bottom-center,.scene-bottom-right{position:absolute;bottom:33px;z-index:6;display:flex;align-items:center;gap:13px;font-size:9px;font-weight:600;letter-spacing:.16em;color:#a9b5af}.scene-bottom-left{left:3.5%}.scene-bottom-center{left:50%;transform:translateX(-50%);color:#6d8f91}.scene-bottom-right{right:3.5%;color:#899b9d}.tiny-divider{height:12px;border-left:1px solid #516c6e}.vertical-index{position:absolute;z-index:5;left:20px;top:48%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:8px;letter-spacing:.23em;color:#677d7b}.disclaimer{height:29px;display:flex;justify-content:space-between;align-items:center;padding:0 3.5%;font-size:8px;letter-spacing:.12em;color:#6b8485;background:#030b0d;border-top:1px solid rgba(135,177,163,.09)}.toast{position:absolute;z-index:50;left:50%;bottom:85px;transform:translate(-50%,18px);background:#122226;border:1px solid #749b94;color:#d9e8e2;padding:12px 18px;font-size:11px;letter-spacing:.06em;opacity:0;pointer-events:none;transition:all .35s;text-align:center;max-width:85%}.toast.show{opacity:1;transform:translate(-50%,0)}.transition-cover{position:absolute;inset:0;background:#020a0d;z-index:14;display:flex;opacity:0;pointer-events:none;align-items:center;justify-content:center;flex-direction:column;transition:opacity .8s}.transition-cover.active{opacity:1;pointer-events:auto}.transition-cover span{font:700 clamp(42px,7vw,100px)/1 'Barlow Condensed',sans-serif;letter-spacing:.14em}.transition-cover small{color:var(--cyan);font-size:9px;letter-spacing:.35em;margin-top:20px}.transition-rule{width:70px;border-top:1px solid var(--gold);margin-bottom:35px}.atlantic-grid{stroke:#3f6470;stroke-opacity:.18;stroke-width:.9;fill:none}.atlantic-land path{fill:url(#atlanticLand);stroke:#ab966b;stroke-opacity:.7;stroke-width:1}.atlantic-streams path{fill:none;stroke:#178999;stroke-opacity:.32;stroke-width:.7;stroke-dasharray:4 13;animation:driftDash 22s linear infinite}.atlantic-streams path:nth-child(2n){stroke-opacity:.15;animation-duration:37s}.atlantic-traces path{fill:none;stroke:#85dcd4;stroke-width:2.1;stroke-opacity:.85;filter:drop-shadow(0 0 5px #54b5b788)}.atlantic-traces .preview{stroke-dasharray:5 7;opacity:.55;stroke-width:1.1}.atlantic-traces .origin-line{stroke:#ccaa72;stroke-width:1;opacity:.5}.ocean-map-labels{fill:#517279;letter-spacing:.32em;font-size:26px;opacity:.45}.ocean-map-labels .ocean-secondary{fill:#a89a75;font-size:17px;letter-spacing:.24em}.ocean-marker{cursor:pointer}.ocean-marker .ring{fill:none;stroke:#70e3e2;stroke-width:1;opacity:.65}.ocean-marker .core{fill:#70e3e2;filter:drop-shadow(0 0 5px #70e3e2)}.ocean-marker text{font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:.15em;fill:#dceee6}.ocean-origin{fill:#dab877}.ocean-origin-label{font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.14em;fill:#adbdad}@keyframes driftDash{to{stroke-dashoffset:-180}}@keyframes currentPulse{from{opacity:.6}to{opacity:1}}
@media(max-width:1150px){.header-status{display:none}.navigation{gap:15px}.release-panel,.tracking-panel,.my-objects-panel{right:3%;width:335px}.left-composition{left:4%;top:18%}.left-composition h1{font-size:clamp(90px,12vw,148px)}.intro{max-width:270px}.scene-bottom-center{display:none}}
@media(max-width:730px){.site-header{height:65px;padding:0 5%;display:grid;grid-template-columns:1fr auto;gap:10px}.brand{font-size:10px;gap:11px}.brand-logo{height:20px}.brand-separator{padding:0 5px}.mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;justify-self:end}.navigation{display:none;position:absolute;top:64px;left:5%;right:5%;height:auto;flex-direction:column;gap:0;align-items:stretch;padding:8px;background:rgba(6,16,18,.96);border:1px solid rgba(146,212,203,.22);box-shadow:0 14px 45px rgba(0,0,0,.38)}#app.nav-open .navigation{display:flex}.nav-link{font-size:10px;letter-spacing:.12em;padding:14px 10px;justify-content:space-between;border-bottom:1px solid rgba(127,215,211,.08)}.nav-link:last-child{border-bottom:0}.nav-link span:not(.nav-count){display:inline}.nav-count{margin-left:8px}.header-status{display:none}.viewport{height:auto;min-height:calc(100svh - 94px);padding:42svh 0 36px;display:block}.map-scene{inset:0 0 auto;height:38svh;min-height:260px}.map-scene svg{height:100%}.port-scene svg{width:100%;transform:none}.ocean-scene svg{width:155%;transform:translateX(-24%)}.viewport:after{background:linear-gradient(180deg,rgba(2,9,11,.08),rgba(2,9,11,.26) 16%,rgba(2,9,11,.70) 45%,#030b0f 64%)}.left-composition{position:relative;top:auto;left:auto;margin:0 5%;z-index:5}.left-composition h1{font-size:clamp(95px,23vw,145px);margin:13px 0 8px}.title-subfr{font-size:11px;letter-spacing:.28em;margin:0 0 14px}.tagline{font-size:11px;line-height:1.6}.intro{margin-top:12px;font-size:11px;line-height:1.75;max-width:none}.micro-guide{margin-top:14px}.micro-guide span{font-size:8px;padding:6px 8px}.release-panel,.tracking-panel,.my-objects-panel{position:relative;top:auto;right:auto;margin:14px 5% 40px;width:90%;z-index:7;max-height:none;padding:22px}.release-panel h2,.tracking-panel h2{font-size:41px;margin-top:18px}.scene-bottom-left{bottom:17px;left:5%;font-size:8px}.scene-bottom-center{display:none}.scene-bottom-right{display:none}.vertical-index{display:none}.disclaimer{height:auto;min-height:29px;padding:7px 5%;font-size:7px;line-height:1.5;gap:8px}.disclaimer span{white-space:nowrap}.ocean-scene.visible ~ .left-composition .micro-guide{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ADRIFT v0.2 — geographically grounded, highly reduced nautical cartography.
   Harbor viewBox: 600 x 337, reconstructed from supplied reference; not for navigation. */
.port-scene .land-body{fill:url(#landFill);stroke:#c1a16b;stroke-opacity:.6;stroke-width:.45}
.port-scene .coast-edge{stroke:#d1b17a;stroke-width:.5;stroke-opacity:.9}
.port-scene .coast-edge path{filter:drop-shadow(0 0 1.5px rgba(216,166,89,.26))}
.port-scene .beach-lines{stroke:#d1a769;stroke-width:2.1;stroke-opacity:.18}
.port-scene .urban-lines{stroke-width:.25;stroke-opacity:.17}
.port-scene .urban-lines .street{stroke-width:.48;stroke-opacity:.28}
.port-scene .urban-lines .building{stroke-width:.24;stroke-opacity:.17;fill-opacity:.09}
.port-scene .marina-docks path{stroke-width:.85;stroke-opacity:.83}
.port-scene .marina-docks .finger{stroke-width:.5;stroke-opacity:.95}
.port-scene .marina-docks .boat{stroke-width:.42;stroke-opacity:.45}
.port-scene .breakwaters path{stroke:#ac9b7a;stroke-width:2.8;opacity:.95;stroke-linecap:round;stroke-linejoin:round}
.port-scene .breakwaters .breakwater-center{stroke:#e8c591;stroke-width:.35;opacity:.95}
.port-scene .water-ripple path{stroke-width:.29;stroke:#1c7a87;opacity:.23}
.port-scene .current-lines path{stroke-width:.26;stroke-dasharray:1.2 5;stroke:#40cbd2;stroke-opacity:.27}
.port-scene .map-keyword{font-size:9.2px;letter-spacing:1.3px}
.port-scene .map-subtitle{font-size:3.4px;letter-spacing:.45px}
.port-scene .label-rule{stroke-width:.3;opacity:.5}
.port-scene .water-label{font-size:8px;letter-spacing:1.7px;opacity:.28}
.port-scene .secondary-label{font-size:4.7px}
.port-scene .map-dim-label{font-size:4.6px;letter-spacing:.6px}
.port-scene .plot-marks{stroke-width:.35}
.port-scene .port-bridge path{fill:none;stroke:#ccb48b;stroke-width:1.8;opacity:.8}
.port-scene .release-object{filter:drop-shadow(0 0 2px #4ceae3b8)}
.ocean-scene .atlantic-land path{fill:url(#atlanticLand);stroke:#bca274;stroke-opacity:.72;stroke-width:.9;stroke-linejoin:round}
.ocean-scene .atlantic-streams path{stroke-opacity:.32}
/* Maintain a distinct treatment for real geographical coastline and fictitious flow field. */

/* ADRIFT v0.3 — geographic Port la Vie geometry; Atlantic styles intentionally unchanged. */
.port-scene .harbor-sea{stroke:none}
.port-scene .harbor-coast{fill:none;stroke:#d1b17c;stroke-opacity:.82;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 2px #c5a06d55)}
.port-scene .harbor-urban .harbor-building{fill:none;stroke:#99856c;stroke-width:.68;stroke-opacity:.27}
.port-scene .harbor-urban .harbor-street{fill:none;stroke:#b59a6d;stroke-width:1.1;stroke-opacity:.11}
.port-scene .harbor-quays polygon{fill:#151a17;stroke:#cbb18c;stroke-width:2;stroke-opacity:.72}
.port-scene .harbor-breakwaters .harbor-breakwater-halo{fill:none;stroke:#0a1111;stroke-width:17;stroke-linejoin:round;stroke-linecap:round}
.port-scene .harbor-breakwaters .harbor-breakwater-core{fill:none;stroke:#d0ae7b;stroke-width:2.4;stroke-opacity:.95;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px #c8a26a55)}
.port-scene .harbor-light{filter:drop-shadow(0 0 7px currentColor)}
.port-scene .harbor-pontoons .pontoon-finger{fill:none;stroke:#d2c9b9;stroke-width:2;stroke-opacity:.74}
.port-scene .harbor-pontoons .harbor-boat{stroke:#b5b5ac;stroke-width:1;stroke-opacity:.5;fill:none}
.port-scene .harbor-current-lines path{fill:none;stroke:#2e9daa;stroke-width:1.25;stroke-opacity:.36;stroke-dasharray:3.2 12;animation:driftDash 22s linear infinite}
.port-scene .harbor-current-lines path:nth-child(3n){stroke-opacity:.19;animation-duration:31s}
.port-scene .harbor-bathymetry{stroke:#1e6873;stroke-width:.75;fill:none;opacity:.23}
.port-scene .harbor-labels{font-family:'Barlow Condensed',sans-serif;pointer-events:none}
.port-scene .harbor-title{fill:#d9d1bd;font-size:32px;font-weight:600;letter-spacing:8px}
.port-scene .harbor-subtitle{fill:#bda477;font-size:13px;font-weight:500;letter-spacing:4px}
.port-scene .harbor-label-rule{fill:none;stroke:#ae956f;stroke-width:1.4;stroke-opacity:.44}
.port-scene .harbor-sea-label{fill:#27707c;opacity:.48;letter-spacing:13px;font-size:26px}
.port-scene .harbor-river-label{fill:#6a9696;opacity:.55;letter-spacing:4px;font-size:14px}
.port-scene .harbor-land-label{fill:#a78d62;opacity:.52;letter-spacing:4px;font-size:13px}
.port-scene .harbor-coordinates{fill:#b6a17a;opacity:.8;font-size:14px;letter-spacing:4px}

/* ADRIFT v0.4 — actual parcels taken from reference map, never randomized. */
.port-scene .harbor-urban .harbor-real-parcels{fill:none;stroke:#b99a6b;stroke-width:0.9;stroke-opacity:.33;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.port-scene .harbor-river-label{font-size:15px;letter-spacing:3px;fill:#659ca4;opacity:.68}

/* v0.4.2 — single replaceable clickable header logo */
.site-header .brand{gap:0}.site-header .brand-logo{max-width:min(215px,35vw);object-fit:contain}

/* ADRIFT v0.6.2 — mobile cartography and foldable bottle creator. */
.release-expand{display:none;flex:none;border:1px solid rgba(127,215,211,.45);width:38px;height:38px;align-items:center;justify-content:center;background:rgba(8,28,31,.8);color:#a0e6df;font:400 28px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.release-expand:hover,.release-expand:focus-visible{background:rgba(17,54,59,.95);color:#fff}
.collapsed-label{display:none}
.mobile-rotate-note{display:none}
.map-stage{position:absolute;inset:0;pointer-events:none}
.map-stage .map-scene.visible{pointer-events:auto}
@media(max-width:730px), (max-width:950px) and (orientation:landscape) and (pointer:coarse){
  .site-header{height:auto!important;min-height:0;display:flex!important;flex-direction:column;align-items:stretch;gap:0;padding:0!important}
  .brand{width:100%;padding:12px 5% 10px;min-height:60px;display:flex;align-items:center}
  .brand-logo{height:24px;max-width:210px}
  .mobile-menu-toggle{display:none!important}
  .navigation{display:flex!important;position:relative!important;inset:auto!important;width:100%;height:39px!important;flex-direction:row!important;align-items:stretch!important;justify-content:space-between;gap:0!important;padding:0 3%!important;background:#050e11!important;border:0!important;border-top:1px solid rgba(127,215,211,.18)!important;box-shadow:none!important}
  .nav-link{flex:1;min-width:0;display:flex;align-items:center;justify-content:center!important;gap:5px;border:0!important;border-right:1px solid rgba(127,215,211,.09)!important;font-size:8px!important;letter-spacing:.045em!important;padding:0 3px!important;white-space:nowrap}
  .nav-link:last-child{border-right:0!important}
  .nav-link span:not(.nav-count){display:inline!important;color:inherit}
  .nav-link.active:after{border-bottom-width:1px}
  .nav-count{font-size:8px;line-height:1;padding:2px 3px;margin-left:1px}
  .viewport{height:auto!important;min-height:calc(100svh - 99px);display:flex!important;flex-direction:column;gap:0!important;overflow:visible;padding:0 0 54px!important}
  .viewport:after{display:none!important}
  .map-stage{position:relative!important;inset:auto!important;width:100%;height:auto!important;min-height:0!important;aspect-ratio:1518 / 875;flex:0 0 auto;overflow:hidden;background:radial-gradient(ellipse at center,#09202a 0%,#030b0f 70%)}
  .map-stage .map-scene{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden}
  .map-stage .port-scene svg#portMap{display:block;width:100%!important;height:100%!important;max-width:none!important;transform:none!important}
  .map-stage .ocean-scene svg#atlanticMap{width:155%!important;height:100%!important;transform:translateX(-24%)!important}
  .mobile-rotate-note{display:block;position:relative;z-index:7;margin:0;padding:3px 5% 12px;text-align:center;font-size:9px;letter-spacing:.06em;color:#8baaa9;background:#030b0f}
  .mobile-rotate-note span{font-size:15px;color:#c6af85;vertical-align:middle;margin-right:6px}
  .left-composition{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:5px 5% 8px!important;pointer-events:none;z-index:5}
  .left-composition h1{font-size:clamp(80px,22vw,126px)!important;margin:12px 0 7px!important}
  .left-composition .eyebrow{font-size:8px;letter-spacing:.13em}
  .tagline{font-size:11px!important;letter-spacing:.075em!important;line-height:1.65}
  .intro{max-width:none!important;margin-top:9px!important}
  .micro-guide{margin-top:12px}
  .release-panel,.tracking-panel,.my-objects-panel{position:relative!important;right:auto!important;top:auto!important;left:auto!important;margin:14px 5% 20px!important;width:90%!important;max-height:none!important;overflow:visible;z-index:8}
  .release-panel{padding:0 18px!important}
  .release-panel-heading{display:flex;gap:15px;min-height:77px;align-items:center;padding:10px 0;border-bottom:0}
  .release-panel-heading>span{font-size:10px;line-height:1.8;flex:1}
  .release-expand{display:flex}
  .release-panel .release-body{padding:0 0 20px}
  .release-panel.mobile-collapsed .release-body{display:none!important}
  .release-panel.mobile-collapsed .collapsed-label{display:block;color:#779793;font-size:9px;font-weight:400;letter-spacing:.08em}
  .release-panel:not(.mobile-collapsed) .release-panel-heading{border-bottom:1px solid rgba(178,193,173,.23)}
  .release-panel .panel-description{margin-bottom:10px}
  .scene-bottom-left,.scene-bottom-center,.scene-bottom-right,.vertical-index{display:none!important}
  .disclaimer{height:auto!important;padding:10px 5%;line-height:1.65;align-items:flex-start;flex-wrap:wrap}
}
@media(max-width:730px) and (orientation:landscape), (max-width:950px) and (orientation:landscape) and (pointer:coarse){
  .map-stage{aspect-ratio:1518 / 793;min-height:0}
  .mobile-rotate-note{display:none}
  .left-composition{margin-top:14px!important}
}

@media(max-width:730px), (max-width:950px) and (orientation:landscape) and (pointer:coarse){body.view-ocean .mobile-rotate-note{display:none}}

/* ADRIFT v1.0 -- scientific mode reporting, preserve approved cartography */
.tracker-line[hidden]{display:none!important}
#statModel{max-width:65%;white-space:normal;line-height:1.6}
#statModelTime{white-space:normal}
#zoomDrift{border-color:rgba(127,215,211,.55);color:#a6e5dc}
.ghost-btn:disabled{opacity:.5;cursor:not-allowed}

/* ADRIFT v1.1 — legible close-up of recorded ocean drift; background map unchanged */
.drift-detail{position:absolute;inset:0;z-index:4;overflow:hidden;background:radial-gradient(ellipse at 48% 50%,#0a2730 0%,#061820 55%,#030b0f 90%);pointer-events:auto;color:#e1e4d7}
.drift-detail.hidden{display:none!important}
.drift-detail::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;background:repeating-linear-gradient(0deg,transparent 0px,transparent 77px,rgba(48,112,118,.14) 78px),repeating-linear-gradient(90deg,transparent 0px,transparent 77px,rgba(48,112,118,.14) 78px)}
.drift-detail #driftDetailSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.detail-toolbar{position:absolute;z-index:2;top:5%;left:31%;right:27%;display:flex;align-items:center;justify-content:space-between;gap:15px;min-width:0}
.detail-heading{display:flex;flex-direction:column;gap:8px;min-width:0}.detail-eyebrow{font:600 9px 'DM Sans',Arial,sans-serif;letter-spacing:.22em;color:#bba478}.detail-heading strong{font:600 clamp(17px,2vw,27px) 'Barlow Condensed',Arial,sans-serif;letter-spacing:.09em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-back{border:1px solid #4d7776;background:#071c21d9;color:#a2dcd6;padding:11px 14px;white-space:nowrap;font:700 10px 'DM Sans',Arial,sans-serif;letter-spacing:.1em;cursor:pointer}
.detail-back:hover,.detail-back:focus-visible{border-color:#8ce6dd;color:#e4fffc}
.detail-grid line{stroke:#3b6b70;stroke-opacity:.37;stroke-width:.85}
.detail-grid .detail-scale{stroke:#c5aa7e;stroke-width:2;stroke-opacity:.9}
.detail-grid text{fill:#b4bda9;font:12px 'DM Sans',Arial,sans-serif;letter-spacing:1.2px}
.detail-trace path{fill:none;stroke:#8ce5de;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(107,212,205,.4))}
.detail-trace .detail-underlay{stroke:#0a2730;stroke-width:9;filter:none}
.detail-markers .detail-start{fill:#c8ac7b;stroke:#0c2629;stroke-width:3}
.detail-markers .detail-end{fill:#88e4db;stroke:#0c2629;stroke-width:3;filter:drop-shadow(0 0 8px #76e4db99)}
.detail-markers .detail-ring{stroke:#89e2d8;stroke-opacity:.6;stroke-width:1.2;fill:none}
.detail-markers .detail-leader{stroke:#b99b6a;stroke-opacity:.7;stroke-width:1;fill:none}
.detail-legend{position:absolute;left:31%;bottom:10%;z-index:2;display:flex;gap:22px;align-items:center;font-size:10px;letter-spacing:.13em;color:#bdcbc2}
.detail-legend span{display:flex;align-items:center;gap:8px}.detail-dot{width:7px;height:7px;display:inline-block;border-radius:50%}.detail-dot-start{background:#c8ac7b}.detail-dot-position{background:#88e4db}
.detail-notice{position:absolute;left:31%;bottom:3%;margin:0;z-index:2;font-size:8px;line-height:1.7;letter-spacing:.13em;color:#789e9d;max-width:53%}
#zoomDrift{border-color:#669992;color:#a7e6db}
@media(max-width:730px),(max-width:950px) and (orientation:landscape) and (pointer:coarse){
  .detail-toolbar{top:7%;left:5%;right:5%;gap:8px}
  .detail-heading{gap:4px}.detail-eyebrow{font-size:8px}.detail-heading strong{font-size:16px}
  .detail-back{padding:9px 8px;font-size:8px;letter-spacing:.05em}
  .detail-legend{left:5%;bottom:17%;font-size:7px;gap:14px;letter-spacing:.07em}
  .detail-notice{left:5%;right:4%;bottom:5%;max-width:none;font-size:7px;letter-spacing:.055em}
}

/* ADRIFT v1.1.1: obvious trajectory entry and guaranteed visible full-screen details */
.drift-open-button{display:flex;width:100%;align-items:center;gap:15px;margin:18px 0 15px;border:1px solid #7cdbd1;border-radius:0;padding:16px 15px;background:#a8e0d5;color:#071c21;text-align:left;cursor:pointer;box-shadow:0 0 18px rgba(90,221,205,.15);transition:background .2s,transform .2s}
.drift-open-button.hidden{display:none!important}
.drift-open-button:hover,.drift-open-button:focus-visible{background:#c5f5eb;transform:translateY(-1px)}
.drift-open-symbol{font-size:27px;font-weight:300;line-height:1;color:#12434a}
.drift-open-button>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}
.drift-open-button strong{font-size:11px;letter-spacing:.12em;font-weight:800}
.drift-open-button small{font-size:8px;letter-spacing:.10em;font-weight:600;color:#346066}
.drift-open-arrow{font-size:20px}
/* Separate overlay lives directly under the viewport, rather than inside a clipped map scene. */
.drift-detail{position:fixed!important;inset:0!important;z-index:100!important;min-height:100dvh;box-sizing:border-box}
.drift-detail .detail-toolbar{left:6%;right:6%;top:6%;gap:22px}
.drift-detail .detail-legend{left:6%;bottom:12%}
.drift-detail .detail-notice{left:6%;bottom:6%;right:6%;max-width:none}
body.drift-detail-active{overflow:hidden}
@media(max-width:730px), (max-width:950px) and (orientation:landscape) and (pointer:coarse){
  .drift-detail .detail-toolbar{top:6%;left:5%;right:5%}
  .drift-detail .detail-legend{left:5%;bottom:16%;gap:12px}
  .drift-detail .detail-notice{left:5%;bottom:5%;right:5%;font-size:8px}
  .drift-open-button{margin-top:14px;padding:13px 11px}
  .drift-open-button strong{font-size:10px}
  .drift-open-button small{font-size:8px}
}

/* ADRIFT v1.1.2 - high contrast text on the turquoise trajectory button.
   The older #zoomDrift ID selector overrode the accessible dark text color. */
#zoomDrift.drift-open-button,
#zoomDrift.drift-open-button:hover,
#zoomDrift.drift-open-button:focus-visible {
  color: #071c21;
}
#zoomDrift.drift-open-button strong,
#zoomDrift.drift-open-button .drift-open-arrow {
  color: #071c21;
}
#zoomDrift.drift-open-button small {
  color: #254b50;
}

/* ADRIFT v1.1.2 : session creation guidance, no change to maps. */
.creation-limit-note{margin:10px 0 0;font-size:10px;line-height:1.7;color:#a7bdb8;letter-spacing:.02em}
.creation-limit-note.is-used{color:#d7bb85}
#releaseButton.session-used{background:#182e30;color:#a8b9b5;border:1px solid #54706c;cursor:not-allowed}
#releaseButton.session-used .arrow-up{color:#a8b9b5}