/* One fixed row: every orb starts at the viewport edge; Online is 15% larger. */
.hero .hero-orb-hub,
.hero .hero-orb-hub[data-card-aligned="true"],
.hero .hero-orb-hub:has(.nav-feature[open]){
  --sticky-button-size:var(--aligned-orb-size,88px);
  --sticky-online-size:calc(var(--sticky-button-size) * 1.15);
  --large-orb-size:var(--sticky-button-size);
  --online-size:var(--sticky-online-size);
  position:fixed;
  top:0;
  left:50%;
  width:min(1360px,calc(100vw - 24px));
  height:var(--sticky-online-size);
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:1fr;
  align-items:start;
  justify-items:center;
  gap:0;
  margin:0;
  translate:none;
  transform:translateX(-50%);
  z-index:1000;
  pointer-events:none;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav{
  --dock-feature-size:var(--sticky-button-size);
  --dock-orb-size:var(--sticky-button-size);
}
.hero>.hero-vortex-toggle{top:auto;bottom:12px}
.hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature>summary{padding:10px 4px;font-size:10px;line-height:1.05}
.hero .hero-orb-hub .navigation-strip.helmet-nav .nav-side>:is(a,button),
.hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action,
.hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature{
  align-self:start;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack,
.hero .hero-orb-hub[data-card-aligned="true"] .navigation-strip.helmet-nav>.harbor-online-stack{
  width:var(--sticky-online-size);
  height:var(--sticky-online-size);
  aspect-ratio:1;
  grid-column:4;
  grid-row:1;
  align-self:start;
  justify-self:center;
}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-value{gap:1px;font-size:14px}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-icon{font-size:14px;line-height:1}
.hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-value strong{font-size:21px}
.hero .hero-orb-hub.is-scrolled::before{
  content:none;
}
@media(max-width:720px){
  .hero .hero-orb-hub,
  .hero .hero-orb-hub[data-card-aligned="true"],
  .hero .hero-orb-hub:has(.nav-feature[open]){
    --sticky-button-size:min(70px,calc((111.111vw - 12px) / 7.6));
    width:calc(111.111vw - 12px);
  }
  .hero .hero-orb-hub .nav-side-left>a:first-of-type{grid-column:1;grid-row:1}
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action-register{grid-column:2;grid-row:1}
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action-download{grid-column:3;grid-row:1}
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack{grid-column:4;grid-row:1}
  .hero .hero-orb-hub .nav-side-middle>.nav-ranking-first{grid-column:5;grid-row:1}
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature{grid-column:6;grid-row:1}
  .hero .hero-orb-hub .nav-side-right>.navigation-account,
  .hero .hero-orb-hub:has(.nav-feature[open]) .nav-side-right>.navigation-account{grid-column:7;grid-row:1;justify-self:center}
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-side>:is(a,button),
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-side-right .navigation-account,
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action,
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature,
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature>summary{
    width:var(--sticky-button-size);
    height:var(--sticky-button-size);
    min-height:0;
    padding:4px 1px;
    font-size:10px;
  }
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature{padding:0}
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature>summary{font-size:8px;line-height:1}
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature>summary .nav-feature-chevron{display:none}
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:auto;
    right:0;
    width:max-content;
    padding:6px;
    border:1px solid #9ed8f2;
    border-radius:8px;
    background:#0d2337f5;
    box-shadow:0 8px 18px #03142299;
    transform:none;
  }
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature-menu>a{width:92px;height:44px;padding:7px;font-size:11px}
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-value{gap:0;font-size:9px}
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-icon{font-size:10px}
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-value strong{font-size:14px}
  .wrap>.hero+.main,
  body[data-route="home"] .wrap>.hero+.main,
  .wrap>.hero:has(.nav-feature[open])+.main,
  body[data-route="home"] .wrap>.hero:has(.nav-feature[open])+.main{padding-top:16px}
}
@media(max-width:480px){
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-side>:is(a,button)>span,
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.orb-action>span,
  .hero .hero-orb-hub .navigation-strip.helmet-nav .nav-feature>summary>span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .hero .hero-orb-hub .navigation-strip.helmet-nav .fa{font-size:16px}
  .hero .hero-orb-hub .navigation-strip.helmet-nav>.harbor-online-stack .harbor-online-icon{font-size:10px}
}