:root{font-family:Inter,Avenir Next,Avenir,system-ui,sans-serif;color:#f0f7f6;background:#102c37;font-synthesis:none;--mint: #9de8cc;--muted: #bbccc9;--panel: rgba(16, 34, 39, .81);--line: rgba(225, 245, 239, .18)}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{color:inherit}#app,#viewport{position:absolute;inset:0;overflow:hidden}canvas{display:block;width:100%;height:100%}.header{position:absolute;top:32px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{color:#fff;text-decoration:none;font-size:29px;letter-spacing:-1.5px;font-weight:650;pointer-events:auto;display:flex;align-items:center;flex-wrap:wrap;width:185px}.brand>span:not(.brand-icon){font-weight:300}.brand-icon{font-size:40px;color:var(--mint);margin-right:9px;line-height:1}.brand small{font-size:8px;letter-spacing:2.8px;font-weight:500;margin:1px 0 0 38px}.project-tag{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:600;letter-spacing:1.6px;text-shadow:0 1px 12px #172c32}.project-tag i{width:5px;height:5px;background:var(--mint);border-radius:50%}.tag-divider{opacity:.4}.intro{position:absolute;top:145px;left:42px;pointer-events:none;text-shadow:0 2px 25px #12384355}.eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--mint);font-weight:600}h1{font-weight:400;font-size:clamp(27px,3.4vw,49px);letter-spacing:-2px;line-height:1.13;margin:17px 0}.intro p{font-size:12px;line-height:1.8;color:#e2edeb}.environment{position:absolute;right:32px;top:110px;width:270px;background:var(--panel);border-radius:14px;backdrop-filter:blur(22px);box-shadow:0 12px 60px #09212b20}.sim-badge{font-size:7px;line-height:1;letter-spacing:1.2px;border:1px solid var(--line);border-radius:4px;padding:4px 5px;color:var(--mint)}.panel-content{padding:0 18px 17px}.panel-note{font-size:10px;color:var(--muted);margin:0 0 15px;line-height:1.5}.presets{display:flex;gap:4px;margin-bottom:21px}.presets button{background:transparent;border:1px solid var(--line);border-radius:6px;font-size:9px;padding:8px 7px;flex:1;white-space:nowrap}.presets button[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:#173b36}.slider{display:block;margin:0 0 13px}.slider>span{display:flex;justify-content:space-between;font-size:10px;color:#d7e1df}.slider output{font-size:10px;color:var(--mint);font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;margin:9px 0 0;height:3px;accent-color:var(--mint);cursor:pointer}.check{display:flex;align-items:flex-start;gap:7px;border-top:1px solid var(--line);padding-top:15px;margin-top:19px;font-size:10px}.check input{accent-color:var(--mint);margin:0}.check small{display:block;font-size:8px;color:var(--muted);margin-top:5px}.pause{background:transparent;border:1px solid var(--line);width:100%;border-radius:6px;font-size:10px;padding:9px;margin-top:17px}.pause:hover{background:#ffffff0c}.location-card{position:absolute;left:40px;bottom:105px;background:linear-gradient(110deg,#112d38dd,#112d3899);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;padding:20px 22px;min-width:350px}.location-card h2{font-size:17px;font-weight:450;letter-spacing:-.35px;margin:10px 0 8px}.location-card p{font-size:10px;color:#cfdfda;margin:0}.metadata{display:flex;gap:22px;border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font-size:8px;color:var(--muted);letter-spacing:.4px}.view-nav{position:absolute;bottom:43px;left:50%;transform:translate(-50%);display:flex;padding:5px;background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:10px;gap:3px}.view-nav button{white-space:nowrap;font-size:10px;border:0;background:transparent;padding:11px 19px;border-radius:6px}.view-nav button span{font-size:8px;opacity:.55;margin-right:9px}.view-nav button[aria-pressed=true]{background:#dff5eb;color:#193c38}footer{position:absolute;bottom:15px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#d0dedb;pointer-events:none}footer b{padding:0 10px;opacity:.5}#loading{position:absolute;inset:0;background:#102c37;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:10}#loading[hidden]{display:none}.loading-mark{width:55.9px;height:52px;overflow:hidden;flex-shrink:0;animation:breathe 2s ease-in-out infinite}.loading-mark img{display:block;width:auto;height:52px;max-width:none}#loading h2{font-size:24px;font-weight:400}#loading p{font-size:12px;color:#d5e5e2;max-width:600px;overflow-wrap:anywhere}#loading small{font-size:10px;color:#9bafae}#retry{margin-top:20px;padding:10px 20px;border:1px solid var(--line);border-radius:6px;background:#234b51}body[data-view=aoi] .intro{opacity:0;pointer-events:none}@keyframes breathe{50%{opacity:.35}}@media(max-width:900px){.intro{top:120px;left:24px}.intro h1{font-size:31px}.header{left:24px;right:24px;top:22px}.project-tag{display:none}.environment{right:18px;top:95px;width:238px}.location-card{left:24px;bottom:114px;min-width:0}.metadata{gap:12px}.view-nav button{padding:10px 12px}.view-nav{bottom:48px}.hint{display:none}footer{left:24px;right:24px}.intro p{max-width:220px}.intro p br{display:none}}@media(max-width:620px){.intro{display:none}.environment{top:88px}.location-card{left:16px;right:16px;bottom:108px;padding:13px 16px}.location-card h2{font-size:15px}.metadata{justify-content:space-between;margin-top:11px;padding-top:9px}.view-nav{width:calc(100% - 32px);justify-content:center}.view-nav button{flex:1;padding:10px 7px}footer{font-size:7px}}@media(prefers-reduced-motion:reduce){.loading-mark{animation:none}}body.embedded .header,body.embedded .intro,body.embedded .environment,body.embedded .location-card,body.embedded .view-nav,body.embedded footer{display:none}.habitat-legend{position:absolute;top:118px;left:40px;width:292px;padding:18px 20px;background:var(--panel);border-radius:14px;backdrop-filter:blur(18px)}.habitat-legend ul{list-style:none;margin:16px 0;padding:0}.habitat-legend li{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.25;margin:7px 0}.habitat-legend li i{width:10px;height:10px;border-radius:2px;flex-shrink:0}.habitat-legend p{font-size:10px;line-height:1.5;opacity:.7;margin:8px 0 0}body:not([data-view]) .habitat-legend,body[data-view=surface] .habitat-legend,body.embedded .habitat-legend{display:none}@media(max-width:900px){.habitat-legend{left:24px;top:96px;width:252px}}@media(max-width:620px){.habitat-legend{left:16px;top:145px;width:225px;padding:13px 16px}}.environment .check+.check{border-top:0;padding-top:0;margin-top:12px}body[data-view=aoi] .habitat-navigation{display:none}.habitat-select-label{display:block;font-size:10px;margin:14px 0 7px;color:var(--muted)}#habitat-select{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;color:inherit;background:#18333c;font:inherit;font-size:11px}body.habitats-off #habitat-classes,body.habitats-off #habitat-overlap{display:none}[hidden]{display:none!important}.brand img{display:block;width:170px;height:auto;max-height:60px;object-fit:contain}#settings-toggle,#center-buoy{display:grid;place-items:center;pointer-events:auto;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#18333c;color:var(--muted);font-size:22px;cursor:pointer}.date-controls{position:fixed;z-index:10;top:94px;right:32px;width:270px;padding:12px;border-radius:12px;background:#0c232dcc;color:var(--muted);font-size:11px}.date-fields{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:12px;margin-bottom:8px}.date-field{display:grid;gap:6px;min-width:0}.date-field label{white-space:nowrap}.date-controls input{width:100%;min-width:0;color:var(--text);background:#18333c;border:1px solid var(--line);border-radius:4px;padding:5px;margin:0;color-scheme:dark}#weather-status{font-size:10px;line-height:1.5;margin:4px 0}.environment{z-index:20;top:200px}body.submerged .intro{opacity:0;pointer-events:none}body.embedded .date-controls,body.embedded #settings-toggle{display:none}@media(max-width:620px){.date-controls{top:80px;right:16px;width:220px}.environment{top:190px}.brand img{width:140px}.habitat-legend{top:210px}}.intro{transition:opacity .6s ease}#imagery-credit{position:absolute;bottom:62px;left:40px;color:var(--text);background:#102c37b8;padding:4px 7px;border-radius:3px;font-size:9px;text-decoration:none;pointer-events:auto}#imagery-credit[hidden]{display:none}@media(max-width:700px){#imagery-credit{left:16px;bottom:100px;font-size:8px}}#weather-summary{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}#weather-summary h2{margin:0 0 9px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px}#weather-summary dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:0 0 10px}#weather-summary dt,.buoy-widget dt{font-size:9px;color:var(--muted);margin-bottom:3px}#weather-summary dd,.buoy-widget dd{font-size:12px;color:#f0f7f6;font-variant-numeric:tabular-nums}#weather-summary dd{margin:0}#weather-override-note{color:var(--mint);font-size:10px;margin:8px 0}.environment{top:507px}@media(max-width:620px){.environment{top:507px}}#current-time{margin-top:8px;padding:0;border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}#marine-source{font-size:9px;line-height:1.4;margin:8px 0 0;color:var(--muted)}.simulation-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:12px}#performance{font-size:9px;font-weight:400;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.buoy-widget{position:fixed;z-index:12;top:95px;left:40px;width:280px;color:var(--muted);background:#0c232deb;border-radius:12px;padding:14px;font-size:11px}.buoy-widget select,.buoy-widget button{padding:7px;background:#18333c;color:inherit;border:1px solid var(--line);border-radius:6px;font:inherit}.buoy-widget select{width:100%}.buoy-widget dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin:12px 0}.buoy-widget dl>p{grid-column:1 / -1}.buoy-widget dl>div{border-top:1px solid var(--line);padding:8px 0}.buoy-widget dd{margin:4px 0 0}.buoy-note{font-size:9px;line-height:1.5}.buoy-explorer-link{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--mint);text-decoration:none}.buoy-explorer-link:hover{text-decoration:underline}body:has(.buoy-widget:not([hidden])) .intro{opacity:0}.explorer-widgets{display:flex;flex-direction:column;gap:8px;position:fixed;z-index:12;left:40px;top:var(--widgets-top,95px);width:280px;max-height:max(108px,calc(100dvh - var(--widgets-top,95px) - var(--showcase-height,150px) - var(--showcase-bottom,105px) - 16px));overflow:visible}.explorer-widgets .buoy-widget,.explorer-widgets .habitat-legend{position:static;width:auto;margin-bottom:0;min-height:50px;flex:0 1 auto}.explorer-widgets>[hidden]{display:none}body.embedded .explorer-widgets{display:none}@media(min-width:621px)and (max-width:900px){.explorer-widgets{left:24px;--widgets-top:72px;--showcase-bottom:114px}}@media(max-width:620px){.explorer-widgets{left:16px;--widgets-top:80px;--showcase-bottom:108px;width:210px}}.buoy-labels{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.buoy-labels button{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;background:#102c37b8;color:var(--text);border:0;border-radius:3px;padding:4px 7px;font:inherit;font-size:10px;white-space:nowrap}.buoy-labels button[aria-pressed=true]{color:var(--mint)}.aoi-only{display:none}body[data-view=aoi] .aoi-only{display:block}body:has(#loading:not([hidden])) :is(.widget,.explorer-widgets,.view-nav,.scene-actions){visibility:hidden;pointer-events:none}.habitat-legend .aoi-only{font-size:11px;margin:12px 0}.habitat-legend .aoi-only input{vertical-align:middle;accent-color:var(--mint)}.buoy-labels.ocean-locations button{font-size:10px}.scene-actions{display:flex;gap:10px;align-items:center;pointer-events:auto;z-index:20}#center-buoy:disabled{opacity:.35;cursor:default}body[data-view=aoi] #center-buoy{display:none}.widget{display:flex;flex-direction:column;padding:0;border:0;overflow:hidden;min-height:50px}.widget>details{display:flex;flex-direction:column;min-height:0;overflow:hidden}.widget>details[open]{flex:1 1 auto}.widget>details::details-content{display:contents}.widget>details:not([open])>.widget-body{display:none}.widget .widget-header{position:relative;display:flex;align-items:center;flex:0 0 auto;gap:8px;min-height:50px;margin:0;padding:14px 44px 14px 16px;font-family:inherit;font-size:13px;font-style:normal;font-weight:600;line-height:20px;letter-spacing:normal;text-transform:none;color:var(--muted);list-style:none}.widget .widget-header::-webkit-details-marker{display:none}.widget .widget-body{flex:0 1 auto;min-height:0;padding:0 16px 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}.date-controls{max-height:max(50px,calc(100dvh - 192px))}.environment{--environment-top: clamp(16px, calc(100dvh - 300px) , 507px);top:var(--environment-top);max-height:calc(100dvh - var(--environment-top) - 80px)}.widget .simulation-status{margin-left:auto;min-width:0}.widget #performance{font-size:8px}body[data-view=aoi] .check.aoi-only{display:flex}.widget-drag-handle{cursor:grab!important;touch-action:none;user-select:none}.widget-drag-handle:after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:12px;height:18px;color:var(--muted);opacity:.65;background:radial-gradient(circle,currentColor 1px,transparent 1.5px) 0 0 / 6px 6px;pointer-events:none}.is-dragged{position:fixed!important;left:var(--widget-left)!important;top:var(--widget-top)!important;right:auto!important;bottom:auto!important;width:min(var(--widget-width),calc(100vw - 32px))!important;max-height:var(--widget-height)!important;overflow:hidden!important;z-index:14}.is-dragged[hidden]{display:none!important}.is-dragging .widget-drag-handle{cursor:grabbing!important}.view-nav{z-index:16}.buoy-subscene{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#142c37;overflow:hidden}.buoy-subscene::backdrop{background:#142c37}.buoy-subscene iframe{display:block;width:100%;height:100%;border:0}
