@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--navy:#062c40;--panel:#103e51;--deep:#092f42;--cyan:#3aebd4;--coral:#ff7955;--yellow:#ffdb62;--text:#f8fcf8;--muted:#b0cbd4;--line:#2e5868;font-family:'DM Sans',Arial,sans-serif;background:var(--deep);color:var(--text)}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}h1,h2,h3,p{margin-top:0}p{line-height:1.6}h1,h2{font-family:'Bowlby One SC','Arial Black',sans-serif;font-weight:400;line-height:1.05;letter-spacing:-1.5px}button{border:0}button:disabled{opacity:.5}.skip-link{position:fixed;left:12px;top:-100px;background:var(--yellow);color:var(--navy);padding:15px;z-index:100}.skip-link:focus{top:12px}.forecast-nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(18px,calc((100vw - 1120px)/2));background:var(--navy)}.brand{display:flex;align-items:center;gap:9px;font-weight:800;text-decoration:none;font-size:13px;line-height:1.05}.brand img{border-radius:50%;background:white}.forecast-nav nav{display:flex;gap:9px}.forecast-nav nav a{font-size:12px;padding:11px 13px;text-decoration:none;border-radius:25px;background:#17495c}.forecast-nav nav a:last-child{background:var(--coral);color:var(--navy);font-weight:800}.forecast-hero{isolation:isolate;position:relative;overflow:hidden;background:#087f8b}.hero-art{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#035666ed,#0356669c),url('clay-coast.webp') center 43%/cover}.hero-inner{max-width:1120px;margin:auto;padding:38px 18px 74px}.kicker{font-size:9px;letter-spacing:1.7px;font-weight:800;color:var(--cyan);margin-bottom:15px}.forecast-hero .kicker{color:#c3fff1}.forecast-hero h1{font-size:clamp(31px,8.2vw,53px);line-height:1.1;max-width:680px;margin-bottom:20px}.forecast-hero h1 span{color:var(--yellow)}.forecast-hero .hero-inner>p:not(.kicker){font-size:14px;max-width:390px}.hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;font-size:10px;font-weight:700}.hero-meta span{padding:7px 10px;border:1px solid #d4fff260;border-radius:25px}.hero-wave{position:absolute;bottom:-1px;width:100%;height:40px}.forecast-shell{max-width:1120px;margin:auto;padding:0 16px}.beach-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:sticky;top:0;z-index:20;background:var(--deep);padding:14px 0 12px}.beach-tabs button{padding:13px 5px;border-radius:17px;background:#19495b;color:var(--text);border:1px solid transparent;min-height:63px}.beach-tabs button strong{font-size:13px;display:block}.beach-tabs button span{display:block;font-size:10px;margin-top:4px;opacity:.8}.beach-tabs button[aria-pressed=true]{background:var(--cyan);color:var(--navy);box-shadow:0 4px #006f73}.beach-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:25px 0 10px}.beach-heading .kicker{margin-bottom:9px;font-size:8px}.beach-heading h2{font-size:31px;margin-bottom:0}.share-button{min-height:44px;border:1px solid #3d6b7c;border-radius:25px;padding:11px 12px;background:transparent;color:var(--text);font-size:11px;font-weight:700;white-space:nowrap}.load-status{font-size:11px;color:var(--muted);min-height:20px;margin:15px 0 22px}.load-status.is-loading:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:8px;animation:loading-pulse 1s infinite alternate}@keyframes loading-pulse{to{opacity:.25}}.warning-panel,.moment-panel,.chart-panel,.details-panel{border:1px solid var(--line);border-radius:24px;background:var(--panel);padding:20px;margin-bottom:18px;overflow:hidden}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.panel-top h3{font-size:17px;letter-spacing:-.5px;margin:0}.panel-top>a{font-size:10px;color:var(--cyan);white-space:nowrap}.small{font-size:10px;line-height:1.65}.muted{color:var(--muted)}.warning-panel{padding:17px;border-left:4px solid var(--yellow)}.warning-panel>p{margin-bottom:13px}.warning-panel details{background:#0b3042;border-radius:15px;padding:14px;margin-top:10px}.warning-panel summary{font-size:12px;font-weight:700;line-height:1.6;cursor:pointer;color:var(--yellow)}.warning-panel details p{font-size:12px;margin:13px 0}.warning-panel dl{font-size:10px;display:grid;grid-template-columns:70px 1fr;gap:8px;margin-bottom:0}.warning-panel dt{color:var(--muted)}.warning-panel dd{margin:0;line-height:1.6}.warning-message{font-size:12px;margin:0}.moment-panel{padding:0}.moment-header{padding:20px 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}.moment-header .kicker{font-size:8px;margin-bottom:9px}.moment-header h3{font-size:16px;margin:0;line-height:1.5}.quiet{background:transparent;border:1px solid #427182;color:var(--muted);font-size:9px;border-radius:22px;min-height:42px;padding:8px 12px}.ocean-scene{position:relative;height:150px;overflow:hidden;background:linear-gradient(#104d69,#0b7884);margin:0 0 15px}.ocean-sun{position:absolute;top:20px;right:40px;width:58px;height:58px;border-radius:50%;background:var(--yellow);box-shadow:0 0 60px #ffdb6225}.ocean-scene svg{position:absolute;bottom:-2px;left:0;width:100%;height:115px}.swell-layer{animation:swell-flow 8s linear infinite;fill:#3aebd4}.swell-layer.back{opacity:.32;animation-duration:14s}.swell-layer.middle{opacity:.55;animation-duration:10s;animation-direction:reverse}.swell-layer.front{fill:#42e3ce;opacity:.8}.motion-paused .swell-layer{animation-play-state:paused}@keyframes swell-flow{to{transform:translateX(-400px)}}.direction-pill{position:absolute;top:19px;left:18px;display:flex;align-items:center;gap:10px;background:#062c40b8;border-radius:30px;padding:10px 14px;font-size:11px;font-weight:700}.compass-arrow{font-size:23px;display:inline-block;transition:transform .35s}.unit-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 16px 18px;font-size:9px}.unit-controls>span{color:var(--muted);margin-right:3px}.unit-controls .wind-unit-label{margin-left:auto}.unit-controls button{border:1px solid #3d6a7b;background:transparent;color:var(--muted);padding:8px 9px;border-radius:20px;min-height:36px;font-size:9px;font-weight:700}.unit-controls button[aria-pressed=true]{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 16px;border-top:1px solid var(--line);gap:0 16px}.metrics article{padding:16px 0;border-bottom:1px solid var(--line);min-width:0}.metric-name{display:block;color:var(--muted);font-size:10px;font-weight:700;margin-bottom:8px}.metrics strong{font-size:27px;line-height:1.1;display:block;color:var(--cyan);letter-spacing:-1px}.metrics article:nth-child(3n) strong{color:var(--yellow)}.metrics small{display:block;margin-top:7px;font-size:9px;line-height:1.5;color:var(--muted)}.scrub-label{display:flex;justify-content:space-between;margin:22px 18px 5px;font-size:12px;font-weight:700}.scrub-label span{color:var(--cyan)}input[type=range]{width:calc(100% - 36px);margin:5px 18px;height:44px;accent-color:var(--coral);cursor:ew-resize}.slider-labels{display:flex;justify-content:space-between;margin:0 18px 18px;font-size:9px;color:var(--muted)}.data-note{font-size:10px;line-height:1.7;color:var(--muted);background:#062c4055;padding:15px 18px;margin:0}.range-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:25px 0 18px}.range-tabs button{min-height:44px;padding:11px 3px;border-radius:20px;background:#1a495a;color:var(--text);font-size:10px;font-weight:700}.range-tabs button[aria-pressed=true]{background:var(--coral);color:var(--navy)}.chart-panel{padding:20px 12px}.chart-panel .panel-top,.chart-panel>p,.chart-key{padding-inline:7px}.chart-unit{font-size:10px;color:var(--muted)}.chart-key{display:flex;gap:20px;font-size:10px;color:var(--muted);margin:14px 0 8px}.chart-key span:before{content:'';display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}.key-cyan:before{background:var(--cyan)}.key-coral:before{background:var(--coral)}.key-yellow:before{background:var(--yellow)}.graph{width:100%;min-height:190px;touch-action:pan-y}.graph svg{width:100%;display:block;overflow:visible}.graph svg text{font-family:'DM Sans',Arial,sans-serif;fill:#accbd3;font-size:11px}.graph svg .data-line{stroke-linejoin:round;stroke-linecap:round;fill:none;stroke-width:3}.graph svg .grid-line{stroke:#2b586b;stroke-width:1}.graph svg .cursor{stroke:#fff8;stroke-dasharray:4 4}.graph-empty{min-height:185px;display:grid;place-content:center;text-align:center;padding:25px;color:var(--muted);font-size:13px}.graph svg{cursor:crosshair}.chart-panel>.small{margin-top:10px;margin-bottom:0}.station-note{font-size:10px;color:var(--yellow);padding-inline:7px}.tide-events{display:flex;gap:8px;overflow:auto;margin:15px 6px;padding-bottom:8px}.tide-event{min-width:112px;background:#082f42;border-radius:15px;padding:13px;font-size:11px}.tide-event strong{display:block;color:var(--cyan);margin-bottom:7px}.tide-event span{display:block;font-size:9px;color:var(--muted);margin-top:6px}.details-panel summary,.sources summary{cursor:pointer;font-size:13px;font-weight:700;padding:8px 0}.table-wrap{overflow:auto;margin-top:15px;max-height:400px}table{border-collapse:collapse;font-size:11px;white-space:nowrap;width:100%}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}th{position:sticky;top:0;background:#113e51;color:var(--cyan);font-size:10px}tr.selected-row{background:#214f60}.source-issues{background:#4c3c24;color:#fff0cb;border-radius:18px;padding:18px;font-size:12px;line-height:1.7;margin-bottom:18px}.source-issues p{margin:0 0 7px}.forecast-school{background:var(--coral);color:var(--navy);border-radius:25px;padding:25px;margin-top:25px;display:grid;gap:14px}.forecast-school .kicker{color:#0a4151;font-size:9px}.forecast-school h3{font-size:26px;margin-bottom:12px;letter-spacing:-1px}.forecast-school p:not(.kicker){font-size:13px;max-width:440px}.primary-link{background:var(--navy);color:var(--text);padding:14px 18px;min-height:48px;border-radius:24px;font-size:12px;font-weight:800;text-decoration:none;justify-self:start}.ben-video{padding:38px 0 25px}.ben-video h2{font-size:30px;color:var(--yellow);margin-bottom:17px}.ben-video p:not(.kicker){font-size:13px;color:var(--muted)}.video-frame{aspect-ratio:16/9;min-height:200px;border:8px solid #245363;border-radius:23px;overflow:hidden;margin-bottom:17px;background:var(--panel)}.video-frame iframe{display:block;width:100%;height:100%;min-height:200px;border:0}.ben-video>a{font-size:12px;color:var(--cyan)}.sources{border-block:1px solid var(--line);padding:15px 0}.sources p{font-size:11px;line-height:1.85;color:var(--muted)}footer{display:flex;align-items:flex-start;gap:16px;padding:30px 90px 90px 0}footer img{border-radius:50%}footer strong{font-size:15px}footer p,footer a,footer div{font-size:10px;color:var(--muted)}footer p{margin:9px 0}.floating-brand{position:fixed;right:14px;bottom:max(16px,env(safe-area-inset-bottom));z-index:50;width:74px;height:84px;background:transparent;padding:0;color:var(--navy);filter:drop-shadow(0 5px 12px #001b3bc0)}.floating-brand img{display:block;position:relative;width:68px;height:68px;border:3px solid var(--cyan);border-radius:50%;background:white;object-fit:contain;margin:auto;animation:badge-float 5s ease-in-out infinite}.floating-brand>span{position:relative;display:block;padding:4px 3px;background:var(--yellow);border-radius:12px;font-size:8px;font-weight:800;letter-spacing:-.2px;margin-top:-2px}.brand-menu{position:fixed;right:15px;bottom:112px;z-index:51;background:var(--text);color:var(--navy);border:3px solid var(--cyan);border-radius:22px;padding:20px;min-width:230px;box-shadow:0 10px 30px #001b3b80}.brand-menu strong{display:block;margin-bottom:13px}.brand-menu a,.brand-menu button{display:block;color:var(--navy);font-size:12px;padding:12px 0;min-height:44px;background:transparent;text-align:left;text-decoration:none}@keyframes badge-float{50%{transform:translateY(-3px)}}.error-box{background:#4d292a;border:1px solid #b6675d;border-radius:20px;padding:22px;margin:22px 0}.error-box h3{font-size:20px}.error-box p{font-size:13px}.error-box button{padding:12px 20px;background:var(--yellow);color:var(--navy);border-radius:25px;min-height:44px;font-weight:800;margin:0 15px 15px 0}.error-box>a{font-size:12px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:360px){.forecast-shell{padding-inline:12px}.forecast-nav{padding-inline:12px}.forecast-nav nav a{padding-inline:10px;font-size:10px}.beach-heading h2{font-size:27px}.unit-controls .wind-unit-label{margin-left:8px}.unit-controls button{padding:8px 7px}.beach-tabs button strong{font-size:12px}.metrics strong{font-size:24px}.panel-top h3{font-size:15px}.floating-brand{right:10px;width:67px}.floating-brand img{width:62px;height:62px}}
@media(min-width:760px){.hero-inner{padding:55px 20px 95px}.forecast-hero h1{font-size:57px}.forecast-hero .hero-inner>p:not(.kicker){font-size:17px}.hero-art{background:linear-gradient(90deg,#035666ed,#0356667a),url('clay-coast.webp') center 43%/cover}.forecast-shell{padding-inline:20px}.beach-tabs{max-width:650px;gap:12px}.beach-tabs button strong{font-size:15px}.beach-heading h2{font-size:43px}.share-button{font-size:12px;padding:13px 20px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 30px;margin-inline:25px}.metrics strong{font-size:34px}.metric-name{font-size:12px}.metrics small{font-size:11px}.moment-header{padding:25px}.moment-header h3{font-size:22px}.ocean-scene{height:180px}.ocean-scene svg{height:135px}.unit-controls{font-size:12px;margin-inline:25px;gap:10px}.unit-controls button{font-size:11px}.chart-panel{padding:25px}.panel-top h3{font-size:21px}.graph{min-height:230px}.chart-unit{font-size:12px}.chart-key{font-size:12px}.tide-event{min-width:145px}.range-tabs{max-width:650px}.range-tabs button{font-size:12px}.forecast-school{grid-template-columns:1fr auto;align-items:center}.ben-video .video-frame{max-width:720px}.ben-video h2{font-size:39px}.warning-panel details{padding:18px}.warning-panel summary{font-size:14px}.floating-brand{right:25px;bottom:25px;width:85px;height:95px}.floating-brand img{width:78px;height:78px}.floating-brand>span{font-size:9px}.brand-menu{right:25px;bottom:132px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}:root{scroll-behavior:auto}}
.swell-layer.front{animation-duration:var(--period,8s)}.motion-paused .floating-brand img{animation-play-state:paused}

.beach-heading{flex-wrap:wrap}.beach-heading>div{min-width:0}.share-button{flex-shrink:0}
/* Forecast player and source transparency */
.compact-hero .hero-inner{padding-top:24px;padding-bottom:45px}.compact-hero h1{font-size:clamp(25px,6vw,38px);margin-bottom:12px}.compact-hero .hero-meta{display:none}.compact-hero .hero-inner>p:not(.kicker){margin-bottom:8px}.ben-video{padding-top:25px}.ben-video .video-frame{max-width:none}.ocean-scene{height:auto;aspect-ratio:600/270;margin-bottom:0;background:linear-gradient(#104d69,#086777)}.ocean-scene #ocean-visual{position:relative;display:block;left:auto;bottom:auto;width:100%;height:auto;aspect-ratio:600/240}.direction-pill{top:12px;left:12px;font-size:10px;padding:6px 10px}.scene-caption{position:relative;font-size:10px;line-height:1.5;padding:8px 14px;margin:0;background:#062c40b8;color:var(--yellow)}.playback-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 16px 0}.playback-controls button{min-height:44px;padding:10px 15px;background:var(--coral);color:var(--navy);border-radius:24px;font-size:11px;font-weight:800}.playback-controls>span{font-size:10px;color:var(--cyan)}.playback-controls label{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);margin-left:auto}.playback-controls select{background:var(--navy);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:8px;min-height:44px;font:inherit}.science-panel{padding:23px 20px;border:1px solid #3aebd460;border-radius:24px;background:linear-gradient(130deg,#154e5b,#0a354b);margin:20px 0}.science-panel h3{font-size:23px;letter-spacing:-.5px;margin-bottom:22px}.science-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.science-counts strong{display:block;font-family:'Bowlby One SC',sans-serif;font-size:30px;color:var(--yellow);line-height:1.2}.science-counts span{font-size:10px;color:var(--muted)}.science-panel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;padding:16px 0 0;gap:10px}.science-panel li{font-size:10px;line-height:1.6}.feed-ok{color:var(--cyan)}.feed-missing{color:var(--coral)}.science-panel p:not(.kicker){font-size:12px;color:var(--muted)}.science-panel summary{font-size:12px;font-weight:700;cursor:pointer;min-height:44px;padding:12px 0}.science-panel details p{margin-top:10px}.warning-panel{margin-top:30px}.unit-controls{padding-top:15px}.video-frame,.video-frame iframe{min-height:0}.motion-paused .ocean-scene *{animation-play-state:paused}
@media(max-width:360px){.playback-controls{gap:7px;padding-inline:12px}.playback-controls button{padding-inline:12px;font-size:10px}.playback-controls label{margin-left:0}.science-panel{padding:20px 16px}.science-counts strong{font-size:27px}.direction-pill{font-size:9px}.scene-caption{font-size:9px}}
/* Keep the beach unmistakable in shared forecast screenshots. */
.beach-heading h2{font-size:clamp(38px,10vw,68px);color:var(--yellow);letter-spacing:-1px;overflow-wrap:anywhere}.beach-heading>div{flex-basis:100%}.moment-header{align-items:flex-start}.moment-header>div{min-width:0}.moment-header #playback-town{font-size:clamp(30px,8.5vw,52px);color:var(--yellow);text-transform:uppercase;letter-spacing:-1px;margin:0 0 12px;overflow-wrap:anywhere}.moment-header h3{font-size:14px}.moment-header .quiet{flex-shrink:0;max-width:80px}.moment-header .kicker{font-size:8px;letter-spacing:1px}.ocean-scene #sea-crest{stroke-width:2}.ocean-scene #surf-wake{opacity:.65}
@media(min-width:760px){.beach-heading>div{flex-basis:auto}.moment-header h3{font-size:20px}.moment-header .quiet{max-width:none}}
/* Illustrated data panel */
.science-panel{padding:24px 18px;background:radial-gradient(ellipse at top right,#16677765,transparent 55%),#0b3448;border-color:#287d87;position:relative;overflow:hidden}.science-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.science-top>div:first-child{min-width:0;flex:1}.science-top h3{font-family:'Bowlby One SC','Arial Black',sans-serif;font-weight:400;font-size:clamp(19px,5vw,31px);line-height:1.2;letter-spacing:-.5px;margin-bottom:12px}.science-top h3 span{color:var(--yellow)}.science-panel .science-intro{font-size:10px;line-height:1.6;margin:0;max-width:370px}.science-top .kicker{font-size:8px;letter-spacing:1.2px}.feed-ring{position:relative;width:96px;height:96px;flex:0 0 96px}.feed-ring>svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}.feed-ring circle{fill:none;stroke-width:5}.ring-track{stroke:#235368}.ring-arc{stroke:var(--cyan);stroke-dasharray:0 100;stroke-linecap:round;transition:stroke-dasharray .7s ease}.feed-ring>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.feed-ring strong{font-family:'Bowlby One SC',sans-serif;font-size:23px;color:var(--yellow);line-height:1.2}.feed-ring span{font-size:7px;color:var(--muted);margin-top:4px}.provider-group{margin-top:20px}.provider-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px}.provider-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#3aebd41a;border:1px solid #3aebd440;color:var(--cyan);font-size:11px;font-weight:800}.met-symbol{color:var(--yellow);border-color:#ffdb6240;background:#ffdb621a}.provider-heading strong{display:block;font-size:13px}.provider-heading>div>span{display:block;font-size:9px;color:var(--muted);margin-top:3px}.provider-tag{margin-left:auto;font-size:9px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:20px}.feed-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.feed-card{position:relative;border:1px solid #2b5b6c;background:#103e52;border-radius:17px;padding:15px 12px}.feed-icon{width:37px;height:39px;color:var(--cyan);margin-bottom:12px}.feed-icon svg{width:100%;height:100%;display:block}.feed-card h4{font-size:12px;color:var(--text);margin:0 0 6px;line-height:1.4}.science-panel .feed-card p{font-size:9px;line-height:1.6;color:var(--muted);margin:0 0 14px}.feed-state{display:inline-block;background:#3aebd412;border:1px solid #3aebd435;color:var(--cyan);border-radius:15px;padding:5px 8px;font-size:9px;font-weight:700}.feed-missing .feed-state{color:var(--coral);border-color:#ff795560;background:#ff795512}.feed-missing .feed-icon{color:var(--coral)}#met-feeds .feed-icon{color:var(--yellow)}.processing-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-block:1px solid var(--line);padding:20px 0;margin-top:24px}.process-number{display:block;font-family:'Bowlby One SC',sans-serif;font-size:20px;color:var(--coral);margin-bottom:8px}.processing-strip strong{display:block;font-size:10px;line-height:1.5}.processing-strip small{display:block;font-size:8px;line-height:1.6;color:var(--muted);margin-top:4px}.forecast-window{display:flex;gap:12px;align-items:center;margin-top:20px}.window-icon{display:grid;place-items:center;border:1px solid #ffdb6250;border-radius:12px;width:44px;height:44px;flex-shrink:0;color:var(--yellow);background:#ffdb6210;font-family:'Bowlby One SC',sans-serif;font-size:19px}.forecast-window strong{display:block;font-size:12px}.forecast-window div span{display:block;font-size:8px;color:var(--muted);line-height:1.7;margin-top:5px}.forecast-window>svg{display:none;color:var(--cyan);width:120px;margin-left:auto}.science-panel>details{border-top:1px solid var(--line);margin-top:20px;padding-top:8px}.science-panel>details summary{color:var(--cyan)}
@media(max-width:360px){.science-panel{padding:20px 14px}.science-top{gap:8px}.feed-ring{width:80px;height:80px;flex-basis:80px}.feed-ring strong{font-size:20px}.feed-ring span{font-size:6px}.science-top h3{font-size:18px}.science-top .science-intro{font-size:9px}.science-top .kicker{font-size:7px}.feed-card{padding:13px 10px}.feed-card h4{font-size:11px}}
@media(min-width:760px){.science-panel{padding:32px}.science-top{margin-bottom:28px}.science-top .science-intro{font-size:13px}.feed-ring{width:130px;height:130px;flex-basis:130px}.feed-ring strong{font-size:31px}.feed-ring span{font-size:10px}.provider-group{display:inline-block;width:calc(50% - 12px);vertical-align:top}.provider-group+.provider-group{margin-left:20px}.provider-heading strong{font-size:15px}.provider-heading>div>span{font-size:11px}.feed-card{padding:20px}.feed-card h4{font-size:14px}.science-panel .feed-card p{font-size:11px}.feed-state{font-size:10px}.processing-strip{gap:20px}.processing-strip>div{display:grid;grid-template-columns:40px 1fr;column-gap:10px}.process-number{grid-row:span 2;margin:0;font-size:25px}.processing-strip strong{font-size:13px}.processing-strip small{font-size:10px}.forecast-window>svg{display:block}.forecast-window strong{font-size:14px}.forecast-window div span{font-size:10px}}
/* Large forecast clock remains readable inside the shared graphic. */
.forecast-clock{position:absolute;top:12px;left:14px;background:#052637e8;border:1px solid #77efe16b;border-radius:14px;padding:10px 14px;box-shadow:0 5px 18px #001b3b33;pointer-events:none}.forecast-clock>span{display:block;font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--cyan)}.forecast-clock strong{display:block;font-family:ui-monospace,'Courier New',monospace;font-variant-numeric:tabular-nums;font-weight:800;font-size:36px;line-height:1.1;letter-spacing:1px;color:#fff;margin:4px 0}.forecast-clock .clock-zone{font-size:7px;color:var(--muted);letter-spacing:1px}.direction-pill{top:auto;left:auto;right:12px;bottom:39px;font-size:8px;padding:5px 8px;gap:6px}.direction-pill .compass-arrow{font-size:16px}.forecast-clock{z-index:2}#sky-clouds{animation:none}.motion-paused #sky-clouds{animation-play-state:paused}@keyframes cloud-drift{to{transform:translateX(12px)}}
@media(max-width:360px){.forecast-clock{top:8px;left:10px;padding:8px 10px}.forecast-clock strong{font-size:30px}.forecast-clock>span{font-size:8px}.forecast-clock .clock-zone{font-size:6px}.direction-pill{right:8px;font-size:7px;bottom:35px}}
@media(min-width:760px){.forecast-clock{top:20px;left:24px;padding:14px 20px}.forecast-clock strong{font-size:54px}.forecast-clock>span{font-size:13px}.forecast-clock .clock-zone{font-size:9px}.direction-pill{font-size:11px;bottom:48px;right:20px;padding:8px 12px}}
.player-share{display:block;margin:14px 16px 0;padding:10px 15px;min-height:44px;background:#3aebd41a;border:1px solid #3aebd450;color:var(--cyan);border-radius:24px;font-size:11px;font-weight:800}.player-share:hover{background:#3aebd430}
@media(max-width:759px){.forecast-clock{top:8px;left:12px;padding:7px 10px}.forecast-clock strong{font-size:32px;margin:2px 0}.forecast-clock>span{font-size:9px;line-height:1.2}.forecast-clock .clock-zone{font-size:6px}}
.shore-wash{animation:shore-wash 5s ease-in-out infinite alternate}.motion-paused .shore-wash{animation-play-state:paused}@keyframes shore-wash{to{transform:translate(3px,2px);opacity:.55}}
/* Wind reads as movement between sea and land, with explicit orientation labels. */
.wind-visual{margin:16px;border:1px solid #397082;border-radius:18px;padding:16px;background:#0a3245;--wind-color:#3aebd4}.wind-visual-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.wind-visual .kicker{font-size:8px;margin:0 0 7px;letter-spacing:1px}.wind-visual h4{font-size:21px;line-height:1.2;margin:0;color:var(--wind-color);letter-spacing:-.5px}.wind-readout{text-align:right;flex-shrink:0}.wind-readout strong{display:block;font-size:22px;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.7px}.wind-readout span{display:block;font-size:9px;color:var(--muted);margin-top:4px}.wind-visual-body{display:grid;gap:12px;margin-top:16px}.wind-visual-body svg{width:100%;height:auto;display:block;color:var(--wind-color);max-width:420px}.wind-visual-body p{font-size:12px;font-weight:700;margin:0 0 4px;line-height:1.6}.wind-visual-body span{font-size:10px;color:var(--muted)}.wind-visual .wind-footnote{font-size:9px;line-height:1.7;color:var(--muted);margin:14px 0 0}.wind-offshore{--wind-color:#ffdb62}.wind-cross-shore{--wind-color:#a1d9ff}.wind-calm,.wind-unavailable,.wind-direction-unavailable{--wind-color:#b0cbd4}#wind-streams{stroke-dasharray:8 9;animation:wind-stream var(--wind-flow-speed,2s) linear infinite}.motion-paused #wind-streams{animation-play-state:paused}@keyframes wind-stream{to{stroke-dashoffset:-34}}
@media(min-width:760px){.wind-visual{margin:20px 25px;padding:20px}.wind-visual h4{font-size:26px}.wind-readout strong{font-size:28px}.wind-visual-body{grid-template-columns:minmax(220px,360px) 1fr;align-items:center;gap:24px}.wind-visual-body p{font-size:14px}.wind-visual .wind-footnote{font-size:10px}}
/* Keep the daily report close to the top; video expands only on request. */
.ben-video{padding:4px 0 12px}.ben-expand{border:1px solid #2d6274;background:#103e51;border-radius:18px;overflow:hidden}.ben-expand summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:12px 14px;min-height:68px}.ben-expand summary::-webkit-details-marker{display:none}.ben-play-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ff7955;color:#062c40;font-size:15px;flex-shrink:0}.ben-expand summary strong{display:block;font-size:15px;color:var(--yellow);line-height:1.4}.ben-expand summary small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.ben-chevron{margin-left:auto;color:var(--cyan);font-size:22px}.ben-expand[open] .ben-chevron{transform:rotate(180deg)}.ben-video .ben-date-note{font-size:11px;margin:0;padding:4px 15px 14px}.ben-expand .video-frame{margin:0 12px 12px;border-width:4px;border-radius:12px}.ben-expand>a{display:inline-block;font-size:11px;color:var(--cyan);margin:0 16px 16px}.ben-expand:not([open])>:not(summary){display:none}.beach-heading{margin:12px 0 5px}.beach-heading>div{flex-basis:auto}.beach-heading .kicker{display:none}.beach-heading h2{font-size:clamp(25px,6.5vw,35px);margin:0}.load-status{margin:6px 0 12px;min-height:16px}.moment-header{padding:16px}.moment-header #playback-town{margin-bottom:8px}.moment-header .kicker{margin-bottom:8px}
@media(max-width:759px){.forecast-nav{height:64px;padding-block:8px}.brand img{width:40px;height:40px}.beach-tabs{padding-top:10px;padding-bottom:10px}.beach-tabs button{min-height:55px;padding-block:10px}.beach-heading .share-button{min-height:38px;font-size:10px;padding:8px 10px}.beach-heading{gap:8px}.moment-header .quiet{font-size:8px;min-height:36px;padding:7px 9px}.moment-header #playback-town{font-size:clamp(30px,8vw,43px)}}
.ben-thumbnail-card{width:100%;display:flex;align-items:center;gap:14px;padding:10px;background:#103e51;border:1px solid #2d6274;border-radius:18px;color:var(--text);text-align:left;min-height:88px}.ben-thumb-image{display:block;position:relative;flex:0 0 112px;aspect-ratio:16/9;overflow:hidden;border-radius:11px}.ben-thumb-image img{display:block;width:100%;height:100%;object-fit:cover}.ben-thumb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#ff7955;display:grid;place-items:center;color:#062c40;font-size:13px;box-shadow:0 2px 8px #001b3b60}.ben-thumb-copy strong{display:block;font-size:14px;color:var(--yellow);line-height:1.4}.ben-thumb-copy small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.ben-thumb-copy>span{display:block;color:var(--cyan);font-size:10px;font-weight:800;margin-top:8px}.ben-player-region{padding:12px;background:#103e51;border:1px solid #2d6274;border-radius:18px}.ben-player-region .video-frame{margin:0 0 12px;border-width:4px;border-radius:12px}.ben-player-region>a{font-size:11px;color:var(--cyan)}#ben-video-close{float:right;background:transparent;color:var(--muted);padding:10px;font-size:11px;min-height:40px;margin-top:-8px}.ben-player-region:after{content:'';display:block;clear:both}@media(min-width:760px){.ben-thumb-image{flex-basis:144px}.ben-thumb-copy strong{font-size:17px}.ben-thumb-copy small{font-size:11px}}

/* Wind digits stay beside the forecast clock, including in screenshots. */
.scene-wind{position:absolute;z-index:2;left:170px;top:12px;min-width:118px;max-width:150px;background:#052637ec;border:1px solid #77efe16b;border-radius:14px;padding:10px 12px;pointer-events:none;box-shadow:0 5px 18px #001b3b33}.scene-wind-title{display:block;font-size:8px;line-height:1.2;font-weight:800;letter-spacing:.8px;color:var(--cyan)}.scene-wind>strong{display:block;font-size:30px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--yellow);white-space:nowrap;letter-spacing:-1px;margin:3px 0}.scene-wind strong small{font-size:12px;letter-spacing:0;color:#f8fcf8}.scene-wind-from{display:block;font-size:9px;line-height:1.3;font-weight:700;color:var(--muted)}
#sky-clouds{animation:none}#sky-birds .bird-wing{transform-box:fill-box;transform-origin:70% 80%;animation:bird-wingbeat .8s ease-in-out infinite alternate}.sea-tendrils{transform-box:fill-box;transform-origin:top;animation:sea-tendrils 2.2s ease-in-out infinite alternate}.whale-spout{animation:whale-spout 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}.motion-paused .bird-wing,.motion-paused .sea-tendrils,.motion-paused .whale-spout{animation-play-state:paused}
@keyframes bird-wingbeat{from{transform:rotate(-12deg) scaleY(.8)}to{transform:rotate(16deg) scaleY(1.08)}}@keyframes sea-tendrils{to{transform:skewX(9deg)}}@keyframes whale-spout{0%,70%,100%{opacity:0;transform:scaleY(.25)}20%,45%{opacity:.9;transform:scaleY(1)}}
@media(max-width:600px){.scene-wind{left:142px;top:8px;min-width:112px;max-width:134px;padding:8px 10px;border-radius:12px}.scene-wind>strong{font-size:26px;margin:2px 0}.scene-wind-title{font-size:7px;letter-spacing:.4px}.scene-wind-from{font-size:8px}.scene-wind strong small{font-size:10px}}
@media(max-width:360px){.scene-wind{left:132px;min-width:105px;padding:7px 8px}.scene-wind>strong{font-size:24px}}
@media(min-width:760px){.scene-wind{top:20px;left:260px;padding:14px 18px;min-width:175px;max-width:200px}.scene-wind>strong{font-size:43px}.scene-wind-title{font-size:10px}.scene-wind-from{font-size:12px}.scene-wind strong small{font-size:17px}}
@media(prefers-reduced-motion:reduce){#sky-birds .bird-wing,.sea-tendrils,.whale-spout{animation:none}}

/* Sun expressions are vector shapes; the same motion clock drives rays and blinks. */
#sun-mouth,#sun-cheeks{transition:opacity .3s ease,fill .3s ease}#sun-eye-left,#sun-eye-right{transition:ry .12s ease}#sun-shades{filter:drop-shadow(0 1px 0 #a9722630)}
@media(prefers-reduced-motion:reduce){#sun-mouth,#sun-cheeks,#sun-eye-left,#sun-eye-right{transition:none}}


/* Mobile forecast scene: animation first, details below. */
.moment-panel{display:flex;flex-direction:column}.ocean-scene{position:relative;overflow:hidden;background:linear-gradient(180deg,#116c82 0%,#0b8798 44%,#0a6877 100%)}.ocean-scene #ocean-visual{display:block;width:100%;height:100%}#surfer-one{filter:drop-shadow(0 7px 10px #03283755)}@media(max-width:759px){.forecast-shell{padding-inline:12px}.moment-panel{min-height:100svh;border-radius:26px;overflow:visible}.moment-header{padding:15px 16px 12px;align-items:flex-start;gap:12px}.moment-header>div{min-width:0;flex:1}.moment-header h3{font-size:15px}.ocean-scene{height:clamp(500px,88svh,900px);min-height:78svh;aspect-ratio:auto;margin:0;border-top:1px solid #245365;border-bottom:1px solid #245365}.ocean-scene #ocean-visual{position:absolute;inset:0;aspect-ratio:auto}.scene-caption{padding:12px 14px 16px;font-size:11px}.wind-visual{margin:0 0 2px;border-top-left-radius:0;border-top-right-radius:0}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.playback-controls{padding-top:16px}.playback-controls label{margin-left:0;width:100%;justify-content:space-between}.direction-pill{right:12px;bottom:54px}.forecast-clock{top:10px;left:12px}.scene-wind{top:10px;left:136px}}@media(min-width:760px){.ocean-scene{min-height:520px;aspect-ratio:auto}.ocean-scene #ocean-visual{position:absolute;inset:0;aspect-ratio:auto}.scene-caption{padding:10px 16px 14px;font-size:11px}}
/* Clay surfer refinement */
#surfer-one{filter:drop-shadow(0 8px 9px #03233066)}#surfer-shape{transform-box:fill-box;transform-origin:center bottom}


/* Forecast time-of-day scene: strong visual separation between daylight, twilight and night. */
.ocean-scene{transition:background .55s ease,box-shadow .55s ease}
.ocean-scene.scene-day{background:linear-gradient(180deg,#168ea0 0%,#1596a2 42%,#087287 100%)}
.ocean-scene.scene-dawn{background:linear-gradient(180deg,#665e89 0%,#cc7e72 34%,#1b8794 72%,#087287 100%)}
.ocean-scene.scene-dusk{background:linear-gradient(180deg,#554d7b 0%,#d37769 34%,#207d89 72%,#09697c 100%)}
.ocean-scene.scene-night{background:linear-gradient(180deg,#071b35 0%,#0a314b 46%,#075269 100%);box-shadow:inset 0 0 0 1px #7df4e217}
.ocean-scene.scene-night .forecast-clock,.ocean-scene.scene-night .scene-wind{background:#031725f2;border-color:#85fff38a;box-shadow:0 8px 24px #000b18a3}
.ocean-scene.scene-dawn .forecast-clock,.ocean-scene.scene-dawn .scene-wind,.ocean-scene.scene-dusk .forecast-clock,.ocean-scene.scene-dusk .scene-wind{background:#082335ee;border-color:#ffe0b873}
.ocean-scene.scene-night .direction-pill{background:#031725e8;border:1px solid #78e8df40}
.ocean-scene.scene-night .scene-caption{background:#031725e8;color:#d9fff8}
.ocean-scene.scene-dawn .scene-caption,.ocean-scene.scene-dusk .scene-caption{background:#082335dc;color:#fff0cb}
.ocean-scene.scene-night #sea-back{opacity:.32}
.ocean-scene.scene-night #sea-crest,.ocean-scene.scene-night #wave-foam,.ocean-scene.scene-night #surf-wake{stroke:#d9fff5}
.ocean-scene.scene-night #surfer-one{filter:drop-shadow(0 8px 12px #000a16cc) brightness(.9)}
.ocean-scene.scene-dawn #surfer-one,.ocean-scene.scene-dusk #surfer-one{filter:drop-shadow(0 8px 10px #041d2b88) saturate(.96)}
#night-sky{pointer-events:none}
@media(prefers-reduced-motion:reduce){.ocean-scene{transition:none}}


/* Mobile scene fit fix: preserve the entire 600×240 animation instead of cropping it. */
@media(max-width:759px){
  .ocean-scene{
    height:clamp(540px,82svh,760px);
    min-height:540px;
    max-height:760px;
    overflow:hidden;
    isolation:isolate;
  }
  .ocean-scene #ocean-visual{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    aspect-ratio:auto;
  }
  .forecast-clock{
    left:12px;
    top:12px;
    max-width:calc(50% - 18px);
  }
  .scene-wind{
    left:auto;
    right:12px;
    top:12px;
    width:calc(50% - 18px);
    min-width:0;
    max-width:none;
  }
  .direction-pill{
    right:12px;
    bottom:48px;
    max-width:46%;
  }
  .scene-caption{
    font-size:10px;
    line-height:1.45;
  }
}
@media(max-width:390px){
  .ocean-scene{height:clamp(500px,78svh,690px);min-height:500px}
  .forecast-clock strong{font-size:28px}
  .scene-wind>strong{font-size:23px}
  .forecast-clock>span,.scene-wind-title{font-size:7px}
  .scene-wind-from{font-size:7px}
}


/* Forecast refinement: reduce duplicate town banner and improve scene material depth. */
.beach-heading{margin:20px 0 10px}
.beach-heading h2{font-size:clamp(25px,7vw,32px)}
#playback-town{display:none}
#player-window-title{margin-bottom:6px}
.moment-header h3#selected-time{font-size:clamp(16px,3.6vw,24px);line-height:1.25}
#sea-back{filter:drop-shadow(0 10px 14px rgba(6,44,64,.10))}
#sea-front{filter:drop-shadow(0 14px 24px rgba(4,43,58,.14))}
#sea-floor-haze{opacity:.24}
#sea-front-highlight{mix-blend-mode:screen;opacity:.9}
#sea-shadow-line{opacity:.4}
#shore{filter:drop-shadow(-8px -1px 12px rgba(72,53,30,.10))}
#shore-base,#shore-dune,#shore-shadow,#shore-ridge,#shore-highlight,.shore-wash{transition:fill .25s ease,stroke .25s ease,opacity .25s ease}
#sky-clouds g{transform-box:fill-box;transform-origin:center;transition:opacity .25s linear}
.ocean-scene.scene-dawn #shore-base{fill:#ffd8a0}
.ocean-scene.scene-dusk #shore-base{fill:#efc07f}
.ocean-scene.scene-night #shore-base{fill:#b39b76}
.ocean-scene.scene-night #shore-dune{fill:#aa8e67}
.ocean-scene.scene-night #shore-shadow{fill:#85694d}
.ocean-scene.scene-night #shore-ridge{fill:#61754d}
.ocean-scene.scene-dawn #sea-front-highlight,.ocean-scene.scene-dusk #sea-front-highlight{opacity:.18}
.ocean-scene.scene-night #sea-front-highlight{opacity:.08}
@media(max-width:759px){
  .beach-heading h2{font-size:clamp(22px,6.4vw,29px)}
  .moment-header{padding:18px 16px 8px}
}


/* Second refinement: stronger clay sea, puffier clouds, and more compact mobile header. */
#sea-back{filter:drop-shadow(0 12px 15px rgba(6,44,64,.12)) saturate(1.02)}
#sea-back-highlight{mix-blend-mode:screen;opacity:.75}
#sea-front{filter:drop-shadow(0 18px 28px rgba(4,43,58,.16)) saturate(1.05)}
#sea-front-highlight{mix-blend-mode:screen;opacity:.92}
#sea-mid-ridge{opacity:.7}
#sea-shadow-line{opacity:.48}
#shore{filter:drop-shadow(-10px -2px 16px rgba(72,53,30,.12))}
#sky-clouds .cloud-shadow{fill:#5ba3b3;opacity:.22;transform:translate(3px,5px)}
#sky-clouds .cloud-body{fill:inherit}
#sky-clouds .cloud-top{fill:#f8ffff;opacity:.36}
.ocean-scene.scene-night #sky-clouds .cloud-shadow{fill:#355c72;opacity:.32}
.ocean-scene.scene-night #sky-clouds .cloud-top{fill:#dff6fb;opacity:.14}
.ocean-scene.scene-dawn #sky-clouds .cloud-top,.ocean-scene.scene-dusk #sky-clouds .cloud-top{opacity:.28}
@media(max-width:430px){
  .forecast-nav{height:60px;padding:8px 14px}
  .forecast-nav nav{gap:7px}
  .forecast-nav nav a{font-size:11px;padding:9px 11px}
  .brand{font-size:12px;gap:8px}
  .brand img{width:36px;height:36px}
  .beach-tabs{padding-top:8px;padding-bottom:8px;gap:7px}
  .beach-tabs button{min-height:51px;padding:8px 4px;border-radius:15px}
  .beach-tabs button strong{font-size:12px}
  .beach-tabs button span{font-size:9px;margin-top:3px}
  .ben-thumbnail-card{padding:10px 12px;gap:12px}
  .ben-thumb-copy strong{font-size:13px}
  .beach-heading{margin:10px 0 3px;gap:8px;align-items:center}
  .beach-heading h2{font-size:clamp(20px,6vw,26px)}
  .share-button{min-height:36px;padding:8px 11px;font-size:10px}
  .load-status{margin:4px 0 10px;font-size:10px}
  .moment-header{padding:14px 14px 6px;gap:10px}
  #player-window-title{font-size:7px;letter-spacing:1.15px}
  .moment-header h3#selected-time{font-size:15px;line-height:1.2}
  .moment-header .quiet{min-height:34px;padding:6px 9px;font-size:8px;border-radius:18px}
}


/* Third refinement: sculpted wave, molded clay beach, and improved floating badge on mobile. */
#wave-volume{mix-blend-mode:screen;opacity:.72;filter:drop-shadow(0 6px 10px rgba(120,255,246,.12))}
#wave-gloss{opacity:.9;filter:drop-shadow(0 0 6px rgba(255,255,255,.22))}
#wave-inner-shadow{opacity:.55}
#sea-front{filter:drop-shadow(0 20px 30px rgba(4,43,58,.18)) saturate(1.06)}
#sea-front-highlight{opacity:.94}
#sea-mid-ridge{opacity:.78}
#sea-shadow-line{opacity:.52}
#wave-foam{stroke-width:4.4;filter:drop-shadow(0 0 4px rgba(255,255,255,.18))}
#shore-clay-ridge,#shore-clay-groove,#shore-clay-bumps,#shore-pebble-shadow{transition:stroke .25s ease,opacity .25s ease}
#shore-base{filter:drop-shadow(-2px 2px 3px rgba(175,112,51,.12))}
#shore-dune{filter:drop-shadow(-2px 2px 2px rgba(133,94,51,.08))}
#shore-clay-ridge{stroke:#eccb8f;opacity:.78}
#shore-clay-groove{stroke:#ba8b58;opacity:.56}
#shore-clay-bumps{stroke:#d6af73;opacity:.88}
#shore-pebble-shadow{stroke:#8e6840;opacity:.42}
.ocean-scene.scene-night #shore-clay-ridge{stroke:#c3aa82;opacity:.45}
.ocean-scene.scene-night #shore-clay-groove{stroke:#7f6047;opacity:.45}
.ocean-scene.scene-night #shore-clay-bumps{stroke:#aa8a5c;opacity:.6}
.ocean-scene.scene-dusk #wave-volume{opacity:.55}
.ocean-scene.scene-night #wave-volume{opacity:.34}
.ocean-scene.scene-night #wave-gloss{opacity:.46}
.ocean-scene.scene-night #wave-inner-shadow{opacity:.42}
.floating-brand{right:10px;bottom:max(96px,calc(env(safe-area-inset-bottom) + 78px));width:66px;height:78px;filter:drop-shadow(0 5px 14px rgba(0,27,59,.45))}
.floating-brand img{width:60px;height:60px;border-width:2.5px}
.floating-brand>span{padding:4px 2px;font-size:7px;border-radius:11px}
.brand-menu{right:12px;bottom:170px;max-width:min(240px,calc(100vw - 24px))}
@media(max-width:430px){
  .ocean-scene{margin-bottom:10px}
  .floating-brand{right:8px;bottom:max(90px,calc(env(safe-area-inset-bottom) + 72px));width:62px;height:74px}
  .floating-brand img{width:56px;height:56px}
  .floating-brand>span{font-size:6.8px;padding:4px 2px}
  .brand-menu{right:8px;bottom:156px;min-width:200px;padding:16px}
}
@media(min-width:760px){
  .floating-brand{right:20px;bottom:24px;width:82px;height:92px}
  .floating-brand img{width:74px;height:74px}
  .floating-brand>span{font-size:8.5px}
  .brand-menu{right:20px;bottom:128px}
}


/* Next build: cleaner player chrome, dynamic beach selectors, safety states, sky extras. */
.moment-header>div{display:none}
.moment-header{min-height:44px;padding:7px 14px;justify-content:flex-end;background:#0d4154;border-bottom:1px solid #2b6170}
.scene-caption{display:none!important}
.beach-tabs{gap:10px;overflow:visible}
.beach-tabs button{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;min-height:72px;transition:transform .24s ease,box-shadow .24s ease,background .24s ease;border:1px solid #ffffff0a}
.beach-tabs button:before{content:'';position:absolute;z-index:-1;left:-18%;right:-18%;height:38px;bottom:-19px;border:3px solid #89f6e7;border-radius:48%;opacity:.17;transform:rotate(-3deg);animation:selector-swell 5.8s ease-in-out infinite}
.beach-tabs button:after{content:'≈';position:absolute;right:12px;bottom:-7px;font-size:48px;line-height:1;color:#8df7e82b;transform:rotate(-10deg)}
.beach-tabs button:nth-child(2):before{animation-delay:-1.7s}.beach-tabs button:nth-child(3):before{animation-delay:-3.4s}
.beach-tabs button:hover,.beach-tabs button:focus-visible{transform:translateY(-3px) scale(1.015);box-shadow:0 9px 20px #001c2d45}
.beach-tabs button[aria-pressed=true]{background:linear-gradient(145deg,#3aebd4,#4bd9d2 65%,#1fa7b2);box-shadow:0 6px 0 #006f73,0 15px 30px #001d2e35;transform:translateY(-2px)}
.beach-tabs button[aria-pressed=true]:before{opacity:.65;border-color:#fff8eb;animation-duration:3.8s}
.beach-tabs button[aria-pressed=true]:after{color:#fff8eb55}
@keyframes selector-swell{50%{transform:translateX(12%) rotate(3deg) scaleY(1.18)}}
.safety-alert{display:flex;align-items:flex-start;gap:12px;margin:0 14px 12px;padding:13px 14px;border-radius:17px;background:#554319;color:#fff3bf;border:1px solid #a98537}
.safety-alert[hidden]{display:none!important}.safety-alert.danger{background:#542d2d;border-color:#d47768;color:#fff1e9}.safety-alert.caution{background:#554319;border-color:#d3a540}.safety-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#ffdb62;color:#073e47;font-weight:900}.danger .safety-icon{background:#ff7955}.safety-alert strong{font-size:12px}.safety-alert p{font-size:10px;line-height:1.5;margin:4px 0 0;color:inherit}
#sky-extras{pointer-events:none}.scene-night #sun-shaka{display:none!important}
#plane-green,#plane-blue,#night-bats,#night-satellite,#night-shooting-star,#night-ufo{filter:drop-shadow(0 3px 4px #00243a40)}
.scene-night #surfer-one.safety-ashore{filter:drop-shadow(0 7px 10px #0008) brightness(.82)}
#surfer-one.safety-ashore{filter:drop-shadow(0 6px 10px #4c342c55)}
@media(max-width:759px){.moment-header{min-height:40px;padding:5px 11px}.beach-tabs button{min-height:64px;border-radius:19px}.beach-tabs button strong{font-size:14px}.beach-tabs button span{font-size:9px}.safety-alert{margin-inline:10px}}
@media(prefers-reduced-motion:reduce){.beach-tabs button:before{animation:none}}


/* 2026-10-21: move the selected beach into the animation header. */
.compact-toolbar{margin:4px 0 4px;min-height:38px;justify-content:flex-end}
.compact-toolbar .beach-heading-copy{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.compact-toolbar .share-button{min-height:36px;padding:7px 12px;font-size:10px}
.moment-header{min-height:56px;padding:8px 14px;align-items:center;justify-content:space-between;background:#0d4154;border-bottom:1px solid #2b6170}
.moment-header>div.player-location{display:flex!important;align-items:baseline;gap:10px;min-width:0;flex:1}
#playback-town{display:block!important;margin:0!important;color:var(--yellow)!important;font-family:'Bowlby One SC','Arial Black',sans-serif;font-size:clamp(20px,4vw,28px)!important;line-height:1!important;letter-spacing:-.6px!important;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-report-label{display:inline-block;color:var(--cyan);font-size:8px;line-height:1.1;font-weight:800;letter-spacing:1.15px;white-space:nowrap}
#selected-time{display:none!important}
.moment-header .quiet{flex-shrink:0;min-height:34px;padding:6px 10px;font-size:8px;border-radius:18px}
@media(max-width:430px){
  .compact-toolbar{min-height:34px;margin:2px 0}
  .compact-toolbar .share-button{min-height:32px;padding:6px 10px;font-size:9px}
  .moment-header{min-height:50px;padding:7px 10px}
  .moment-header>div.player-location{gap:7px}
  #playback-town{font-size:19px!important}
  .player-report-label{font-size:6.8px;letter-spacing:.9px}
  .moment-header .quiet{min-height:30px;padding:5px 8px;font-size:7px}
}


/* 2026-10-21 feedback pass: shorter, decision-first forecast page. */
.moment-panel{min-height:0!important}
.ocean-scene{
  height:clamp(210px,50vw,500px)!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  margin-bottom:0!important;
}
.ocean-scene #ocean-visual{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

/* Compact the main six-value readout into two short rows on phones. */
.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;margin-inline:12px}
.metrics article{padding:10px 0}
.metric-name{font-size:8px;margin-bottom:5px}
.metrics strong{font-size:clamp(18px,5vw,24px)}
.metrics small{font-size:8px;margin-top:4px;line-height:1.35}
.unit-controls{margin:10px 12px 8px;gap:4px}
.unit-controls button{min-height:30px;padding:5px 8px}
.playback-controls{margin-inline:12px!important;padding:10px 0 4px!important;gap:6px!important}
.scrub-label{margin:11px 12px 0;font-size:10px}
input[type=range]{width:calc(100% - 24px);margin:0 12px;height:34px}
.slider-labels{margin:0 12px 10px}
.player-share{display:none!important}

/* Secondary data is available, but does not dominate the first visit. */
.forecast-detail-disclosure,.behind-forecast{
  margin:12px 0 18px;
  border:1px solid var(--line);
  border-radius:19px;
  background:#103e51;
  overflow:hidden;
}
.forecast-detail-disclosure>summary,.behind-forecast>summary{
  list-style:none;
  cursor:pointer;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 15px;
  font-size:13px;
  font-weight:800;
}
.forecast-detail-disclosure>summary::-webkit-details-marker,.behind-forecast>summary::-webkit-details-marker{display:none}
.forecast-detail-disclosure>summary:after,.behind-forecast>summary:after{content:'＋';color:var(--cyan);font-size:20px;line-height:1}
.forecast-detail-disclosure[open]>summary:after,.behind-forecast[open]>summary:after{content:'−'}
.forecast-detail-disclosure>summary span{display:block}
.forecast-detail-disclosure>summary small{display:block;margin-left:auto;color:var(--muted);font-size:9px;font-weight:600;text-align:right}
.forecast-detail-body{padding:0 10px 10px;border-top:1px solid var(--line)}
.forecast-detail-body .wind-visual{margin:10px 0!important}
.forecast-detail-body .range-tabs{margin:10px 0 8px}
.forecast-detail-body .chart-panel,.forecast-detail-body .details-panel{margin:8px 0;padding:13px 10px;border-radius:16px}
.forecast-detail-body .chart-panel .panel-top{margin-bottom:6px}
.forecast-detail-body .chart-panel .panel-top h3{font-size:14px}
.forecast-detail-body .chart-key{margin:7px 0 3px;font-size:8px}
.graph{min-height:112px}
.graph-empty{min-height:112px}
.graph svg text{font-size:9px}
.tide-events{margin:8px 4px 0;gap:6px;padding-bottom:4px}
.tide-event{min-width:92px;padding:9px;border-radius:12px;font-size:9px}
.tide-event strong{margin-bottom:4px}
.tide-event span{font-size:8px;margin-top:4px}
.forecast-detail-body .data-note{margin:8px 0 0;border-radius:14px;padding:11px 12px;font-size:9px}

/* Keep technical provenance at the very bottom in a compact menu-style disclosure. */
.behind-forecast{margin-top:22px;background:#0b3042}
.behind-forecast>summary{justify-content:flex-start}
.behind-menu-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:#17495c;color:var(--yellow);font-size:18px}
.behind-summary-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.behind-summary-copy strong{font-size:13px}
.behind-summary-copy small{font-size:9px;color:var(--muted);font-weight:600}
.behind-forecast>summary:after{margin-left:auto}
.behind-forecast-body{padding:0 10px 10px;border-top:1px solid var(--line)}
.behind-forecast .science-panel{margin:10px 0 8px;border-radius:16px;padding:15px}
.behind-forecast .sources{margin:8px 0 0}
.behind-forecast .sources details{border-radius:14px}

/* Safety stays prominent even while technical charts are tucked away. */
.warning-panel{margin-top:10px;margin-bottom:10px}
.safety-alert{margin-bottom:8px}

@media(max-width:359px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forecast-detail-disclosure>summary small{display:none}
}
@media(min-width:760px){
  .metrics{grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px}
  .metrics article{padding:12px 0}
  .forecast-detail-body{padding:0 14px 14px}
  .forecast-detail-body .chart-panel{padding:15px 12px}
  .behind-forecast-body{padding:0 14px 14px}
}

/* 2026-10-21 dawn-report refinement: roomier scene, integrated wind compass, calmer location selectors. */
.ocean-scene{
  height:clamp(265px,68vw,560px)!important;
  min-height:0!important;
}
.scene-wind{
  padding-right:62px!important;
  min-height:92px;
}
.scene-wind-compass{
  position:absolute;
  right:9px;
  top:28px;
  width:47px;
  height:47px;
  border:1.5px solid #8ff9e895;
  border-radius:50%;
  background:#082b3bd9;
  box-shadow:inset 0 0 0 3px #ffffff08;
  color:#d9fff8;
  font-size:6px;
  font-weight:800;
  line-height:1;
}
.scene-wind-compass .compass-n,.scene-wind-compass .compass-e,.scene-wind-compass .compass-s,.scene-wind-compass .compass-w{position:absolute;opacity:.78}
.scene-wind-compass .compass-n{left:50%;top:3px;transform:translateX(-50%)}
.scene-wind-compass .compass-e{right:3px;top:50%;transform:translateY(-50%)}
.scene-wind-compass .compass-s{left:50%;bottom:3px;transform:translateX(-50%)}
.scene-wind-compass .compass-w{left:3px;top:50%;transform:translateY(-50%)}
.scene-wind-needle{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:20px solid var(--coral);
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(0deg);
  transition:transform .45s ease,opacity .25s ease;
  filter:drop-shadow(0 1px 1px #001b3b88);
}
.scene-wind-hub{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--yellow);transform:translate(-50%,-50%);box-shadow:0 0 0 2px #062c40}
.direction-pill{display:none!important}

/* Beach choices behave like three lively mini destination cards, without distracting from the report. */
.beach-tabs button{will-change:transform;background-position:0 50%}
.beach-tabs button[aria-pressed=true]{
  background:linear-gradient(120deg,#3aebd4 0%,#6bf2df 34%,#34c9ca 58%,#3aebd4 100%);
  background-size:220% 100%;
  animation:selector-active-tide 4.8s ease-in-out infinite;
}
.beach-tabs button strong{transition:transform .24s ease,text-shadow .24s ease}
.beach-tabs button[aria-pressed=true] strong{transform:translateY(-1px);text-shadow:0 1px 0 #ffffff4d}
.beach-tabs button:active{transform:translateY(1px) scale(.985)}
@keyframes selector-active-tide{
  0%,100%{background-position:0 50%;box-shadow:0 6px 0 #006f73,0 12px 24px #001d2e28}
  50%{background-position:100% 50%;box-shadow:0 6px 0 #006f73,0 17px 32px #00d6c21f}
}

@media(max-width:430px){
  .ocean-scene{height:clamp(270px,74vw,335px)!important}
  .scene-wind{min-height:86px;padding-right:55px!important}
  .scene-wind-compass{width:43px;height:43px;right:7px;top:26px}
  .scene-wind-needle{border-left-width:4px;border-right-width:4px;border-bottom-width:18px}
}
@media(min-width:760px){
  .ocean-scene{height:clamp(420px,52vw,590px)!important}
  .scene-wind{padding-right:84px!important;min-height:118px}
  .scene-wind-compass{width:64px;height:64px;right:14px;top:38px;font-size:8px}
  .scene-wind-needle{border-left-width:6px;border-right-width:6px;border-bottom-width:27px}
}
@media(prefers-reduced-motion:reduce){
  .beach-tabs button[aria-pressed=true]{animation:none}
}
/* Compass needle geometry override: stable centre pivot at every card size. */
.scene-wind-needle{
  left:50%;top:50%;width:3px;height:18px;
  margin-left:-1.5px;margin-top:-18px;
  border:0;background:var(--coral);border-radius:3px 3px 1px 1px;
  transform-origin:50% 100%;transform:rotate(0deg);
}
.scene-wind-needle:before{content:'';position:absolute;left:50%;top:-4px;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0;border-top:7px solid var(--coral)}
@media(max-width:430px){.scene-wind-needle{height:16px;margin-top:-16px}}
@media(min-width:760px){.scene-wind-needle{height:25px;margin-top:-25px;width:4px;margin-left:-2px}.scene-wind-needle:before{top:-5px;border-left-width:5px;border-right-width:5px;border-top-width:9px}}

/* 2026-10-21 report3: smoother scene, stronger wind sky, tide summary and local spot utility. */
.ocean-scene{height:clamp(315px,82vw,420px)!important}
@media(min-width:760px){.ocean-scene{height:clamp(470px,54vw,640px)!important}}

/* Quick tide information stays visible without another large graph. */
.tide-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 12px 4px}
.tide-quick article{min-width:0;background:#082f42;border:1px solid #28586a;border-radius:15px;padding:10px 12px}
.tide-quick span{display:block;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.tide-quick strong{display:block;color:var(--cyan);font-size:15px;line-height:1.15;margin-top:5px}
.tide-quick small{display:block;color:var(--muted);font-size:8px;line-height:1.35;margin-top:4px}

/* Featured local school follows the report: action first, detail second. */
.forecast-school.featured-school{--school-card-bg-1:#f6c9b8;--school-card-bg-2:#f2ddc9;--school-card-text:#07384a;--school-card-muted:#315c67;--school-service-bg:#f8efe3;--school-service-text:#07384a;--school-cta-bg:#0a5265;--school-cta-text:#fffdf7;display:block;margin:10px 0 10px;padding:17px;border-radius:20px;background:linear-gradient(145deg,var(--school-card-bg-1),var(--school-card-bg-2));color:var(--school-card-text);border:1px solid #ffffff75;box-shadow:0 10px 28px #001d2a18}
.school-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.featured-school .kicker{margin-bottom:6px;color:var(--school-card-muted)}
.featured-school h3{font-family:'Bowlby One SC','Arial Black',sans-serif;font-size:clamp(21px,5vw,29px);line-height:1.05;margin:0 0 5px;letter-spacing:-.6px}
.school-place{margin:0!important;font-size:10px!important;font-weight:800;opacity:.78}
.partner-badge{flex:0 0 auto;background:#fff3c0;border-radius:999px;padding:7px 9px;font-size:8px;font-weight:900;white-space:nowrap}
.school-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0 11px}
.school-services span{display:grid;place-items:center;min-height:35px;padding:6px 4px;border-radius:12px;background:var(--school-service-bg);color:var(--school-service-text);border:1px solid #ffffff88;font-size:9px;font-weight:900;text-align:center}
.school-description{font-size:11px!important;line-height:1.5!important;margin:0 0 13px!important;max-width:650px!important}
.school-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.school-actions .primary-link{padding:11px 14px;min-height:42px;background:var(--school-cta-bg)!important;color:var(--school-cta-text)!important;box-shadow:none!important}
.school-actions>a:not(.primary-link){font-size:10px;font-weight:800;color:var(--school-card-text)}

/* Compact local guide: collapsed by default, with hazards obvious once opened. */
.spot-guide{margin:0 0 10px;border:1px solid var(--line);border-radius:18px;background:#103e51;overflow:hidden}
.spot-guide>summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:56px;padding:11px 14px}
.spot-guide>summary::-webkit-details-marker{display:none}
.spot-guide>summary>span{display:flex;flex-direction:column;gap:2px}
.spot-guide>summary strong{font-size:13px}
.spot-guide>summary small{font-size:9px;color:var(--muted);font-weight:600}
.spot-guide>summary:after{content:'＋';margin-left:auto;color:var(--cyan);font-size:19px}
.spot-guide[open]>summary:after{content:'−'}
.spot-guide-body{padding:0 11px 11px;border-top:1px solid var(--line)}
.spot-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
.spot-guide-grid article{background:#082f42;border-radius:13px;padding:10px;min-width:0}
.spot-guide-grid span{display:block;color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.spot-guide-grid strong{font-size:10px;line-height:1.4;display:block}
.spot-hazard{margin-top:8px;background:#4a3922;border:1px solid #98763d;border-radius:13px;padding:11px 12px}
.spot-hazard strong{font-size:10px;color:var(--yellow)}
.spot-hazard p{font-size:10px;line-height:1.5;margin:4px 0 0;color:#fff4d2}
.spot-hazard.lahinch-rock-warning{background:#522d2d;border-color:#cf7465}
.spot-hazard.lahinch-rock-warning strong{color:#ffb099}
@media(max-width:470px){.spot-guide-grid{grid-template-columns:1fr}.partner-badge{font-size:7px;padding:6px 8px}.school-services span{font-size:8px}}

/* Extra cloud layers are wind-intensity cues; transforms are updated smoothly in JS. */
#sky-clouds>g{will-change:transform,opacity}
#surfer-one,#moving-wave-height{will-change:transform}


/* 2026-10-21 report4: six spots, selected-school badge and continuous minute playback. */
.school-mark-button{--school-mark-bg:#cf202f;--school-mark-fg:#fff;width:50px!important;height:50px!important;min-width:50px!important;padding:0!important;border-radius:50%!important;background:var(--school-mark-bg)!important;color:var(--school-mark-fg)!important;display:grid!important;place-items:center!important;border:3px solid #ffffffd9!important;box-shadow:0 4px 0 #001e2d66,0 8px 20px #00192755;text-decoration:none!important;transition:transform .2s ease,box-shadow .2s ease!important;overflow:hidden}
.school-mark-button span{font-family:'Arial Black',Arial,sans-serif;font-size:14px;font-weight:900;letter-spacing:-.7px;text-align:center;line-height:1}
.school-mark-button:hover,.school-mark-button:focus-visible{transform:translateY(-2px) rotate(-2deg);box-shadow:0 6px 0 #001e2d55,0 12px 24px #00192766}
.beach-tabs button:nth-child(4):before{animation-delay:-.8s}.beach-tabs button:nth-child(5):before{animation-delay:-2.5s}.beach-tabs button:nth-child(6):before{animation-delay:-4.2s}
@media(min-width:760px){.beach-tabs{grid-template-columns:repeat(6,minmax(0,1fr));max-width:none}.beach-tabs button strong{font-size:13px}.beach-tabs button{min-height:68px}}
@media(max-width:759px){.forecast-nav nav>a:not(.school-mark-button){display:none}.school-mark-button{width:46px!important;height:46px!important;min-width:46px!important}.beach-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.beach-tabs button strong{font-size:12px}.beach-tabs button span{font-size:8px}}
@media(max-width:360px){.beach-tabs{gap:6px}.beach-tabs button{min-height:58px;padding-inline:2px}.beach-tabs button strong{font-size:11px}}

/* 2026-10-21 data-fix: three compact live cards across the scene header. */
.scene-tide{
  position:absolute;z-index:2;top:10px;right:12px;
  width:118px;min-height:92px;padding:9px 10px;
  border:1px solid #77efe16b;border-radius:14px;
  background:#052637ec;box-shadow:0 5px 18px #001b3b33;
  pointer-events:none;color:#f8fcf8;
}
.scene-tide-title{display:block;color:var(--cyan);font-size:8px;font-weight:800;letter-spacing:.8px;margin-bottom:7px}
.scene-tide>div{display:flex;align-items:baseline;justify-content:space-between;gap:7px;line-height:1.25}
.scene-tide>div+div{margin-top:5px;padding-top:5px;border-top:1px solid #ffffff14}
.scene-tide small{font-size:7px;font-weight:800;color:var(--muted);letter-spacing:.5px}
.scene-tide strong{font-size:14px;color:var(--yellow);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.ocean-scene.scene-night .scene-tide{background:#031725f2;border-color:#85fff38a;box-shadow:0 8px 24px #000b18a3}
.ocean-scene.scene-dawn .scene-tide,.ocean-scene.scene-dusk .scene-tide{background:#082335ee;border-color:#ffe0b873}
@media(max-width:600px){
  .forecast-clock{left:8px!important;width:30%;padding:7px 8px!important}
  .forecast-clock strong{font-size:25px!important}
  .forecast-clock>span{font-size:7px!important}
  .scene-wind{left:34%!important;width:35%;min-width:0!important;max-width:none!important;padding:7px 42px 7px 8px!important;min-height:82px!important}
  .scene-wind>strong{font-size:21px!important}.scene-wind strong small{font-size:9px!important}.scene-wind-title,.scene-wind-from{font-size:6.5px!important}
  .scene-wind-compass{width:36px!important;height:36px!important;right:4px!important;top:28px!important;font-size:5px!important}
  .scene-tide{top:8px;right:8px;width:28%;min-height:82px;padding:7px 7px;border-radius:12px}
  .scene-tide-title{font-size:6.5px;margin-bottom:5px}.scene-tide small{font-size:5.5px}.scene-tide strong{font-size:11px}
  .scene-tide>div{gap:3px}.scene-tide>div+div{margin-top:4px;padding-top:4px}
}
@media(min-width:760px){
  .scene-tide{top:20px;right:24px;width:190px;min-height:118px;padding:13px 16px;border-radius:16px}
  .scene-tide-title{font-size:10px;margin-bottom:10px}.scene-tide small{font-size:8px}.scene-tide strong{font-size:20px}.scene-tide>div+div{margin-top:7px;padding-top:7px}
}

.spot-guide-page-link{display:inline-flex;margin-top:16px;background:#ffdb79;color:#073e47;text-decoration:none;font-size:12px;font-weight:900;padding:12px 15px;border-radius:18px}