/* Peregian sea section. Restyle the readout to suit the page; the canvas fills the section. */
[data-peregian-sea] {
  position: relative;
  height: min(78vh, 760px);
  min-height: 360px;
  overflow: hidden;
  background: linear-gradient(#5f86b3, #a9c2d8 55%, #0b3440 56%, #031a22);
}
[data-peregian-sea].ps-fallback { background: linear-gradient(#5f86b3, #a9c2d8 55%, #0b3440 56%, #031a22); }
.ps-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ps-readout {
  position: absolute;
  left: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  max-width: calc(100% - 32px);
  color: #fff;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.ps-readout p { margin: 0; }
.ps-readout .ps-title { font-size: 15px; letter-spacing: 0.04em; margin-bottom: 6px; }
.ps-readout dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0 0 6px; }
.ps-readout dt { opacity: 0.7; }
.ps-readout dd { margin: 0; }
.ps-readout .ps-source { opacity: 0.6; font-size: 11px; }