@charset "UTF-8";
:root{color-scheme:dark;--pearl:#fff8ef;--ink:#103d40;--teal:#063f45;--blue:#062f40;--muted:#c5ded8;--pink:#f0c1bb;--line:#49777a;--serif:Georgia,'Times New Roman',serif;--sans:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:24px}body{margin:0;background:var(--teal);color:var(--pearl);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}img{max-width:100%;display:block}figure,p,h1,h2,h3{margin:0}h1,h2,h3{font-weight:400}h1,h2{overflow-wrap:anywhere}a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid var(--pink);outline-offset:6px;border-radius:2px}::selection{background:var(--pink);color:var(--ink)}.wrap{width:min(1160px,calc(100% - 88px));margin-inline:auto}.skip-link{position:fixed;left:16px;top:-100px;background:var(--pearl);color:var(--ink);padding:12px 20px;z-index:10}.skip-link:focus{top:12px}
.site-header{display:flex;align-items:center;justify-content:space-between;height:108px;gap:20px}.brand{display:block;width:178px;flex-shrink:0}.brand img{width:100%;height:auto}.quiet-link{font-size:.875rem;text-decoration:none;display:flex;align-items:center;gap:16px;min-height:44px;color:var(--muted)}.quiet-link:hover{text-decoration:underline}
.hero{display:grid;grid-template-columns:1.13fr 1fr;grid-template-rows:auto auto 1fr;column-gap:70px;position:relative;padding-top:34px;padding-bottom:34px;min-height:662px}.hero-copy{grid-column:1;grid-row:1;padding-top:66px}.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:20px}.hero .eyebrow{color:var(--muted)}.hero h1{font-family:var(--serif);font-size:clamp(3.4rem,5.1vw,4.7rem);line-height:1.05;letter-spacing:-.055em}.hero h1 em{font-weight:400;color:var(--pink)}.hero-description{margin-top:26px;font-size:1rem;color:var(--muted);line-height:1.7}.hero-art{grid-column:2;grid-row:1/4;align-self:start;position:relative;overflow:hidden;border-radius:220px 220px 14px 14px;background:var(--blue)}.hero-art>img{width:100%;height:auto;aspect-ratio:1122/1402;object-fit:contain}
.store-group{grid-column:1;grid-row:2;display:flex;gap:12px;margin-top:33px;align-items:stretch}.store-placeholder{display:flex;align-items:center;gap:12px;padding:12px 17px;border:1px solid #83aaa6;border-radius:8px;min-height:71px;background:var(--pearl);color:var(--ink);flex:0 1 192px;min-width:0}.store-placeholder>span:last-child{min-width:0}.platform-icon{width:23px;flex-shrink:0}.platform-icon svg{display:block;width:100%;height:27px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.store-status{display:block;font-size:.75rem;line-height:1.3;color:#315e61}.store-placeholder strong{display:block;font-weight:600;font-size:1rem;line-height:1.5}.hero-bottom{grid-column:1;grid-row:3;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:8px;margin-top:34px;font-size:.8125rem;color:var(--muted)}.hero-bottom a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;text-decoration:none;text-align:center;line-height:40px;font-size:1.25rem;flex-shrink:0}
h2{font-family:var(--serif);font-size:clamp(2rem,3.1vw,2.9rem);letter-spacing:-.035em;line-height:1.15}.meet-section{margin-top:42px;padding:87px 0;background:var(--pearl);color:var(--ink);color-scheme:light}.meet-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.meet-section .eyebrow{color:#925162}.meet-copy{max-width:480px;color:#315f5e;line-height:1.8}.meet-copy p+p{margin-top:16px}
.world-section{padding-top:96px;padding-bottom:84px}.section-heading{text-align:center;margin-bottom:43px}.section-heading .eyebrow{color:var(--muted)}.portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px}.portal{min-width:0}
/* Full 960x720 artwork, with its native plaque and rim intact. No crop, mask,
   pseudo-element or painted title background. Titles use a shared safe box
   inside the curved ends of each plaque: x=278..682 in the source artwork. */
.portal-art{position:relative;container-type:inline-size;overflow:visible}.portal-art img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;clip-path:none;mask:none}.portal-art h3{position:absolute;left:29%;width:42%;top:calc(var(--plaque-centre) - 4%);height:8%;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;background:none;color:#fff8ef;text-align:center;font-family:var(--serif);font-size:min(5cqw,1.375rem);line-height:1;white-space:nowrap;letter-spacing:0}.portal:nth-child(1){--plaque-centre:84.7%}.portal:nth-child(2){--plaque-centre:85.4%}.portal:nth-child(3){--plaque-centre:85.6%}.portal-art h3 span{display:block;flex-shrink:0}.portal-copy{padding:23px 3px 0;font-size:1rem;color:var(--muted);line-height:1.75}.portal-copy .portal-label{color:var(--pearl);font-size:1rem;font-weight:600;line-height:1.5;margin-bottom:11px}
.showcase-section{background:var(--pearl);color:var(--ink);padding-block:45px;color-scheme:light}.showcase-inner{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.showcase-inner .eyebrow{color:#925162;margin-bottom:13px}.showcase-inner h2{font-size:2.15rem}.showcase-inner>p{max-width:390px;color:#315f5e;font-size:1rem}.draft-note{display:block;font-size:.75rem;color:#315f5e;margin-top:13px}.future-section{background:var(--blue);text-align:center;padding:85px 28px 90px}.future-section .eyebrow{color:var(--pink)}.future-section h2{font-size:3.15rem}.future-section>p:not(.eyebrow){color:var(--muted);max-width:480px;margin:25px auto 0;line-height:1.8}.future-section .future-detail{font-size:.875rem;max-width:420px!important}
.site-footer{background:#032d34;padding:44px 0 26px}.footer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:31px}.footer-wordmark{font-family:var(--serif);font-size:1.4rem;letter-spacing:.14em;text-decoration:none}.footer-top>p{font-size:.875rem;color:var(--muted)}.site-footer nav{display:flex;gap:12px 25px;flex-wrap:wrap}.site-footer nav a{font-size:.875rem;display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.site-footer nav a:hover{text-decoration:underline}.footer-bottom{margin-top:25px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem}.mobile-break{display:none}
.document{max-width:760px;padding:62px 0 96px;min-height:65vh}.document h1{font-family:var(--serif);font-size:clamp(2.5rem,5vw,3.8rem);line-height:1.1;letter-spacing:-.04em;margin-bottom:28px}.document h2{font-size:1.6rem;margin:36px 0 14px}.document p,.document li{color:var(--muted);line-height:1.85}.document p+p{margin-top:16px}.document ul{padding-left:23px}.document .notice{border-left:3px solid var(--pink);padding:17px 22px;background:var(--blue);margin:25px 0 35px}.notice strong{color:var(--pearl);display:block;margin-bottom:5px}.document .back-link{display:inline-flex;min-height:44px;align-items:center;margin-top:35px;font-size:.875rem}.document .eyebrow{color:var(--pink)}
@media(min-width:1500px){.hero{column-gap:90px}}
@media(max-width:1023px) and (min-width:720px){.wrap{width:calc(100% - 60px)}.hero{column-gap:32px;min-height:590px}.hero-copy{padding-top:26px}.hero h1{font-size:3.3rem}.store-placeholder{padding:10px 11px;gap:8px}.store-group{gap:8px}.hero-description br{display:none}.meet-layout,.showcase-inner{gap:45px}}
@media(max-width:1023px){.portals{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:42px}.portal-copy{padding-inline:0}.portal-art h3{font-size:min(5cqw,1.75rem)}}
@media(max-width:719px){.wrap{width:calc(100% - 40px)}.site-header{height:auto;min-height:76px;padding-block:12px;gap:18px}.brand{width:147px}.quiet-link{font-size:.875rem;gap:7px;min-width:0}.hero{display:flex;flex-direction:column;padding-top:15px;padding-bottom:29px;min-height:0;gap:0}.hero-copy{padding:0;text-align:center}.eyebrow{font-size:.75rem;letter-spacing:.12em;margin-bottom:14px}.hero .eyebrow{letter-spacing:.11em;margin-bottom:12px}.hero h1{font-size:clamp(2.45rem,10vw,3.6rem);line-height:1.04;letter-spacing:-.05em}.hero-description{font-size:.9375rem;line-height:1.5;margin:16px auto 0;max-width:315px}.desktop-break{display:none}.hero-art{height:clamp(236px,66vw,350px);width:100%;margin-top:23px;border-radius:14px}.hero-art>img{height:100%;object-fit:cover;object-position:50% 75%}.store-group{width:100%;margin-top:17px;gap:10px;justify-content:center}.store-placeholder{padding:10px 12px;gap:10px;flex:1 1 0;min-height:65px;max-width:210px}.platform-icon{width:19px}.store-status{line-height:1.35}.store-placeholder strong{font-size:.9375rem;line-height:1.5}.hero-bottom{margin-top:22px;align-items:center;font-size:.75rem;padding:0}.hero-bottom a{width:35px;height:35px;line-height:31px;font-size:1.1rem}.meet-section{margin-top:14px;padding:51px 0 53px}.meet-layout{display:block}.meet-layout h2{font-size:2.35rem;line-height:1.12}.meet-copy{margin-top:26px;font-size:1rem;line-height:1.8}.meet-copy p+p{margin-top:14px}.world-section{padding-top:58px;padding-bottom:54px}.section-heading{margin-bottom:30px}.section-heading h2{font-size:2.1rem}.mobile-break{display:block}.portal-copy{padding:18px 0 0}.portal-copy .portal-label{margin-bottom:8px}.showcase-section{padding-block:36px}.showcase-inner{display:block}.showcase-inner h2{font-size:2rem}.showcase-inner>p{margin-top:19px}.future-section{padding:56px 24px 65px}.future-section h2{font-size:2.5rem}.future-section>p:not(.eyebrow){font-size:1rem;line-height:1.8;margin-top:21px}.future-section .future-detail{font-size:.875rem!important}.site-footer{padding:33px 0 24px}.footer-top{display:block;margin-bottom:18px}.footer-top p{margin-top:9px}.site-footer nav{gap:0 23px}.footer-bottom{gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:20px}.document{padding:35px 0 65px}.document h1{font-size:2.55rem}.document h2{font-size:1.65rem}.document .notice{padding:16px 18px}}
@media(max-width:359px){.wrap{width:calc(100% - 32px)}.site-header{min-height:64px;padding-block:10px}.brand{width:132px}.hero{padding-top:9px}.hero h1{font-size:2.2rem}.hero-art{height:220px}.store-placeholder{padding:10px 9px;gap:7px}.store-placeholder .platform-icon{display:none}.store-placeholder strong{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}


/* Freshwater opening: the scene reaches the viewport edges; live content stays in flow. */
.landing{--teal:#052f35;--muted:#cfe1dc;--line:#3f6668}
.landing .site-header{position:absolute;z-index:3;inset:0 0 auto;justify-content:flex-start;gap:42px;height:108px}
.landing .quiet-link{padding-left:32px;border-left:1px solid #a9cac34d;color:var(--pearl)}
.hero{display:block;isolation:isolate;min-height:0;padding:128px 0 22px;background:#052f35}
.hero-scene{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.hero::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(3,32,36,.86),rgba(3,32,36,.66) 38%,rgba(3,32,36,.08) 70%),linear-gradient(0deg,#052f35,rgba(5,47,53,.26) 24%,transparent 65%)}
.hero-layout{position:relative;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto auto 1fr;column-gap:34px;min-height:544px}
.hero-copy{padding-top:60px;z-index:1;align-self:end}
.hero h1{font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;font-size:clamp(3.3rem,5.25vw,4.75rem);line-height:1.06;letter-spacing:-.055em;overflow-wrap:normal}
.hero .eyebrow{font-size:.8125rem;letter-spacing:.14em;margin-bottom:23px;color:#deeee7}
.hero-description{font-size:1.0625rem;line-height:1.7;color:#e0ece6;margin-top:24px;max-width:390px}
.hero-art{grid-column:2;grid-row:1/4;align-self:center;position:relative;overflow:visible;background:none;border-radius:0;width:112%;margin-left:-6%;height:534px;mask-image:radial-gradient(ellipse 90% 69% at 51% 54%,#000 48%,transparent 76%)}
.hero-art>img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 69%}
.store-group{margin-top:30px;z-index:1;gap:12px}
.store-placeholder{min-height:66px;background:#062e35c9;color:var(--pearl);border-color:#b2d4ca80;border-radius:7px;padding:10px 17px;flex:0 1 181px}
.store-status{color:#d2e3dc}.store-placeholder strong{font-weight:500}
.hero-bottom{margin-top:42px;padding:0 0 20px;align-items:center;color:#d2e3dc;max-width:376px}
.hero-bottom a{border-color:#91b4ac88}
@media(min-width:1500px){.hero-layout{min-height:600px}.hero-art{height:580px}.hero{padding-top:136px}}
@media(min-width:720px) and (max-width:1023px){.hero{padding-top:112px}.hero-layout{column-gap:10px;min-height:480px}.hero-copy{padding-top:26px}.hero h1{font-size:clamp(2.8rem,5.5vw,3.55rem)}.hero-art{height:440px;width:110%;margin-left:-5%}.store-placeholder{padding:10px 11px;gap:9px}.hero .eyebrow{font-size:.75rem}.hero-description{font-size:1rem}.hero-bottom{margin-top:28px}.hero::before{background:linear-gradient(90deg,rgba(3,32,36,.9),rgba(3,32,36,.66) 44%,rgba(3,32,36,.18)),linear-gradient(0deg,#052f35,transparent 70%)}}
@media(max-width:719px){
  .landing .site-header{height:78px;min-height:0;gap:23px;justify-content:space-between;padding-block:14px}
  .landing .quiet-link{padding-left:0;border:0;font-size:.8125rem;gap:7px}
  .hero{padding:104px 0 20px;gap:0}
  .hero-scene{object-position:42% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(3,32,36,.56),rgba(3,32,36,.77) 17%,rgba(3,32,36,.64) 36%,rgba(3,32,36,.1) 62%,#052f35 100%)}
  .hero-layout{display:flex;flex-direction:column;min-height:0;gap:0}
  .hero-copy{padding:0;align-self:stretch;text-align:center}
  .hero .eyebrow{font-size:.75rem;letter-spacing:.12em;margin-bottom:18px}
  .hero h1{font-size:clamp(2.5rem,10.5vw,3.8rem);line-height:1.05;letter-spacing:-.05em}
  .hero-description{font-size:1rem;line-height:1.6;margin:18px auto 0;max-width:320px}
  .hero-art{height:clamp(238px,69vw,380px);width:calc(100% + 32px);margin:2px -16px -8px;mask-image:radial-gradient(ellipse 83% 72% at 51% 53%,#000 49%,transparent 78%)}
  .hero-art>img{object-position:50% 65%}
  .store-group{margin-top:0;max-width:390px;align-self:center;gap:10px}
  .store-placeholder{flex:1 1 0;min-height:62px;padding:9px 12px;gap:9px}
  .hero-bottom{align-self:center;width:100%;margin-top:24px;padding:0;font-size:.75rem}
}
@media(max-width:359px){.landing .site-header{gap:12px}.landing .quiet-link{font-size:.75rem}.hero{padding-top:91px}.hero h1{font-size:2.3rem}.hero .eyebrow{font-size:.75rem;letter-spacing:.08em}.hero-art{height:222px}.hero-description{max-width:282px}.store-placeholder{padding:9px}.hero-bottom{margin-top:20px}}
/* One quiet journey from sunlit water into deeper realms. */
.hero-art{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 77%,transparent);mask-composite:intersect}
.meet-layout h2,.section-heading h2,.future-section h2{font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;letter-spacing:-.045em}
.meet-section{margin-top:0;padding:76px 0 78px;background:radial-gradient(ellipse at 75% 40%,#10464a66,transparent 65%);color:var(--pearl);color-scheme:dark}
.meet-layout{grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.meet-section .eyebrow{color:var(--pink);font-size:.8125rem;margin-bottom:20px}
.meet-layout h2{font-size:clamp(2.4rem,3.6vw,3.15rem);line-height:1.16}
.meet-copy{color:var(--muted);font-size:1.0625rem;line-height:1.85;padding-top:37px}
.meet-copy p+p{margin-top:22px}
.live-note{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:29px;font-size:.875rem;color:var(--muted)}
.live-note span:first-child{font-size:.875rem;letter-spacing:.04em;color:var(--pearl);padding:5px 11px;border:1px solid #a3c7bf77;border-radius:4px}
.world-section{padding-top:58px;padding-bottom:88px}
.section-heading{margin-bottom:44px}.section-heading .eyebrow{font-size:.8125rem;color:#b9d7d0}
.section-heading h2{font-size:clamp(2.4rem,3.5vw,3.15rem)}
.portals{gap:34px}
.portal-copy{padding:23px 4px 0;font-size:1rem;line-height:1.85;color:var(--muted)}
.portal-copy .portal-label{font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;font-weight:400;font-size:1.5rem;line-height:1.28;margin-bottom:15px;letter-spacing:-.025em;max-width:300px;min-height:3.85rem}
.future-section{position:relative;isolation:isolate;background:#032e36;padding:78px 28px 83px;overflow:hidden}
.future-section::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#032e36e6,#032e36bc 50%,#032e36de),linear-gradient(0deg,#032e36,transparent 35%,#032e364d),url('/assets/freshwater-background.webp') center 44%/cover no-repeat;opacity:1}
.future-section .eyebrow{font-size:.8125rem;margin-bottom:19px}
.future-section h2{font-size:clamp(2.5rem,4vw,3.6rem);line-height:1.12}
.future-section>p:not(.eyebrow){max-width:570px;line-height:1.85;font-size:1.0625rem;margin-top:24px}
.site-footer{background:#032a31}
.site-footer nav a{color:var(--pearl)}
.footer-bottom{font-size:.8125rem;border-color:#45676a}
@media(min-width:720px) and (max-width:1023px){
  .meet-layout{gap:48px}.meet-section{padding-block:64px}.meet-copy{font-size:1rem;padding-top:33px}.meet-layout h2{font-size:2.4rem}.live-note{gap:10px}.live-note span:last-child{font-size:.8125rem}
  .world-section{padding-top:45px}.portals{gap:42px;max-width:680px}.portal{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}.portal-copy{padding:0;line-height:1.8}.portal-copy .portal-label{font-size:1.5rem;min-height:0}.portal-art h3{font-size:min(5cqw,1.375rem)}
}
@media(max-width:719px){
  .hero-art{mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 74%,transparent)}
  .meet-section{padding:51px 0 49px}.meet-layout h2{font-size:2.4rem}.meet-section .eyebrow{font-size:.75rem;margin-bottom:16px}.meet-copy{padding-top:0;margin-top:28px;font-size:1rem;line-height:1.8}.meet-copy p+p{margin-top:18px}.live-note{margin-top:23px;gap:12px}.live-note span:last-child{font-size:.8125rem}
  .world-section{padding-top:34px;padding-bottom:55px}.section-heading{margin-bottom:28px}.section-heading .eyebrow{font-size:.75rem}.section-heading h2{font-size:2.3rem;line-height:1.17}.portals{gap:42px}.portal-copy{padding:19px 1px 0;line-height:1.8}.portal-copy .portal-label{font-size:1.55rem;max-width:310px;min-height:0;margin-bottom:13px}
  .future-section{padding:58px 24px 65px}.future-section .eyebrow{font-size:.75rem}.future-section h2{font-size:2.65rem}.future-section>p:not(.eyebrow){font-size:1rem;line-height:1.8}.future-section::before{background-position:42% 45%}
}
@media(max-width:359px){.live-note{gap:9px}.live-note span:last-child{font-size:.75rem}.meet-layout h2{font-size:2.2rem}.section-heading h2{font-size:2.1rem}.future-section h2{font-size:2.4rem}}
@media(min-width:720px) and (max-width:1023px){.hero-layout{column-gap:24px}.hero-art{width:100%;margin-left:0;height:390px}}
@media(max-width:359px){.portal-art h3{font-size:.875rem}}

/* Pre-launch identity: one non-interactive app icon beneath the proposition. */
.landing .site-header{justify-content:space-between;gap:28px;height:96px}
.landing .brand{width:150px}
.landing .quiet-link{border:0;padding:0;gap:11px;font-size:.875rem;color:#deeee7}
.hero{padding-top:116px;padding-bottom:18px}
.hero-layout{grid-template-rows:auto auto;column-gap:34px;min-height:550px;align-items:start}
.hero-copy{padding-top:36px;align-self:start}
.app-preview{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:center;gap:14px;align-self:start;width:100%;padding:25px 0 28px;text-align:center}
.app-preview img{width:144px;height:auto;aspect-ratio:1;object-fit:contain;border-radius:22%;box-shadow:0 10px 30px #001c2945,0 0 24px #a5d5c915}
.app-preview p{font-family:var(--sans);font-size:.875rem;line-height:1.6;font-style:normal;color:#e0ece6;max-width:100%}
.app-preview p{text-wrap:balance}
.hero-scene{mask-image:linear-gradient(180deg,#000 85%,transparent 100%)}

/* Masks follow source coordinates, independent of responsive positioning.
   The broad habitat ellipse fades fully before any image edge. The narrower
   overlapping regions preserve the complete tail, body, feet and gills at full
   opacity. No blur or filter is applied to the original photograph. */
.hero-art{grid-column:2;grid-row:1/3;align-self:center;position:relative;width:112%;margin:0 0 0 -6%;height:510px;background:none;border:0;border-radius:0;overflow:visible;mask:none;clip-path:none}
.hero-art>img{position:absolute;top:50%;left:0;transform:translateY(-61%);width:100%;height:auto;aspect-ratio:1122/1402;object-fit:contain;filter:none;
  mask-image:radial-gradient(ellipse 47% 34% at 52% 58%,#000 52%,transparent 100%),radial-gradient(ellipse 26.5% 8% at 26.5% 51%,#000 92%,transparent 100%),radial-gradient(ellipse 43% 20% at 56% 61%,#000 78%,transparent 100%),radial-gradient(ellipse 24% 19% at 75% 60%,#000 94%,transparent 100%);
  mask-composite:add}
/* The bottom fade is the topmost layer, so it meets the next section exactly. */
.hero::before{background:linear-gradient(0deg,#052f35,rgba(5,47,53,.28) 24%,transparent 65%),linear-gradient(90deg,rgba(3,32,36,.86),rgba(3,32,36,.66) 38%,rgba(3,32,36,.08) 70%)}

.meet-copy,.meet-copy p,.portal-copy,.portal-copy p,.future-section>p,.site-footer p,.site-footer span{font-style:normal}
.meet-copy,.portal-copy>p:not(.portal-label),.future-section>p:not(.eyebrow),.site-footer p{font-family:var(--sans);font-weight:400}
.meet-section{padding:44px 0 32px;background:radial-gradient(ellipse 45% 44% at 72% 50%,#27636722,transparent 100%),radial-gradient(ellipse 40% 45% at 17% 55%,#2375700d,transparent 100%)}
.meet-copy{line-height:1.8;padding-top:36px}
.live-note{gap:14px;margin-top:24px}
.live-note span:first-child{font-weight:600;letter-spacing:.025em;border-color:#a3c7bfaa;background:#7caea010;color:#fff8ef;padding:5px 12px}
.live-note span:last-child{color:#deeee7;font-size:.875rem}
.world-section{padding-top:29px;padding-bottom:76px}
.section-heading{margin-bottom:37px}
.portal-copy{padding-top:22px;line-height:1.75;font-size:1.0625rem}
.portal-copy>p:not(.portal-label){max-width:37ch}
.portal-copy .portal-label{margin-bottom:14px}
.future-section>p:not(.eyebrow){line-height:1.8;color:#d8e8e1}
@media(min-width:1500px){.hero{padding-top:124px}.hero-layout{min-height:574px}.hero-art{height:550px}}
@media(min-width:720px) and (max-width:1023px){
  .hero{padding-top:105px}.hero-layout{min-height:494px;column-gap:24px}.hero-copy{padding-top:23px}.hero-art{width:100%;height:380px;margin-left:0}.hero-art>img{transform:translateY(-58%)}
  .app-preview{padding:24px 0 22px;gap:12px}.app-preview img{width:130px}.app-preview p{max-width:290px}
  .hero::before{background:linear-gradient(0deg,#052f35,transparent 70%),linear-gradient(90deg,rgba(3,32,36,.9),rgba(3,32,36,.66) 44%,rgba(3,32,36,.18))}
  .meet-section{padding:40px 0 28px}.meet-copy{padding-top:32px}.live-note{gap:10px}.live-note span:last-child{font-size:.8125rem}.world-section{padding-top:25px}.portal-copy{padding-top:0;font-size:1.0625rem;line-height:1.7}
}
@media(max-width:719px){
  .landing .site-header{height:74px;gap:20px}.landing .brand{width:132px}.landing .quiet-link{font-size:.8125rem;gap:7px}
  .hero{padding-top:97px;padding-bottom:5px}.hero-layout{min-height:0}.hero-copy{padding:0}
  .hero-art{height:clamp(220px,64vw,342px);width:calc(100% + 20px);margin:4px -10px 0;align-self:center}
  .hero-art>img{top:50%;transform:translateY(-59%)}
  .hero::before{background:linear-gradient(180deg,rgba(3,32,36,.56),rgba(3,32,36,.77) 17%,rgba(3,32,36,.64) 36%,rgba(3,32,36,.1) 62%,#052f35 100%)}
  .app-preview{padding:3px 0 21px;gap:12px}.app-preview img{width:110px}.app-preview p{font-size:.875rem;max-width:290px}
  .meet-section{padding:33px 0 24px}.meet-copy{padding-top:0;margin-top:25px;line-height:1.8}.live-note{margin-top:21px;gap:12px}.live-note span:last-child{font-size:.8125rem}
  .world-section{padding-top:24px;padding-bottom:51px}.section-heading{margin-bottom:28px}.portals{gap:37px}.portal-copy{padding-top:19px;font-size:1.0625rem;line-height:1.75}
}
@media(max-width:359px){.landing .brand{width:118px}.landing .quiet-link{font-size:.75rem}.landing .site-header{gap:12px}.hero{padding-top:87px}.hero-art{height:210px}.app-preview img{width:104px}.app-preview p{max-width:255px}.live-note{gap:9px}.live-note span:last-child{font-size:.75rem}}

/* The expanded matching habitat leaves room for a broad feather entirely outside
   the animal. Both asymmetric ellipses reach zero alpha before the file edges. */
.hero{overflow:clip}
.hero-art{width:120%;margin-left:-10%}
.hero-art>img{aspect-ratio:3/2;transform:translateY(-55%);mask-image:radial-gradient(ellipse 49% 43% at 49% 56%,#000 72%,transparent 100%),radial-gradient(ellipse 37% 30% at 57% 66%,#000 35%,transparent 100%);mask-composite:add}
@media(min-width:720px) and (max-width:1023px){.hero-art{width:110%;margin-left:-5%}.hero-art>img{transform:translateY(-55%)}}
@media(max-width:719px){.hero-copy{align-self:stretch}.hero-art{width:128%;margin:4px -14% 0}.hero-art>img{transform:translateY(-55%)}.app-preview p{max-width:100%}}

/* Lock both dimensions: grid/flex sizing must never compress the square icon. */
.app-preview{--app-icon-size:144px}
.app-preview>img{display:block;flex:none;width:var(--app-icon-size);height:var(--app-icon-size);min-width:var(--app-icon-size);min-height:var(--app-icon-size);max-width:var(--app-icon-size);max-height:var(--app-icon-size);aspect-ratio:1 / 1;object-fit:contain;object-position:center;align-self:center}
@media(min-width:720px) and (max-width:1023px){.app-preview{--app-icon-size:130px}}
@media(max-width:719px){.app-preview{--app-icon-size:110px}}
@media(max-width:359px){.app-preview{--app-icon-size:104px}}

/* Genuine captures: full image pixels and status bars, without fake devices. */
.showcase-section:has(.app-gallery){padding-block:58px 64px}
.showcase-inner.showcase-gallery{display:block}
.showcase-title{margin-bottom:32px}
.app-gallery{display:grid;grid-template-columns:1.7fr 1.45fr repeat(4,minmax(0,1fr));gap:18px;align-items:end}
.app-shot{min-width:0;margin:0}
.app-shot-image{display:block;padding:4px;border:1px solid #59877b40;border-radius:6px;background:#fffaf4;box-shadow:0 8px 25px #123c3510;cursor:zoom-in}
.app-shot-image img{display:block;width:100%;height:auto;aspect-ratio:707 / 1536;object-fit:contain;max-width:100%;border:0;border-radius:0;mask:none;clip-path:none}
.app-shot figcaption{min-height:3em;margin-top:13px;color:var(--ink);font-size:.875rem;font-style:normal;font-weight:700;line-height:1.45;text-align:center}
.app-shot-image:hover{border-color:#315f5e}
.app-shot-image:focus-visible{outline-color:#103d40}
@media(min-width:720px) and (max-width:1023px){
  .app-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px;align-items:start}
  .gallery-primary{grid-column:span 2;width:80%;max-width:285px;justify-self:center}
  .gallery-secondary{grid-column:span 2;width:72%;max-width:250px;justify-self:center;align-self:end}
}
@media(max-width:719px){
  .showcase-section:has(.app-gallery){padding-block:38px 40px}
  .showcase-title{margin-bottom:25px}
  .app-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 17px;align-items:start}
  .gallery-primary{grid-column:span 2;width:min(100%,270px);justify-self:center}
  .gallery-secondary{grid-column:span 2;width:min(90%,232px);justify-self:center}
  .app-shot figcaption{margin-top:10px}
}

/* The foreground carries its own detailed alpha; the existing scene supplies
   all water, plants and gravel. No habitat island or shaped CSS mask remains. */
.hero-art{width:88%;margin-left:6%}
.hero-art>img{mask:none;-webkit-mask:none;clip-path:none;filter:none;transform:translateY(-55%)}
@media(min-width:720px) and (max-width:1023px){.hero-art{width:92%;margin-left:4%}}
@media(max-width:719px){.hero-art{width:90%;margin:4px 5% 0}}

/* Final focused refinements: preserve all approved compositions and spacing. */
.app-preview{--app-icon-size:216px}
.hero-art>img{transform:translateY(-55%) scaleX(-1);transform-origin:center}
@media(min-width:720px) and (max-width:1023px){.app-preview{--app-icon-size:190px}}
@media(max-width:719px){.app-preview{--app-icon-size:176px}}
@media(max-width:359px){.app-preview{--app-icon-size:160px}}

.showcase-section:has(.app-gallery){position:relative;isolation:isolate;background:#d2e5e7;background-image:linear-gradient(125deg,#e2efecf2,#d2e7e5e8 55%,#c5dde5f2),url('/assets/freshwater-background.webp');background-size:cover;background-position:center 38%}
.app-shot-image{background:#eff6f2;border-color:#698f914d}

/* Only the quiet outer edges carry bubbles, behind all content. */
.ambient-bubbles{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none;--rise:900px}
.ambient-bubbles i{position:absolute;bottom:-14px;left:var(--x);width:var(--size);height:var(--size);border:1px solid #e7f7f1a8;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f3fffb70,transparent 48%);opacity:0;animation:ambient-rise var(--speed) linear var(--delay) infinite}
.ambient-bubbles i:nth-child(1){--x:1.8%;--size:5px;--speed:39s;--delay:-9s;--drift:6px}
.ambient-bubbles i:nth-child(2){--x:2.7%;--size:8px;--speed:47s;--delay:-12s;--drift:-4px}
.ambient-bubbles i:nth-child(3){--x:2.1%;--size:3px;--speed:35s;--delay:-6s;--drift:3px}
.ambient-bubbles i:nth-child(4){--x:97.2%;--size:6px;--speed:43s;--delay:-28s;--drift:-5px}
.ambient-bubbles i:nth-child(5){--x:96.5%;--size:4px;--speed:36s;--delay:-23s;--drift:5px}
.ambient-bubbles i:nth-child(6){--x:97.8%;--size:8px;--speed:51s;--delay:-32s;--drift:-7px}
.future-section .ambient-bubbles{--rise:550px}
.showcase-section .ambient-bubbles i{border-color:#608f965e;background:none}
@keyframes ambient-rise{0%{transform:translate3d(0,0,0) scale(.9);opacity:0}12%{opacity:.26}78%{opacity:.18}100%{transform:translate3d(var(--drift),calc(-1 * var(--rise)),0) scale(1.05);opacity:0}}
.ambient-paused .ambient-bubbles i{animation-play-state:paused}
@media(max-width:1023px){.showcase-section .ambient-bubbles{--rise:1350px}}
@media(max-width:719px){.showcase-section .ambient-bubbles{--rise:2450px}.ambient-bubbles i:nth-child(2),.ambient-bubbles i:nth-child(6){display:none}.ambient-bubbles i:nth-child(-n+3){left:1%}.ambient-bubbles i:nth-child(n+4){left:97%}}
@media(prefers-reduced-motion:reduce){.ambient-bubbles{display:none}.ambient-bubbles i{animation:none}}

.sound-toggle{position:fixed;z-index:8;right:max(20px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 13px;border:1px solid #94bab485;border-radius:24px;background:#0b3c40ed;color:#f0f6ed;font:500 12px/1 var(--sans);box-shadow:0 3px 15px #02272a24;cursor:pointer}
.sound-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sound-toggle .sound-waves{display:none}.sound-toggle[aria-pressed="true"] .sound-waves{display:block}.sound-toggle[aria-pressed="true"] .sound-slash{display:none}
.sound-toggle:hover{background:#144d50}.sound-toggle:focus-visible{outline:2px solid #f0c1bb;outline-offset:4px}.sound-toggle[hidden]{display:none}
.sound-toggle.is-footer-docked{position:absolute;top:calc(var(--footer-top) + 3px);bottom:auto;width:44px;padding:0}
.sound-toggle.is-footer-docked span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:719px){.sound-toggle{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:44px;padding:0}.sound-toggle span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:719px){.sound-toggle.is-footer-docked{top:calc(var(--footer-top) + 24px);bottom:auto}}

/* Approved head-on artwork: intrinsic grid sizing removes the former empty
   732–880px image track. The copy retains its established position. */
.hero-layout{grid-template-rows:max-content max-content;min-height:0}
.app-preview{width:var(--app-icon-size);margin-left:0;justify-self:start;align-items:center;text-align:center;padding-bottom:12px}
.app-preview>img{align-self:center}
.app-preview p{flex:none;width:240px;max-width:calc(100vw - 56px);text-wrap:initial;text-align:center}
.hero-art{width:100%;height:auto;aspect-ratio:1;margin:0;align-self:center;overflow:visible}
/* Fade to zero before the JPEG's side boundaries: the broad scenery mask alone
   extended beyond those boundaries and left a visible vertical seam. Only
   opacity is feathered; the approved animal pixels receive no blur. */
.hero-art>img{position:static;width:100%;height:auto;aspect-ratio:1;object-fit:contain;transform:none;filter:none;clip-path:none;
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.18) 1.5%,rgba(0,0,0,.65) 4%,#000 7%,#000 93%,rgba(0,0,0,.65) 96%,rgba(0,0,0,.18) 98.5%,transparent),url('/assets/hero-scenery-mask.svg');mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:intersect}
@media(max-width:719px){
  .hero-copy{text-align:left}
  .hero-description{margin-left:0;margin-right:0}
  .app-preview{order:1;padding-top:20px;padding-bottom:0}
  .app-preview p{width:216px;font-size:.8125rem}
  .hero-art{order:2;width:min(100%,380px);height:auto;margin:12px 0 0;align-self:center}
}

/* Long-form supporting pages keep the existing freshwater type and footer. */
.document-nav{margin:28px 0 36px;padding:22px 24px;border-block:1px solid var(--line)}
.document-nav p{font-weight:600;color:var(--pearl)}
.document-nav ol{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;margin:12px 0 0;padding-left:20px}
.document-nav a{display:inline-block;padding:5px 0;font-size:.875rem}
.document section{scroll-margin-top:28px}
.document section p+ul,.document section p+ol{margin-top:14px}
.document section li+li{margin-top:10px}
.document strong{color:var(--pearl);font-weight:600}
.document code{font-size:.9em;overflow-wrap:anywhere}
.document a{overflow-wrap:anywhere}
body:not(.landing) .sound-toggle:not(.is-footer-docked){position:absolute;top:112px;bottom:auto}
@media(max-width:719px){.document-nav{padding:18px 16px}.document-nav ol{grid-template-columns:1fr;gap:0}.document section{scroll-margin-top:20px}}
@media(max-width:719px){body:not(.landing) .sound-toggle:not(.is-footer-docked){top:90px}}
@media(max-width:359px){.app-preview p{width:200px;font-size:.75rem}}

/* A quiet shared count, tucked beneath the existing footer information. */
.visitor-counter{margin-top:17px;color:var(--muted);font-size:.75rem;line-height:1.65}
.visitor-counter summary{display:flex;align-items:center;gap:7px;width:fit-content;min-height:36px;cursor:pointer;list-style:none}
.visitor-counter summary::-webkit-details-marker{display:none}
.visitor-counter summary svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;flex:none}
.visitor-counter summary strong{color:#e0ece6;font-weight:600;font-variant-numeric:tabular-nums}
.visitor-counter summary .count-info{font-size:.6875rem;border:1px solid #83aaa680;border-radius:50%;width:13px;height:13px;line-height:11px;text-align:center;margin-left:2px}
.visitor-counter summary:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:3px}
.visitor-counter[open] summary{margin-bottom:9px}
.visitor-count-info{max-width:500px;padding:14px 16px;border:1px solid #49777a88;border-radius:5px;background:#073940}
.visitor-count-info p+p{margin-top:8px}
.visitor-count-actions{display:flex;gap:8px 18px;align-items:center;flex-wrap:wrap;margin-top:10px}
.visitor-count-actions button{font:inherit;color:var(--pearl);background:none;border:0;padding:5px 0;min-height:36px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.visitor-count-actions button:disabled{opacity:.6;cursor:default}
.visitor-count-actions a{min-height:36px;display:inline-flex;align-items:center}
.visitor-counter [hidden]{display:none!important}