.pagB{--b-sky-op:1;position:relative;border-radius:18px;overflow:hidden}
.pagB-svg{display:block;width:100%;height:auto;pointer-events:none}
.pagB-sky{fill:#cdeef4}
.pagB-band{opacity:0}
.pagB-sun{opacity:1}
.pagB-moon{opacity:0}
.pagB-water{fill:#23b3d9}.pagB-deep{fill:#0f8fb8}
.pagB-tint{fill:#0f8fb8;opacity:.32}
.pagB-sand{fill:#ead9b8}.pagB-sandedge{stroke:#e3d9c2}
.pagB-dolph{fill:#8fa9b8}.pagB-belly{fill:#e6eef2}
.pagB-manatee{fill:#8296a0}
.pagB-foamA,.pagB-foamB{opacity:.85}
.pagB-glints{opacity:.85}
.pagB-twinkle{opacity:.9}
.pagB-trail{opacity:0}
html[data-theme="dark"] .pagB-sky{fill:#0c2127}
html[data-theme="dark"] .pagB-band{opacity:.55}
html[data-theme="dark"] .pagB-sun{opacity:0}
html[data-theme="dark"] .pagB-moon{opacity:1}
html[data-theme="dark"] .pagB-water{fill:#14495c}
html[data-theme="dark"] .pagB-deep{fill:#0c2127}
html[data-theme="dark"] .pagB-tint{fill:#0c2127;opacity:.5}
html[data-theme="dark"] .pagB-sand{fill:#4a4338}
html[data-theme="dark"] .pagB-sandedge{stroke:#2e2b26}
html[data-theme="dark"] .pagB-dolph{fill:#a9c2cf}
html[data-theme="dark"] .pagB-belly{fill:#d5e6ec}
html[data-theme="dark"] .pagB-manatee{fill:#93a8b2}
html[data-theme="dark"] .pagB-foamA,.pagB-foamB{opacity:.3}
.pagB .pag-anim,[class*="pagB-"]{transform-box:fill-box}
.pagB-scroll{transform-box:view-box;transform-origin:0 0;backface-visibility:hidden;will-change:transform;animation:pagBScroll 33.484s linear infinite}
.pagB-dB{animation:pagBArcY 4s linear infinite}
.pagB-dR{animation:pagBArcR 4s linear infinite;transform-origin:center}
.pagB-ringOut{animation:pagBRingOut 4s ease-out infinite;transform-origin:center;opacity:0}
.pagB-ringIn{animation:pagBRingIn 4s ease-out infinite;transform-origin:center;opacity:0}
.pagB-trail{animation:pagBTrailK 4s linear infinite}


.pagB-foam{animation:pagBFoam 5.5s ease-in-out infinite}
.pagB-foamB{animation:pagBFoam 5.5s ease-in-out -2.75s infinite}
.pagB-flag{animation:pagBFlag 2.2s ease-in-out infinite;transform-origin:0% 50%}
.pagB-phead{animation:pagBPhead 2.2s ease-in-out infinite;transform-origin:0% 100%}
.pagB-breathe{animation:pagBBreathe 4.4s ease-in-out infinite;transform-origin:50% 100%}
.pagB-sway{animation:pagBSway 4.4s ease-in-out infinite;transform-origin:50% 100%}
.pagB-hop{animation:pagBHop 2.2s ease-in-out infinite}
.pagB-star{animation:pagBStar 5.5s ease-in-out infinite;transform-origin:center}
.pagB-man{animation:none}
.pagB-under{fill:#3d6a7c}
html[data-theme="dark"] .pagB-under{fill:#1e4450}
.d-tail{transform-origin:0px 0px;animation:fluke .34s ease-in-out infinite}
@keyframes fluke{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-16deg)}}
.d-air{animation:pagBAir 4s linear infinite}
.d-under{animation:pagBUnder 4s linear infinite}
.pagB-dB0,.pagB-dR0,.pagB-ro0,.pagB-ri0,.pagB-tr0{animation-delay: -1.107s}.pagB-dB0 .d-air,.pagB-dB0 .d-under{animation-delay: -1.107s}.pagB-dB1,.pagB-dR1,.pagB-ro1,.pagB-ri1,.pagB-tr1{animation-delay: 1.038s}.pagB-dB1 .d-air,.pagB-dB1 .d-under{animation-delay: 1.038s}.pagB-dB2,.pagB-dR2,.pagB-ro2,.pagB-ri2,.pagB-tr2{animation-delay: -0.261s}.pagB-dB2 .d-air,.pagB-dB2 .d-under{animation-delay: -0.261s}
@keyframes pagBAir{
  0%,30%{opacity:1}
  38%,80%{opacity:1}
  88%{opacity:.35}
  92%{opacity:0}
  97%,100%{opacity:1}}
@keyframes pagBUnder{
  0%,80%{opacity:0}
  88%{opacity:.55}
  92%{opacity:.92}
  97%,100%{opacity:0}}
.flag-cloth{transform-box:fill-box;transform-origin:0px 12px;animation:flagwave 2.3s ease-in-out infinite}
@keyframes flagwave{0%,100%{transform:skewY(0deg) scaleX(1)}50%{transform:skewY(5deg) scaleX(0.94)}}
.pagB-crab{transform-box:fill-box;animation:pagBCrab 3.4s ease-in-out infinite}
.pagB-c1{animation-delay:-1.1s}
.pagB-c2{animation-delay:-2.2s}
@keyframes pagBCrab{
  0%,18%{transform:translateX(0)}
  28%{transform:translateX(32px)}
  40%,58%{transform:translateX(32px)}
  70%{transform:translateX(0)}
  80%,100%{transform:translateX(0)}}
.pagB-float0,.pagB-float1,.pagB-float2{animation:none}
.pagB-crawl{animation:pagBCrawl 5.6s ease-in-out infinite}
@keyframes pagBCrawl{
  0%,12%{transform:translate(0,0)}
  38%{transform:translate(9px,2px)}
  52%{transform:translate(9px,2px)}
  82%,100%{transform:translate(0,0)}}
.pagB-estep{animation:none}
.pagB-strike{transform-origin:15px -30px;animation:pagBStrike 5.2s ease-in-out infinite}
@keyframes pagBStrike{
  0%,58%,100%{transform:rotate(0)}
  66%{transform:rotate(14deg)}
  74%{transform:rotate(14deg)}
  82%{transform:rotate(0)}}
.pagB-cowhat{transform-box:fill-box;transform-origin:center;animation:pagBHat 3.6s ease-in-out infinite}
@keyframes pagBHat{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.pagB-cowlei{animation:pagBLei 3.2s ease-in-out infinite}
@keyframes pagBLei{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
.pagB-pgull{animation:pagBPgull 4.4s ease-in-out infinite}
@keyframes pagBPgull{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-3px)}}
.pagB-pglint{opacity:.15;animation:pagBPglint 2.8s ease-in-out infinite}
@keyframes pagBPglint{0%,100%{opacity:.12}50%{opacity:.85}}
.pagB-bulb{fill:#f6e27a}
html[data-theme="dark"] .pagB-bulb{fill:#ffe9a0}
.pagB-twinkle{animation:pagTwinkle 4.4s ease-in-out infinite}
.pagB.pag-paused *{animation-play-state:paused !important}
@keyframes pagBScroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-7220px,0,0)}}
@keyframes pagBArcY{
  0%{transform:translateY(6px);opacity:1}
  20%{transform:translateY(2px);opacity:1}
  32%{transform:translateY(8px);opacity:.95;animation-timing-function:cubic-bezier(0.64,0,0.78,0)}
  38%{transform:translateY(-22px);opacity:1;animation-timing-function:cubic-bezier(0.22,1,0.36,1)}
  50%{transform:translateY(-46px);opacity:1;animation-timing-function:cubic-bezier(0.64,0,0.78,0)}
  80%{transform:translateY(8px);opacity:1}
  88%{transform:translateY(12px);opacity:.85}
  94%{transform:translateY(8px);opacity:.9}
  100%{transform:translateY(6px);opacity:1}}
@keyframes pagBArcR{
  0%{transform:rotate(-2deg)}20%{transform:rotate(-4deg)}
  30%{transform:rotate(3deg)}42%{transform:rotate(-12deg)}
  55%{transform:rotate(-3deg)}68%{transform:rotate(12deg)}
  76%{transform:rotate(5deg)}86%{transform:rotate(1deg)}
  94%{transform:rotate(-1deg)}100%{transform:rotate(-2deg)}}
@keyframes pagBRingOut{0%,40%{opacity:0}43%{opacity:.9;transform:scale(.55)}56%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
@keyframes pagBRingIn{0%,72%{opacity:0}75%{opacity:.9;transform:scale(.55)}88%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
@keyframes pagBTrailK{0%,46%{opacity:0}52%{opacity:1}60%,100%{opacity:0}}
@keyframes pagBFoam{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes pagBFlag{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes pagBPhead{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes pagBBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1,1.05)}}
@keyframes pagBSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4.5deg)}}
@keyframes pagBHop{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-5px)}80%{transform:translateY(0)}90%{transform:translateY(-3px)}}
@keyframes pagBStar{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pagBMan{0%{transform:translateX(-42px)}100%{transform:translateX(42px)}}
@keyframes pagTwinkle{0%,100%{opacity:.15}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .pagB *{animation:none !important}
  .pagB-ringOut,.pagB-ringIn,.pagB-trail{opacity:0}
  .pagB-dB1{transform:translateY(-46px)}
  .pagB-dR1{transform:rotate(-7deg)}
  .d-air{opacity:1}.d-under{opacity:0}
  .pagB-dB2 .d-air{opacity:0}.pagB-dB2 .d-under{opacity:.92}
  .pagB-strike{transform:rotate(18deg)}
  .pagB-crawl{transform:translate(8px,1px)}
  .pagB-float0{transform:translateX(40px)}
  .pagB-float1{transform:translateX(50px)}
  .pagB-float2{transform:translateX(30px)}}
.pagB-dB1{animation-name:pagBArcYmid}
@keyframes pagBArcYmid{
  0%{transform:translateY(6px);opacity:1}
  20%{transform:translateY(2px);opacity:1}
  32%{transform:translateY(8px);opacity:.95;animation-timing-function:cubic-bezier(0.64,0,0.78,0)}
  38%{transform:translateY(-16px);opacity:1;animation-timing-function:cubic-bezier(0.22,1,0.36,1)}
  50%{transform:translateY(-34px);opacity:1;animation-timing-function:cubic-bezier(0.64,0,0.78,0)}
  80%{transform:translateY(8px);opacity:1}
  88%{transform:translateY(12px);opacity:.85}
  94%{transform:translateY(8px);opacity:.9}
  100%{transform:translateY(6px);opacity:1}}

/* site integration: pause control + motion=reduce static frame */
.pagB-ctrl{position:absolute;right:14px;bottom:12px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:auto}
#pagPaint[hidden]{display:none !important}
.pagB-ctrl button{
  font:600 .8rem/1 "Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  padding:.5rem 1rem;border-radius:999px;cursor:pointer;
  color:#17323a;background:rgba(253,251,246,.88);
  border:2px solid #4ac1aa;
}
.pagB-ctrl button:hover{background:#fdfbf6}
.pagB-ctrl button:focus-visible{outline:3px solid #0084a8;outline-offset:2px}
html[data-theme="dark"] .pagB-ctrl button{color:#f6f1e8;background:rgba(13,38,48,.88)}
html[data-theme="dark"] .pagB-ctrl button:hover{background:#0d2630}
html[data-theme="sunset"] .pagB-ctrl button{color:#fff6ea;background:rgba(42,26,46,.88);border-color:#ff8a5c}
html[data-theme="sunset"] .pagB-ctrl button:hover{background:#3a2340}
html[data-theme="sunset"] .pagB-ctrl button:focus-visible{outline-color:#ff8a5c}

/* Light / Dark water follows #pagPaint on every theme, including Sunset follow. */
body.paint-dark .pagB-sky{fill:#0c2127}
body.paint-dark .pagB-band{opacity:.55}
body.paint-dark .pagB-sun{opacity:0}
body.paint-dark .pagB-moon{opacity:1}
body.paint-dark .pagB-water{fill:#14495c}
body.paint-dark .pagB-deep{fill:#0c2127}
body.paint-dark .pagB-tint{fill:#0c2127;opacity:.5}
body.paint-dark .pagB-sand{fill:#4a4338}
body.paint-dark .pagB-sandedge{stroke:#2e2b26}
body.paint-dark .pagB-dolph{fill:#a9c2cf}
body.paint-dark .pagB-belly{fill:#d5e6ec}
body.paint-dark .pagB-manatee{fill:#93a8b2}
body.paint-dark .pagB-foamA,body.paint-dark .pagB-foamB{opacity:.3}
body.paint-dark .pagB-under{fill:#1e4450}
body.paint-dark .pagB-bulb{fill:#ffe9a0}
body:not(.paint-dark) .pagB-sky{fill:#cdeef4}
body:not(.paint-dark) .pagB-band{opacity:0}
body:not(.paint-dark) .pagB-sun{opacity:1}
body:not(.paint-dark) .pagB-moon{opacity:0}
body:not(.paint-dark) .pagB-water{fill:#23b3d9}
body:not(.paint-dark) .pagB-deep{fill:#0f8fb8}
body:not(.paint-dark) .pagB-tint{fill:#0f8fb8;opacity:.32}
body:not(.paint-dark) .pagB-sand{fill:#ead9b8}
body:not(.paint-dark) .pagB-sandedge{stroke:#e3d9c2}
body:not(.paint-dark) .pagB-dolph{fill:#8fa9b8}
body:not(.paint-dark) .pagB-belly{fill:#e6eef2}
body:not(.paint-dark) .pagB-manatee{fill:#8296a0}
body:not(.paint-dark) .pagB-foamA,body:not(.paint-dark) .pagB-foamB{opacity:.85}
body:not(.paint-dark) .pagB-under{fill:#3d6a7c}
body:not(.paint-dark) .pagB-bulb{fill:#f6e27a}

html[data-motion="reduce"] .pagB *{animation:none !important}
html[data-motion="reduce"] .pagB .pagB-ringOut,
html[data-motion="reduce"] .pagB .pagB-ringIn,
html[data-motion="reduce"] .pagB .pagB-trail{opacity:0}
html[data-motion="reduce"] .pagB .pagB-dB1{transform:translateY(-46px)}
html[data-motion="reduce"] .pagB .pagB-dR1{transform:rotate(-7deg)}
html[data-motion="reduce"] .pagB .d-air{opacity:1}
html[data-motion="reduce"] .pagB .d-under{opacity:0}
html[data-motion="reduce"] .pagB .pagB-dB2 .d-air{opacity:0}
html[data-motion="reduce"] .pagB .pagB-dB2 .d-under{opacity:.92}
html[data-motion="reduce"] .pagB .pagB-strike{transform:rotate(18deg)}
html[data-motion="reduce"] .pagB .pagB-crawl{transform:translate(8px,1px)}