@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap";:root{--navy:#061b2a;--navy-2:#09273b;--ink:#f8f1e8;--muted:#b7c1c7;--teal:#66d6ca;--coral:#ff8065;--line:#d9e7eb40;--sand:#e9d9c4;color:var(--ink);background:#03131f;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% 0,#173c51,#03131f 45%);min-width:320px;min-height:100vh;margin:0}html[data-theme=light] body{background:radial-gradient(circle at 10% 0,#d9e9e6,#edf5f3 48%)}button,a{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.app-shell{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--ink);background:var(--navy);border:1px solid #e3d7be52;border-radius:22px;width:min(1540px,100% - 22px);min-height:calc(100vh - 22px);margin:11px auto;position:relative;overflow:hidden;box-shadow:0 30px 80px #00000073}.app-shell[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--navy:#eef5f4;--navy-2:#e4efed;--ink:#102b36;--muted:#57707a;--teal:#087f79;--coral:#d9553d;--line:#143d4838;--sand:#7b5b3d;background:#edf5f3;border-color:#1b475147;box-shadow:0 30px 80px #0f2f3638}.app-shell[data-theme=light] header{background:#f4f9f8f5;border-bottom-color:#143d481f}.app-shell[data-theme=light] .brand,.app-shell[data-theme=light] .header-actions button{color:#102b36}.app-shell[data-theme=light] .hero{background-image:linear-gradient(90deg, #edf5f308 0%, #edf5f32e 28%, #edf5f3 49%, #edf5f3 100%), var(--hero-image)}.app-shell[data-theme=light] .location{color:#102b36;background:#f5faf9c2;border-color:#143d4859}.app-shell[data-theme=light] .location svg{color:#102b36}.app-shell[data-theme=light] .date,.app-shell[data-theme=light] .next-events p,.app-shell[data-theme=light] .day span{color:#38545f}.app-shell[data-theme=light] .location-menu{background:#f7fbfafa;border-color:#143d4833;box-shadow:0 18px 50px #14323933}.app-shell[data-theme=light] .location-search{background:#143d480d;border-color:#143d4826}.app-shell[data-theme=light] .location-search input{color:#102b36}.app-shell[data-theme=light] .option-copy small{color:#607982}.app-shell[data-theme=light] .location-option:hover,.app-shell[data-theme=light] .location-option:focus-visible{background:#087f7914}.app-shell[data-theme=light] .beach-rail,.app-shell[data-theme=light] .days{background:#ffffff6b}.app-shell[data-theme=light] .day.active,.app-shell[data-theme=light] .beach.active{background:#087f791a}.app-shell[data-theme=light] .round-arrow{color:#244550;border-color:#143d4840}.app-shell[data-theme=light] .contours{opacity:.09}.app-shell[data-theme=light] .grid-line{stroke:#13424c40}.app-shell[data-theme=light] .chart-point text,.app-shell[data-theme=light] .chart-x,.app-shell[data-theme=light] .chart-y{fill:#355661;color:#355661}.app-shell[data-theme=light] .chart-point .value{fill:#173843}.app-shell[data-theme=light] .photo-source{color:#102b36b8}header{z-index:20;background:#031522eb;border-bottom:1px solid #ffffff14;grid-template-columns:1fr auto;align-items:center;height:82px;padding:0 34px;display:grid;position:relative}.brand{color:var(--ink);letter-spacing:.18em;align-items:center;gap:12px;text-decoration:none;display:flex}.brand strong{letter-spacing:.02em;white-space:nowrap;font:31px/1 Libre Caslon Display,Georgia,serif}.brand i{color:var(--teal);font-size:27px;font-style:normal}.brand span{font-size:14px;font-weight:600}.header-actions{justify-self:end;align-items:center;gap:26px;display:flex}.header-actions svg{stroke-width:1.7px;width:24px;height:24px}.header-actions button{cursor:pointer;background:0 0;border:0;padding:0}.theme-toggle{place-items:center;display:grid}.favorite.active{color:var(--coral)}.hero{background-image:linear-gradient(90deg, #051a290d 0%, #051a2933 28%, #071e2f 49%, #071e2f 100%), var(--hero-image);background-position:50%;background-size:cover;grid-template-rows:auto 250px;grid-template-columns:minmax(420px,1fr) 270px;gap:8px 30px;min-height:576px;padding:24px 50px 0 50%;transition:background-image .35s,filter .25s;display:grid;position:relative}.hero.image-loading:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#0000 0 30%,#071e2f33 47%,#0000 70%);animation:1.2s ease-in-out infinite image-loading;position:absolute;inset:0}.photo-source{z-index:3;color:#ffffffa8;letter-spacing:.04em;font-size:10px;position:absolute;bottom:10px;left:18px}@keyframes image-loading{0%,to{opacity:.25}50%{opacity:.65}}.contours{pointer-events:none;opacity:.14;background-image:repeating-radial-gradient(at 0 0,#0000 0 20px,#77dcd161 21px 22px);background-size:220px 170px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000,#0000 20% 85%,#000);mask-image:linear-gradient(90deg,#000,#0000 20% 85%,#000)}.summary,.conditions,.chart{z-index:2;position:relative}.summary{z-index:4}.location-picker{z-index:12;width:fit-content;position:relative}.location{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;background:#0519278c;border:1px solid #efe4d080;border-radius:28px;align-items:center;gap:13px;min-width:290px;height:50px;padding:0 19px;font-size:16px;display:flex}.location span{text-align:left;flex:1}.location small{color:var(--teal);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:600}.location svg{width:19px;color:var(--ink)}.location svg:last-child{flex:none;transition:transform .2s}.location svg:last-child.open{transform:rotate(180deg)}.location-menu{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#051927f5;border:1px solid #efe4d047;border-radius:18px;width:330px;padding:7px;position:absolute;top:calc(100% + 9px);left:0;box-shadow:0 18px 50px #0000006b}.location-search{background:#ffffff0d;border:1px solid #ffffff29;border-radius:12px;align-items:center;gap:10px;height:46px;margin-bottom:5px;padding:0 13px;display:flex}.location-search svg{width:18px;color:var(--muted)}.location-search input{min-width:0;color:var(--ink);font:inherit;background:0 0;border:0;outline:0;flex:1}.location-search input::placeholder{color:#8fa0a9}.location-results{scrollbar-width:thin;scrollbar-color:#66d6ca73 transparent;max-height:390px;overflow-y:auto}.result-heading{color:var(--coral);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:7px;margin:8px 10px 4px;font-size:10px;font-weight:600;display:flex}.result-heading svg{width:13px}.result-heading.all-beaches{color:#8fa2ab;border-top:1px solid #ffffff1a;margin-top:11px;padding-top:10px}.location-option{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;width:100%;min-height:52px;padding:7px 10px;display:flex}.location-option-row{align-items:center;gap:3px;display:flex}.location-option-row .location-option{flex:1;min-width:0}.location-option:hover,.location-option:focus-visible{background:#66d6ca1a}.location-option.selected{color:var(--teal)}.location-option-thumb{width:36px;height:36px;color:var(--teal);background:#66d6ca14;border:1px solid #ffffffb3;border-radius:50%;flex:none;place-items:center;display:grid}.location-option-thumb svg{width:19px}.option-copy{flex:1;min-width:0}.option-copy strong,.option-copy small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.option-copy strong{font-size:14px;font-weight:500}.option-copy small{color:#8fa2ab;margin-top:2px;font-size:11px}.option-check{font-weight:700}.local-toggle,.row-favorite{color:#80939c;cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;width:38px;height:38px;display:grid}.local-toggle:hover,.local-toggle:focus-visible,.row-favorite:hover,.row-favorite:focus-visible{color:var(--ink);background:#ffffff0f}.local-toggle.active{color:var(--teal);background:#66d6ca1f}.row-favorite.active{color:var(--coral);background:#ff80651a}.local-toggle svg,.row-favorite svg{width:17px}.no-results{color:var(--muted);text-align:center;margin:0;padding:22px 10px;font-size:13px}.date{color:#d3dbe0;margin:20px 0 4px;font-size:17px}h1{letter-spacing:-.02em;margin:0;font:400 50px/1.12 Libre Caslon Display,Georgia,serif}h1 em{color:var(--coral);white-space:nowrap;font-style:normal}.source-note{color:var(--muted);letter-spacing:.01em;margin:10px 0 0;font-size:13px}.source-note.warning{color:var(--coral)}.measurements{grid-template-columns:minmax(190px,1fr) minmax(240px,1fr);align-items:end;gap:28px;margin-top:22px;display:grid}.measurements>div:first-child{min-width:0}.measurements span{color:var(--muted);font-size:15px;display:block}.measurements strong{margin-top:8px;font:82px/.95 Libre Caslon Display,Georgia,serif;display:block}.measurements small{color:var(--teal);margin-left:9px;font-size:40px}.next-events{border-left:1px solid var(--line);min-width:270px;padding-bottom:2px;padding-left:28px}.next-events p{color:var(--ink);white-space:nowrap;align-items:center;gap:10px;margin:12px 0 0;display:flex}.next-events.live p:not(.live-event){display:none}.next-events svg{width:23px}.next-events p:first-of-type svg{color:var(--teal)}.next-events p:last-of-type svg{color:var(--coral)}.conditions{padding:5px 0 0 18px}.conditions>div{align-items:center;gap:20px;height:66px;font-size:17px;display:flex}.conditions>div svg{stroke-width:1.6px;width:27px}.conditions b{color:var(--teal);font-weight:500}.conditions .sun-times{border-bottom:1px solid var(--line);justify-content:space-between;height:66px;margin-bottom:7px}.sun-times span{align-items:center;gap:10px;display:flex}.sun-times span:first-child svg{color:#ffd36a}.sun-times span:last-child svg{color:var(--coral)}.chart{grid-column:1/-1;align-self:end;height:250px;margin-left:-350px}.chart svg{width:calc(100% - 44px);height:210px;position:absolute;bottom:29px;left:44px;right:0;overflow:visible}.grid-line{stroke:#dcebee38;stroke-width:1px;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}.area{fill:url(#tideFill)}.line{fill:none;stroke:#8de7dd;stroke-width:2.3px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px #64dccd4d)}.chart-point circle{stroke:#f5f4eb;stroke-width:1.4px;vector-effect:non-scaling-stroke}.high-dot{fill:var(--coral)}.low-dot{fill:var(--teal)}.chart-point text{fill:#cad7db;font:12px DM Sans}.chart-point .value{fill:#f3f1e9;font-size:13px}.chart-x{color:#b8c4ca;justify-content:space-between;font-size:12px;display:flex;position:absolute;bottom:2px;left:42px;right:0}.chart-y{color:#c4d0d3;flex-direction:column;justify-content:space-between;font-size:11px;display:flex;position:absolute;top:37px;bottom:31px;left:0}.chart-y span{width:70px;position:absolute;top:-20px;left:0}.chart-y b{font-weight:400}.now-line{z-index:4;border-left:1px dashed var(--teal);pointer-events:none;position:absolute;top:38px;bottom:28px}.now-line span{color:var(--navy);background:var(--teal);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-radius:5px;padding:3px 6px;font-size:9px;font-weight:600;line-height:1;position:absolute;top:-25px;left:0;transform:translate(-50%)}.now-line i{border:2px solid var(--ink);background:var(--teal);width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent);border-radius:50%;position:absolute;top:35%;left:-5px}.beach-navigation{align-items:center;gap:14px;padding:16px 38px 0;display:flex}.beach-rail{border:1px solid var(--line);scrollbar-width:thin;scrollbar-color:#66d6ca59 transparent;scroll-behavior:smooth;border-radius:20px;flex:1;grid-template-columns:none;grid-auto-columns:210px;grid-auto-flow:column;align-items:center;width:0;min-height:73px;margin:16px auto 0;padding:8px;display:grid;overflow-x:auto}.beach{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:28px;align-items:center;gap:12px;min-width:0;padding:5px 10px;display:flex}.beach>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden}.beach.active{border-color:var(--teal);background:#53d3c51c}.thumb{width:43px;height:43px;color:var(--teal);background:#66d6ca14;border:1px solid #e9ede8b3;border-radius:50%;flex:none;place-items:center;display:grid}.thumb svg{width:21px}.local-mark{width:16px;color:var(--teal);flex:none}.favorite-mark{width:15px;color:var(--coral);flex:none}.check{background:var(--teal);color:#082332;border-radius:50%;flex:0 0 22px;place-items:center;width:22px;min-width:22px;height:22px;margin-left:auto;font-size:13px;font-weight:700;line-height:1;display:grid}.rail-arrow{display:none}.round-arrow:disabled{opacity:.28;cursor:default}.beach-navigation .beach-rail{margin:0}.week{align-items:center;gap:14px;padding:22px 38px 0;display:flex}.round-arrow{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:50%;flex:none;place-items:center;width:40px;height:40px;display:grid}.days{border:1px solid var(--line);border-radius:18px;flex:1;grid-template-columns:repeat(8,minmax(120px,1fr));display:grid;overflow:hidden}.day{border:0;border-right:1px solid var(--line);text-align:left;cursor:pointer;background:0 0;min-height:105px;padding:12px 18px}.day:last-child{border-right:0}.day.active{box-shadow:inset 0 0 0 1px var(--teal);background:#58d6c81f;border-radius:17px}.day strong{text-align:center;margin-bottom:9px;font-size:16px;display:block}.day span{color:#d3dcdf;white-space:nowrap;align-items:center;gap:8px;margin-top:7px;font-size:13px;display:flex}.day svg{width:17px;color:var(--teal)}.day span:last-child svg{color:var(--coral)}.toast{color:#092033;opacity:0;pointer-events:none;z-index:50;background:#f2eee5;border-radius:10px;padding:11px 17px;transition:all .25s;position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}@media (width<=1100px){.hero{grid-template-columns:minmax(390px,1fr) 190px;gap:8px 18px;padding-left:36%}.chart{margin-left:-300px}h1{font-size:43px}.measurements strong{font-size:68px}.measurements{grid-template-columns:minmax(145px,.75fr) minmax(220px,1.25fr);gap:18px}.next-events{min-width:0;padding-left:20px}.next-events p{gap:7px;font-size:14px}.conditions{padding-left:4px}.conditions>div{gap:11px;font-size:14px}.beach-navigation{padding-inline:34px}.beach-rail{grid-auto-columns:190px}.rail-arrow{display:none}.days{grid-template-columns:repeat(8,140px);overflow-x:auto}}@media (width<=900px) and (width>=721px){.hero{grid-template-rows:auto auto 235px;grid-template-columns:1fr;min-height:680px;padding:26px 36px 0 43%}.app-shell[data-theme=light] .hero{background-image:linear-gradient(180deg, #edf5f305 0%, #edf5f3e6 35%, #edf5f3 62%), var(--hero-image)}.summary{grid-column:1}.conditions{border-top:1px solid var(--line);grid-column:1;grid-template-columns:repeat(3,1fr);padding:0;display:grid}.conditions .sun-times{display:none}.conditions>div{height:50px}.chart{grid-column:1;height:235px;margin-left:-310px}.measurements{grid-template-columns:minmax(150px,.8fr) minmax(230px,1.2fr)}}@media (width<=720px){.app-shell{border:0;border-radius:0;width:100%;min-height:100vh;margin:0}header{height:68px;padding:0 18px}.brand strong{font-size:23px}.brand span{letter-spacing:.11em;font-size:10px}.brand{gap:7px}.header-actions{gap:17px}.hero{background-position:25%;background-image:linear-gradient(180deg, #0419270d 0%, #071e2feb 35%, #071e2f 62%), var(--hero-image);min-height:735px;padding:210px 20px 0;display:block}.app-shell[data-theme=light] .hero{background-image:linear-gradient(180deg, #edf5f305 0%, #edf5f3e6 35%, #edf5f3 62%), var(--hero-image)}.photo-source{top:180px;bottom:auto}.summary{margin-top:0}.location-picker,.location{width:100%;min-width:0}.location-menu{width:100%}.location-results{max-height:315px}.date{margin-top:14px}h1{font-size:37px}.measurements{grid-template-columns:minmax(125px,.78fr) minmax(170px,1.22fr);align-items:stretch;gap:20px}.measurements>div:first-child{min-width:125px}.measurements strong{font-size:59px}.measurements small{font-size:28px}.next-events{min-width:0;padding-left:17px}.next-events p{gap:6px;font-size:13px}.conditions{border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin-top:18px;padding:0;display:grid}.conditions .sun-times{display:none}.conditions>div{gap:8px;height:52px;font-size:13px}.conditions>div svg{width:20px}.chart{height:220px;margin:15px 0 0}.chart svg{height:180px}.chart-point text{display:none}.now-line span{font-size:8px}.beach-navigation{gap:8px;padding:12px 12px 0}.beach-rail{grid-auto-columns:175px}.week{gap:8px;padding:18px 12px 0}.round-arrow{width:34px;height:34px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
