.sailing-landscape {pointer-events:auto}
.sailing-scene {position:relative;width:100%;max-width:650px;aspect-ratio:2126 / 740;margin:0 auto}
.sailing-art {position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sailing-art img,.sailing-canvas {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:38.2% bottom}
.sailing-landscape .sailing-art img {-webkit-mask-image:none;mask-image:none;max-width:none}
.sailing-canvas {visibility:hidden}
.sailing-scene[data-ready] .sailing-canvas {visibility:visible}
.sailing-scene[data-ready] img {visibility:hidden}
.sailing-pause {position:absolute;right:7px;bottom:3px;display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:50%;background:rgba(255,253,247,.75);color:#92938d;cursor:pointer;opacity:.55;transition:opacity .2s}
.sailing-pause[hidden] {display:none}
.sailing-pause:hover,.sailing-pause:focus-visible {opacity:1}
.sailing-pause:focus-visible {outline:1px solid #8a8f88;outline-offset:2px}
.sailing-pause svg {fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:540px){
  .sailing-scene {height:100%;aspect-ratio:auto}
  .sailing-pause {right:3px;width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){
  .sailing-scene[data-ready] .sailing-canvas {visibility:hidden}
  .sailing-scene[data-ready] img {visibility:visible}
  .sailing-pause {display:none}
}