:root{--ink:#254452;--muted:#526d78;--blue:#dceef5;--cream:#fcf9f0;--line:#cbdfe5;--accent:#326781}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6}header{background:var(--blue);overflow:hidden;border-bottom:1px solid var(--line)}nav,main,footer,.hero{max-width:1240px;margin:auto}nav{display:flex;justify-content:space-between;align-items:center;padding:25px 32px}.brand{color:var(--ink);font-family:Outfit,sans-serif;font-size:26px;font-weight:600;text-decoration:none;display:flex;gap:12px;align-items:center}.brand:first-letter{font-size:38px}.tag{font-size:14px;color:var(--muted)}.hero{padding:38px 32px 24px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:#466d7c;margin:0 0 12px}h1,h2,h3{font-family:Outfit,sans-serif;line-height:1.15;font-weight:500}h1{font-size:clamp(42px,5.5vw,70px);letter-spacing:-.04em;margin:12px 0 18px}h2{font-size:26px;letter-spacing:-.02em;margin:0 0 10px}h3{font-size:20px;margin:0 0 8px}.hero>p:not(.eyebrow){font-size:18px;max-width:520px;color:var(--muted)}.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.hero-tags span,.badge{border:1px solid #bed7e1;border-radius:30px;padding:6px 12px;font-size:12px;background:#edf6f9;color:#355d6e;display:inline-block}.wave{color:#b9dbe8;white-space:nowrap;font-size:70px;line-height:.9;letter-spacing:5px;margin-top:12px}main{padding:32px;display:grid;gap:28px}.panel{background:#fffefa;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 5px 20px #29475a05}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.controls{display:flex;gap:18px;align-items:end}.controls label{flex:1}.controls .destination{flex:2}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--muted)}input,select,button{font:inherit}input,select{border:1px solid #abc7d3;border-radius:11px;background:#f4f9fa;color:var(--ink);padding:12px;min-width:0;width:100%;font-size:15px}button{cursor:pointer;border:1px solid #b6cfda;border-radius:11px;padding:12px 17px;font-size:14px;font-weight:600;background:#f2f8fa;color:var(--ink)}button:hover{background:#deedf3}button.primary{background:var(--accent);color:white;border-color:var(--accent)}button.primary:hover{background:#244e65}a{color:#28617e;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a96936;outline-offset:3px}.planner-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:20px;font-size:13px}summary{cursor:pointer}.coords{display:flex;align-items:end;gap:10px;margin-top:10px}.coords input{max-width:140px}.tide-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:28px;min-width:0}.tide-card h2{font-size:24px}.tide-reading{display:flex;align-items:center;gap:18px;margin:18px 0}.tide-reading>span{font-family:Outfit,sans-serif;font-size:64px;line-height:1;color:#326781}.tide-reading strong{display:block;font-size:12px;letter-spacing:.04em}.tide-reading small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.notice{background:#edf5f8;border-radius:12px;padding:14px;font-size:13px;line-height:1.65}.countdown-heading{font-size:12px;color:var(--muted);margin-top:20px}.countdown-heading span{display:block;color:var(--ink);font-weight:600;margin-top:4px}.countdown{display:flex;gap:12px;margin-top:12px}.countdown div{background:#f5f1e5;border:1px solid #e6dfca;flex:1;border-radius:12px;text-align:center;padding:10px}.countdown strong{display:block;font-size:24px;font-weight:500}.countdown span{font-size:11px;color:var(--muted)}.muted{color:var(--muted);font-size:14px;margin:0}.chart-panel{min-width:0;display:flex;flex-direction:column}.chart-wrap{position:relative;min-height:250px;flex:1;margin-top:20px}.chart-footnote{font-size:12px;color:var(--muted);margin:15px 0 0}#map{height:390px;border-radius:14px;border:1px solid var(--line);z-index:1}.tabs{display:flex;gap:4px;background:#e7f0f4;padding:5px;border-radius:13px;flex-shrink:0}.tabs button{border:0;padding:8px 13px;background:transparent}.tabs button[aria-pressed=true]{background:#fffefa;box-shadow:0 2px 4px #25445212}.wildlife{padding:8px 0}#species-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}#species-grid article{background:#fffefa;border:1px solid var(--line);padding:24px;border-radius:18px;display:flex;flex-direction:column;gap:8px}#species-grid h3{color:var(--ink);font-size:22px}#species-grid p{margin:0;color:var(--muted);font-size:14px}#species-grid p.italic{font-style:italic;font-size:13px}#species-grid a{font-size:13px;margin-top:auto;padding-top:10px}.empty-guide{grid-column:1/-1;padding:26px;border:1px dashed #b9cfd7;border-radius:15px}.care{display:flex;gap:20px;background:#f2ead7;border:1px solid #e2d7ba;border-radius:18px;padding:24px}.care>span{font-size:32px;color:#927044}.care p{margin:0;color:#625e50;font-size:14px}footer{padding:20px 32px 32px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}footer>span:first-child{font-size:17px}.leaflet-container{font-family:'DM Sans',sans-serif} @media(max-width:900px){.tide-layout{grid-template-columns:1fr}.controls{flex-wrap:wrap}.controls .destination{flex-basis:100%}#species-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:start;flex-direction:column}.tag{display:none}}@media(max-width:560px){nav,.hero,main,footer{padding-left:20px;padding-right:20px}.panel{padding:20px}.controls{flex-direction:column;align-items:stretch}.controls label{width:100%}.planner-bottom{flex-direction:column}.coords{flex-wrap:wrap}#species-grid{grid-template-columns:1fr}.brand{font-size:21px}.tabs{max-width:100%;flex-wrap:wrap}.tabs button{padding:8px 10px}footer{flex-direction:column}.chart-wrap{min-height:220px}#map{height:310px}.care{padding:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Little coastal friends: decorative vector art, never identification photos. */
.hero{position:relative;min-height:350px}.hero>p,.hero>h1,.hero-tags{position:relative;z-index:1}.hero-friends{position:absolute;right:42px;top:30px;width:430px;height:320px;pointer-events:none}.sea-sticker{display:inline-block;pointer-events:none;user-select:none}.sea-sticker svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 0 #ffffffa6)}.hero-friends .sea-sticker{position:absolute;width:145px;height:145px}.friend-0{left:20px;top:0;transform:rotate(-12deg)}.friend-1{right:0;top:8px;transform:rotate(18deg)}.friend-2{left:90px;bottom:8px;transform:rotate(9deg)}.friend-3{right:0;bottom:5px;transform:rotate(-12deg)}.panel,.care,.wildlife{position:relative}.corner-friend{position:absolute;right:18px;top:-24px;width:64px;height:64px;transform:rotate(12deg);z-index:2}.panel>.section-heading,.wildlife>.section-heading{padding-right:48px}.care .corner-friend{top:auto;bottom:-12px}.panel{border-radius:27px;box-shadow:0 6px 0 #e2ecec88}.badge,.hero-tags span{background:#eef6f8;border-style:dashed}.hero-tags span:nth-child(2){background:#f9e9e3;border-color:#ddc5bc}.hero-tags span:nth-child(3){background:#eeecf7;border-color:#d2cbe6}.tabs{background:#e8e8f4}.tabs button[aria-pressed=true]{background:#fff8ed;color:#526080}.controls{flex-wrap:wrap}.controls .state-filter{flex:1;min-width:180px}.controls .destination{min-width:260px}.controls input{min-height:49px}#species-grid article{border-radius:25px;border-bottom:4px solid #d9e8ee;overflow:hidden}#species-grid article:nth-child(3n+2){border-bottom-color:#e9d9e9}#species-grid article:nth-child(3n){border-bottom-color:#eadfc1}.organism-photo{margin:-24px -24px 10px;background:#e5eff0}.organism-photo img{display:block;width:100%;height:210px;object-fit:cover}.organism-photo figcaption{padding:8px 14px;line-height:1.35;background:#f0f5f4}#species-grid .organism-photo figcaption a{font-size:10px;color:#506b75;padding:0;display:block}.photo-notice{font-size:12px;color:var(--muted)}@media(max-width:1050px){.hero-friends{right:20px;width:340px}.hero-friends .sea-sticker{width:120px;height:120px}.hero>p:not(.eyebrow){max-width:460px}}@media(max-width:900px){.hero-friends{position:relative;right:auto;top:auto;width:100%;height:auto;display:flex;justify-content:center;gap:14px;margin-top:20px}.hero-friends .sea-sticker{position:static;width:90px;height:90px}.controls .state-filter,.controls .destination{flex:1;min-width:220px}.controls label{flex-basis:40%}}@media(max-width:560px){.hero-friends{gap:4px}.hero-friends .sea-sticker{width:23%;height:auto;aspect-ratio:1}.corner-friend{width:52px;height:52px;top:-20px;right:10px}.controls .state-filter,.controls .destination{min-width:0;flex:auto}.organism-photo img{height:220px}}
[hidden]{display:none!important}.table-scroll{overflow-x:auto;margin-top:18px}table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}th{background:#e8f2f5;font-weight:600}th,td{padding:13px 16px;border-bottom:1px solid var(--line)}tbody tr:nth-child(even){background:#f9f8f1}.station-browser{margin-top:28px;padding-top:24px;border-top:1px dashed var(--line)}.station-browser>label{margin:18px 0 12px}.station-browser input{max-width:650px}#station-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:350px;overflow:auto;margin-top:16px}.station-result{text-align:left;background:#f3f8f8;font-size:13px}.station-pages{display:flex;gap:10px;margin-top:16px}button:disabled{opacity:.45;cursor:default}.wildlife-picker{max-width:490px;margin-bottom:16px}.wildlife .notice{font-size:13px;margin-bottom:24px}@media(max-width:600px){#station-results{grid-template-columns:1fr}th,td{padding:10px;font-size:12px}}
/* Lagoon blues, a unified tide notebook, and scattered little companions. */
:root{--ink:#254b64;--muted:#506c82;--line:#bdd5e5;--blue:#d4e9f5;--accent:#366a98}body{background:linear-gradient(145deg,#fbf9ef 0%,#eef6fb 46%,#f8f8ee 100%)}header{background:linear-gradient(115deg,#dceff7 0%,#c9e4f3 56%,#dce3f6 100%)}.planner{background:linear-gradient(135deg,#f8fcff,#edf5fc);border-color:#b5d3e7}.primary{box-shadow:0 4px 0 #224f7920}.badge{background:#e1edf8;color:#355b81;border-color:#b3cce4}.tide-section{background:linear-gradient(160deg,#f5fbff,#e8f2fb 72%,#e6edf9);border-color:#a9c7df;padding:30px}.tide-section>.section-heading{margin-bottom:25px}.tide-section .tide-layout{gap:26px;align-items:stretch}.tide-card{padding:22px;background:#ffffffb8;border:1px solid #c7ddee;border-radius:21px}.tide-card h2{font-size:21px}.tide-section .chart-panel{padding:22px;background:#fafdff;border:1px solid #c2daec;border-radius:21px}.chart-panel h2{font-size:24px}.tide-section .chart-wrap{min-height:280px}.chart-panel>.section-heading{padding-right:0;flex-wrap:wrap;gap:8px}.tide-section .notice{background:#e6f0fa;color:#365b77}.countdown div{background:linear-gradient(#e3effa,#dbe9f7);border-color:#bed4e9}.tide-table-panel{margin-top:24px;border-top:1px dashed #9fbed9;padding-top:24px}.tide-table-panel .eyebrow{color:#5775a1}.tide-table-panel .table-scroll{border:1px solid #c3d9e9;border-radius:15px;overflow:hidden;overflow-x:auto;background:#fcfeff}.tide-table-panel th{background:#d8e8f7;color:#35597c}.tide-table-panel tbody tr:nth-child(even){background:#edf5fc}.tide-table-panel tbody tr:hover{background:#dcecf8}.tide-table-panel tbody tr:last-child td{border-bottom:0}main>section:has(#map){background:linear-gradient(145deg,#fafdff,#edf7f9)}#map{background:#cde4f1;border-color:#accddd}.station-browser{background:#edf4fb;border:1px solid #c6dbed;border-radius:19px;padding:22px}.station-result{background:#f9fcff;border-color:#bfd5e8}.station-result:nth-child(3n){background:#e1eef8}.station-result:hover{background:#d4e7f7}.wildlife{background:linear-gradient(130deg,#e8f3f9,#edf0fb);border:1px solid #cadbec;border-radius:27px;padding:26px}.wildlife>.section-heading{padding-right:0}#species-grid article:nth-child(3n+1){border-bottom-color:#9fc5e1}#species-grid article:nth-child(3n+2){border-bottom-color:#b5bfe4}#species-grid article:nth-child(3n){border-bottom-color:#a7d5d9}.care{background:linear-gradient(110deg,#f4ecd7,#e9f1f6);border-color:#d5d9d8}.friend-left,.friend-bottom-right,.friend-heading,.friend-bottom-left,.friend-inline{position:absolute;width:62px;height:62px;z-index:2}.friend-left{left:-26px;top:35px;transform:rotate(-18deg)}.friend-bottom-right{right:40px;bottom:-25px;transform:rotate(12deg)}.friend-heading{right:27px;top:-28px;transform:rotate(-8deg)}.friend-bottom-left{left:32px;bottom:-28px;transform:rotate(-15deg)}.friend-inline{right:22px;bottom:-20px;width:54px;height:54px;transform:rotate(20deg)}main{gap:38px}.hero-friends{right:25px;top:18px;width:450px;height:340px}.hero-friends .friend-0{left:5px;top:48px}.hero-friends .friend-1{right:4px;top:0}.hero-friends .friend-2{left:120px;bottom:3px}.hero-friends .friend-3{right:-5px;bottom:38px;width:110px;height:110px}@media(max-width:1050px){.hero-friends{width:345px}.hero-friends .friend-2{left:72px}.hero-friends .friend-3{width:90px;height:90px}}@media(max-width:900px){.hero-friends{position:relative;right:auto;top:auto;width:100%;height:auto}.tide-section .tide-layout{grid-template-columns:1fr}.tide-section .chart-wrap{min-height:260px}.chart-panel>.section-heading{flex-direction:row;align-items:center}.hero-friends .friend-3{width:90px;height:90px}}@media(max-width:560px){.tide-section,.wildlife{padding:20px}.tide-card,.tide-section .chart-panel{padding:16px}.friend-left{left:-12px;top:38px;width:38px;height:38px}.friend-bottom-right{right:18px;width:48px;height:48px;bottom:-20px}.friend-heading{right:20px;width:46px;height:46px;top:-24px}.friend-bottom-left{width:46px;height:46px;bottom:-22px}.station-browser{padding:16px}.hero-friends .friend-3{width:23%;height:auto}.tide-section .chart-wrap{min-height:235px}}
/* Conservation labels use text as well as color. */
.conservation-badge{display:inline-flex;align-self:flex-start;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid #c8d6df;background:#eef3f7;color:#405c70}.status-lc{background:#e6f1e9;color:#315c47;border-color:#b8d5c0}.status-nt{background:#f5efdb;color:#71602e;border-color:#dfd09d}.status-vu{background:#f9e9d3;color:#81551f;border-color:#e5c596}.status-en,.status-cr{background:#f6e1e4;color:#87384c;border-color:#dfb1be}.status-ew,.status-ex{background:#e5e2ec;color:#564463;border-color:#c7bed4}.status-dd,.status-ne,.status-unknown{background:#e9eff5;color:#50697c}#species-grid .conservation-source,#species-grid .conservation-source a{font-size:11px;line-height:1.5;margin:0;padding:0}.photo-status-help{font-size:12px;color:var(--muted);max-width:850px}.photo-frame{height:230px;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e7f1f5,#f2f5ed);overflow:hidden}.organism-photo .photo-frame img{display:block;image-orientation:from-image;object-fit:contain;object-position:center;max-width:100%;max-height:100%;width:100%;height:100%;flex-shrink:0;transform-origin:center;transition:transform .15s}.organism-photo .photo-frame img[style]{max-width:none;max-height:none}.photo-tools{display:flex;justify-content:center;gap:8px;background:#eff5f7;padding:7px}.photo-tools button{padding:3px 12px;font-size:14px;background:#fbfdfd}.photo-tools button:last-child{font-size:11px}@media(prefers-reduced-motion:reduce){.photo-frame img{transition:none}}
/* Source orientation, no user rotation, and edge-to-edge photo frames. */
.organism-photo .photo-frame img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;object-position:center;image-orientation:from-image;transform:none;transition:none}.organism-photo .photo-frame img[style]{width:100%;height:100%;max-width:100%;max-height:100%;transform:none}.status-ns_g1,.status-ns_g2{background:#f6e1e4;color:#87384c;border-color:#dfb1be}.status-ns_g3{background:#f9e9d3;color:#81551f;border-color:#e5c596}.status-ns_g4,.status-ns_g5{background:#e6f1e9;color:#315c47;border-color:#b8d5c0}.status-unassessed,.status-ns_gnr,.status-ns_gu,.status-ns_gna{background:#e9eff5;color:#50697c}.assessment-details{font-size:11px;color:var(--muted)}.assessment-details summary{font-weight:600}.assessment-details ul{padding-left:17px}.assessment-details li{margin:6px 0}#species-grid .assessment-details a{padding:0;font-size:11px}
/* From sandy surface to ocean depths. */
html{min-height:100%;background:#102d53}body{min-height:100vh;background:linear-gradient(180deg,#e1f3fc 0%,#b8dcf0 25%,#75b1d6 49%,#397cac 72%,#102d53 100%);background-repeat:no-repeat}header{background:linear-gradient(120deg,#fffaf0,#f7eedb);border-bottom-color:#d4e7ef}.wave{color:#c0dfef}.hero-tags span{background:#eef5f8}.hero-tags span:nth-child(2){background:#f5e8dc}.hero-tags span:nth-child(3){background:#e6edf6}footer{color:#edf5ff}footer a{color:#e3f2ff}.panel,.wildlife{box-shadow:0 8px 26px #12385e15}.care{background:linear-gradient(120deg,#fbf5e7,#e8f2fa)}
/* Photo bubbles keep the credited caption outside the circular crop. */
#species-grid .organism-photo{margin:-4px 0 12px;background:transparent;display:flex;flex-direction:column;align-items:center;gap:12px}.organism-photo .photo-frame{position:relative;width:min(100%,240px);height:auto;aspect-ratio:1;border-radius:50%;border:5px solid #d6ecf8;background:#e5f3fc;box-shadow:0 0 0 2px #a7d1e7,0 9px 20px #376f9c22,inset 0 0 18px #fff;isolation:isolate;flex-shrink:0}.organism-photo .photo-frame img,.organism-photo .photo-frame img[style]{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;object-position:center;border-radius:50%;position:absolute;inset:0}.organism-photo .photo-frame::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 27% 17%,#ffffffad 0%,#ffffff38 7%,transparent 18%),linear-gradient(145deg,#ffffff38,transparent 35%,transparent 78%,#b4e0fb55);pointer-events:none;z-index:1;box-shadow:inset 0 0 12px #ffffff80}.organism-photo figcaption{width:100%;background:#edf5f8;border-radius:12px;text-align:center;padding:8px 12px}#species-grid article{align-items:stretch}
/* Soft bands of surf roll down the cream beach behind the hero content. */
header{position:relative;isolation:isolate}header nav,header .hero{position:relative;z-index:2}.beach-surf{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.62;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent)}.beach-surf>svg{position:absolute;inset:0;left:-10%;width:120%;height:100%;overflow:visible}.surf-swell{transform-box:view-box;animation:beach-wash 16s linear infinite;will-change:transform,opacity}.surf-water{fill:#9ecfe7;fill-opacity:.24}.surf-foam{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-opacity:.9}.surf-bubbles{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 17 3 26 1 12;stroke-opacity:.7}.swell-two{animation-delay:-5.33s}.swell-two .surf-water{fill:#7bbad9;fill-opacity:.2}.swell-two .surf-foam{stroke-width:7}.swell-three{animation-delay:-10.66s}.swell-three .surf-water{fill:#b6dfe9;fill-opacity:.3}.swell-three .surf-foam{stroke-width:12;stroke-opacity:.7}@keyframes beach-wash{0%{transform:translate3d(-2%,-30%,0);opacity:0}12%{opacity:.85}75%{opacity:.7}100%{transform:translate3d(2%,105%,0);opacity:0}}.shoreline-edge{position:relative;z-index:1;height:54px;width:100%;margin-top:10px;pointer-events:none}.shoreline-edge svg{display:block;width:100%;height:100%}@media(max-width:560px){.beach-surf{opacity:.5}.shoreline-edge{height:36px}.surf-swell{animation-duration:19s}}@media(prefers-reduced-motion:reduce){.surf-swell{animation:none;will-change:auto;opacity:.55;transform:translateY(30%)}.swell-two{transform:translateY(58%);opacity:.4}.swell-three{display:none}}
/* Staggered little wiggles: animate the art, preserving each sticker's placement. */
.sea-sticker>svg{transform-origin:50% 65%;animation:sea-friend-jiggle var(--jiggle-duration,5s) ease-in-out var(--jiggle-delay,0s) infinite}@keyframes sea-friend-jiggle{0%,60%,100%{transform:translateY(0) rotate(0)}68%{transform:translateY(-3px) rotate(-7deg)}75%{transform:translateY(-1px) rotate(7deg)}82%{transform:translateY(-2px) rotate(-4deg)}89%{transform:translateY(0) rotate(3deg)}95%{transform:translateY(0) rotate(-1deg)}}.extra-friend-left,.extra-friend-right{position:absolute;width:49px;height:49px;z-index:2;bottom:-22px}.extra-friend-left{left:24px;transform:rotate(13deg)}.extra-friend-right{right:22px;transform:rotate(-15deg)}.tide-table-panel,.station-browser{position:relative}.table-friend{position:absolute;right:10px;top:14px;width:48px;height:48px;transform:rotate(-10deg)}.tide-table-panel>h3{padding-right:58px}.station-friend{position:absolute;right:22px;bottom:8px;width:49px;height:49px;transform:rotate(12deg)}.station-pages{padding-right:62px}.footer-friends{display:flex;align-items:center;gap:12px;flex-shrink:0}.footer-friend{width:43px;height:43px}footer{align-items:center}.care>.extra-friend-right{right:auto;left:45%;bottom:-24px}.wildlife>.extra-friend-left{left:auto;right:80px}.tide-section>.extra-friend-left{bottom:auto;top:48%;left:-24px}@media(max-width:560px){.extra-friend-left,.extra-friend-right{width:39px;height:39px;bottom:-18px}.extra-friend-left{left:60px}.extra-friend-right{right:64px}.tide-section>.extra-friend-left{left:-12px;width:33px;height:33px}.table-friend{width:39px;height:39px}.station-friend{width:39px;height:39px;right:14px}.footer-friends{align-self:center}.footer-friend{width:39px;height:39px}}@media(prefers-reduced-motion:reduce){.sea-sticker>svg{animation:none;transform:none}}
/* Pearlescent bubbles and ocean-current ribbons behind the main page. */
.ocean-scene{position:relative;isolation:isolate}.ocean-scene>main{position:relative;z-index:1}.depth-decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.depth-bubble{position:absolute;display:block;width:var(--bubble-size,290px);aspect-ratio:1;border-radius:50%;border:1px solid #e8f8ff85;background:radial-gradient(ellipse at 29% 22%,#ffffffad 0%,#ffffff26 9%,transparent 28%),radial-gradient(ellipse at 77% 79%,#a6f0e545,transparent 43%),radial-gradient(ellipse at 68% 22%,#ddbcf53d,transparent 48%),radial-gradient(circle,transparent 48%,#e2faff18 70%,#f0c6f638 92%);box-shadow:inset 3px 5px 22px #f5faff35,inset -5px -7px 24px #b9c0ff45,0 0 28px #c9f2ff19;animation:depth-bubble-float 17s ease-in-out infinite alternate}.depth-bubble::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:3px;background:conic-gradient(from 35deg,#bfeeff66,#f7d6ffbb,#a4e6f788,#c2f6e288,#fff0c899,#f5c6efbb,#c2edff88,#bfeeff66);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}.depth-bubble::after{content:'';position:absolute;top:10%;left:19%;width:33%;height:13%;border-radius:50%;transform:rotate(-35deg);background:linear-gradient(180deg,#fff9,#fff0);filter:blur(2px)}.bubble-one{--bubble-size:clamp(220px,28vw,410px);left:-9%;top:1%;animation-delay:-4s}.bubble-two{--bubble-size:clamp(180px,23vw,340px);right:-7%;top:14%;animation-delay:-11s}.bubble-three{--bubble-size:clamp(220px,30vw,450px);left:-12%;top:31%;animation-delay:-7s}.bubble-four{--bubble-size:clamp(160px,19vw,290px);right:2%;top:40%;animation-delay:-2s}.bubble-five{--bubble-size:clamp(230px,31vw,440px);right:-11%;top:57%;animation-delay:-13s}.bubble-six{--bubble-size:clamp(190px,26vw,370px);left:-6%;top:70%;animation-delay:-6s}.bubble-seven{--bubble-size:clamp(160px,20vw,300px);left:26%;top:89%;animation-delay:-10s}.bubble-eight{--bubble-size:clamp(220px,28vw,400px);right:-8%;bottom:1%;animation-delay:-3s}.depth-currents{position:absolute;inset:0;width:100%;height:100%;opacity:.4;animation:current-sway 24s ease-in-out infinite alternate}@keyframes depth-bubble-float{from{transform:translate3d(0,8px,0) rotate(-3deg)}to{transform:translate3d(8px,-10px,0) rotate(3deg)}}@keyframes current-sway{from{transform:translateX(-.6%)}to{transform:translateX(.6%)}}@media(max-width:600px){.depth-bubble{opacity:.75}.bubble-one,.bubble-three,.bubble-six{left:-110px}.bubble-two,.bubble-five,.bubble-eight{right:-110px}.depth-currents{opacity:.3}}@media(prefers-reduced-motion:reduce){.depth-bubble,.depth-currents{animation:none}}
/* Rounded bubble lettering with a springy, raised hero title. */
body,.leaflet-container{font-family:'Nunito','Trebuchet MS',sans-serif}h1,h2,h3,.brand,.tide-reading>span,.countdown strong{font-family:'Fredoka','Trebuchet MS',sans-serif;font-weight:500}button,.badge,.tabs{font-weight:700}.brand{font-weight:600}h2,h3{letter-spacing:0}.hero-headline{font-size:clamp(40px,5.4vw,68px);letter-spacing:-.025em;line-height:1.2;position:relative;z-index:3}.headline-line{display:inline-block;transform-origin:left center;color:#295570;text-shadow:0 2px 0 #fffdf4,0 4px 0 #bfd9e5;transition:transform .35s cubic-bezier(.2,1.6,.45,1),text-shadow .3s ease,color .3s ease}.headline-line:last-child{color:#3d7092}@media(hover:hover){.hero-headline:hover .headline-line{transform:translateY(-4px) scale(1.035) rotate(-1deg);text-shadow:0 2px 0 #fffdf4,0 7px 0 #a8cde0,0 15px 20px #295d7f28;color:#24698e}.hero-headline:hover .headline-line:last-child{transform:translateY(-2px) scale(1.035) rotate(.7deg);transition-delay:.045s}.hero-headline .headline-line:hover{transform:translateY(-7px) scale(1.06) rotate(-1.2deg)}.hero-headline .headline-line:last-child:hover{transform:translateY(-6px) scale(1.06) rotate(.9deg)}}@media(prefers-reduced-motion:reduce){.headline-line{transition:none}.hero-headline:hover .headline-line,.hero-headline .headline-line:hover,.hero-headline:hover .headline-line:last-child,.hero-headline .headline-line:last-child:hover{transform:none}}
/* Give the hero headline a bigger pop without changing its resting layout. */
@media(hover:hover){.hero-headline:hover .headline-line{transform:translateY(-8px) scale(1.1) rotate(-1.5deg);text-shadow:0 3px 0 #fffdf4,0 10px 0 #a8cde0,0 22px 26px #295d7f35}.hero-headline:hover .headline-line:last-child{transform:translateY(-6px) scale(1.1) rotate(1deg)}.hero-headline .headline-line:hover{transform:translateY(-13px) scale(1.16) rotate(-2deg)}.hero-headline .headline-line:last-child:hover{transform:translateY(-11px) scale(1.16) rotate(1.4deg)}}@media(prefers-reduced-motion:reduce){.hero-headline:hover .headline-line,.hero-headline .headline-line:hover,.hero-headline:hover .headline-line:last-child,.hero-headline .headline-line:last-child:hover{transform:none}}
/* Hover the little sea friends to give them a luminous, oversized pop. */
.sea-sticker{pointer-events:auto;scale:1;transition:scale .32s cubic-bezier(.2,1.6,.45,1),filter .25s ease;cursor:default}.sea-sticker>svg{pointer-events:none}@media(hover:hover){.sea-sticker:hover{scale:1.4;z-index:10;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 13px #b9eeff) drop-shadow(0 0 22px #c8b5ffb3)}}@media(prefers-reduced-motion:reduce){.sea-sticker{transition:none}.sea-sticker:hover{scale:1}}
/* Keep transparent headline space out of the animals' hover targets. */
.hero-headline{width:fit-content;max-width:100%;pointer-events:none}.hero-headline .headline-line{pointer-events:auto}.hero-friends{z-index:4;pointer-events:none}.hero-friends .sea-sticker{pointer-events:auto}.hero-friends .sea-sticker>svg{pointer-events:none}
/* Warm sunshine glow for hovered sea animals. */
@media(hover:hover){.sea-sticker:hover{filter:drop-shadow(0 0 5px #fff8c5) drop-shadow(0 0 13px #ffe36a) drop-shadow(0 0 22px #ffd239b3)}}
@media(hover:hover){.sea-sticker:hover{filter:drop-shadow(0 0 5px #fffde8) drop-shadow(0 0 13px #fff3b5) drop-shadow(0 0 22px #ffefae99)}}
@media(hover:hover){.sea-sticker:hover{filter:drop-shadow(0 0 5px #fff0f6) drop-shadow(0 0 13px #fbcfe3) drop-shadow(0 0 22px #f5bfd999)}}
/* Pastel yellow in the ocean sections, white on the cream beach header. */
@media(hover:hover){.sea-sticker:hover{filter:drop-shadow(0 0 5px #fffde8) drop-shadow(0 0 13px #fff3b5) drop-shadow(0 0 22px #ffefae99)}header .sea-sticker:hover{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 13px #fffffff0) drop-shadow(0 0 22px #ffffffb3)}}
/* Optional, user-controlled beach ambience. */
header nav{gap:18px;flex-wrap:wrap}.ocean-sound-controls{display:flex;align-items:center;gap:12px;position:relative}.ocean-sound-controls button{border-radius:24px;padding:8px 14px;background:#fffaf0;border-color:#d5dccc;white-space:nowrap;font-size:13px}.ocean-sound-controls button[aria-pressed=true]{background:#dfedf6;border-color:#9bbfd7}.ocean-volume-label{font-size:10px;gap:0;max-width:85px;color:#607586}.ocean-volume-label input{width:80px;padding:0;accent-color:#719db8;cursor:pointer;min-height:22px}.sound-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:700px){header nav .tag{display:none}.ocean-sound-controls{gap:8px}.ocean-sound-controls button{font-size:12px}}@media(max-width:430px){.ocean-sound-controls{width:100%;justify-content:space-between}.ocean-volume-label{max-width:110px}.ocean-volume-label input{width:100px}}
/* Tagline and sound controls share the top-right corner. */
header nav{align-items:flex-start}.header-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:9px}.header-right .tag{display:block;text-align:right}.header-right .ocean-sound-controls{justify-content:flex-end}@media(max-width:430px){.header-right{gap:8px;max-width:100%}.header-right .tag{font-size:12px}.header-right .ocean-sound-controls{width:auto;flex-wrap:wrap}.header-right .ocean-volume-label{max-width:70px}.header-right .ocean-volume-label input{width:65px}}