/* Button-attached guidance, adapted from the D-JEPA project-page treatment. */
.oneocean-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0 4px;
  margin-top: 2.25rem;
}
.guided-link { position: relative; display: inline-flex; flex: 0 0 auto; margin-bottom: 78px; }
.button-guide {
  position: absolute;
  z-index: 12;
  top: calc(100% + 10px);
  left: 4px;
  box-sizing: border-box;
  width: 218px;
  padding: 11px 14px;
  border: 1px solid #c6a5ec;
  border-radius: 13px;
  background: #faf5ff;
  color: #503067;
  box-shadow: 0 6px 22px #643b8218;
  text-align: left;
  font: 12px/1.4 Inter, system-ui, sans-serif;
  pointer-events: none;
}
.button-guide::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 27px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #c6a5ec;
  border-left: 1px solid #c6a5ec;
  background: inherit;
  transform: rotate(45deg);
}
.guide-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.guide-copy { display: block; margin-top: 3px; color: #755d86; font-size: 11px; }
.guide-signal { display: inline-flex; align-items: center; gap: 3px; height: 14px; color: #8b45c4; }
.guide-signal i { display: block; width: 3px; height: 8px; border-radius: 3px; background: currentColor; animation: guide-wave 2.4s ease-in-out infinite; }
.guide-signal i:nth-child(2) { height: 13px; animation-delay: .18s; }
.guide-signal i:nth-child(3) { animation-delay: .36s; }
.oneocean-links .button.demo-highlight,
#btn-results {
  color: #fff !important;
  background: linear-gradient(120deg, #8835da, #6036e8) !important;
  border: 1px solid #ad82f4 !important;
  min-height: 44px;
  box-shadow: 0 5px 16px #6731c63d;
  animation: guide-halo 3.2s ease-in-out infinite;
}
.oneocean-links .button.demo-highlight:hover,
#btn-results:hover { background: linear-gradient(120deg, #7524c5, #5026d5) !important; }
.oneocean-links .button.demo-highlight:focus-visible,
#btn-results:focus-visible,
.project-home:focus-visible { outline: 3px solid #f9b83c; outline-offset: 4px; }
.task-launch { position: absolute; top: 122px; right: 20px; z-index: 220; }
#btn-results {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 12px 18px;
  border-radius: 10px;
  font: 700 13px/1.3 Inter, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.task-launch .button-guide { top: calc(100% + 13px); left: auto; right: 0; }
.task-launch .button-guide::before { left: auto; right: 27px; }
.project-home {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1101;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid #d4c7e5;
  border-radius: 10px;
  background: #fff;
  color: #3e2857;
  box-shadow: 0 4px 16px #08142824;
  font: 700 13px/1.4 Inter, system-ui, sans-serif;
  text-decoration: none;
}
.project-home:hover { color: #5d2a9d; background: #f6efff; }
.project-home svg { width: 17px; height: 17px; }
.demo-guide-page #ui-panel { top: 82px; box-sizing: border-box; width: 355px; max-height: calc(100dvh - 158px); }
@keyframes guide-wave {
  0%,65%,100% { transform: scaleY(.55); opacity: .65; }
  25% { transform: scaleY(1); opacity: 1; }
}
@keyframes guide-halo {
  0%,100% { box-shadow: 0 5px 16px #6731c63d, 0 0 0 0 #a677ed00; }
  45% { box-shadow: 0 5px 20px #6731c64d, 0 0 0 5px #a677ed38; }
}
@media (max-width: 680px) {
  .task-launch { top: 112px; right: 16px; }
  #btn-results { padding: 12px 16px; font-size: 12px; }
  .project-home { top: 18px; left: 12px; padding: 11px 13px; }
  .demo-guide-page #ui-panel { top: 260px; left: 12px; width: calc(100% - 24px); max-height: calc(100dvh - 336px); }
  .demo-guide-page #instructions { bottom: 16px; width: calc(100% - 24px); box-sizing: border-box; padding: 8px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
  .oneocean-links { gap: 8px; }
  .oneocean-links .link-block { display: block; width: 100%; margin-bottom: 0; }
  .oneocean-links .guided-link { margin-bottom: 78px; }
  .oneocean-links .button { margin: 0 !important; }
  .button-guide { left: 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-signal i, .oneocean-links .button.demo-highlight, #btn-results { animation: none; }
}