/* Approved V28 copy; the ocean, gallery geometry and artwork remain unchanged. */
.hero-description { white-space: nowrap; font-size: clamp(13px, 1.08vw, 18px); }
.feature-separator { color: #607481; margin-inline: .35em; }
.fish-interaction-hint, .gallery-wheel-hint {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #93a9b8; font-size: 12px; line-height: 24px; letter-spacing: .09em;
}
.fish-interaction-hint {
  width: 220px; height: 32px; margin: 12px 0 0; position: relative;
  cursor: default; user-select: none;
}
.hint-icon { width: 15px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fish-interaction-hint > * { pointer-events: none; }
.hint-characters { display: inline-flex; }
.hint-character { display: inline-block; }
.fish-interaction-hint.is-scattering .hint-characters { visibility: hidden; }
.hint-shards { position: absolute; inset: 0; pointer-events: none; }
.hint-shard { position: absolute; display: block; pointer-events: none; }
.hint-shard-ink { display: block; width: 100%; height: 100%; white-space: nowrap; }
.gallery-wheel-hint { margin: 10px 0 0; height: 28px; pointer-events: none; }
.touch-label { display: none; }
@media (max-height:800px) and (min-width:901px) { .fish-interaction-hint { width: 190px; } }
@media (max-width:1100px) { .fish-interaction-hint { width: 170px; } }
@media (max-width:800px) { .hero-description { font-size: 14px; } }
@media (max-width:480px) {
  .hero-description { font-size: 13px; }
  .feature-separator { margin-inline: .1em; }
  .fish-interaction-hint { width: 162px; font-size: 11px; margin-top: 10px; }
}
@media (max-width:350px) { .hero-description { font-size: 12px; } .fish-interaction-hint { width: 146px; } }
@media (hover:none) and (pointer:coarse) { .wheel-label { display:none; } .touch-label { display:inline; } }