/* Homepage: floating glass rail to the other pages.
   Phones: a pill at the bottom centre. ≥48rem: a vertical rail on the right edge. */

.ox-rail{
  --rail-bg:#ffffffc9;
  --rail-line:#0429531c;
  --rail-ink:#042953;
  --rail-hover:#04295310;
  --rail-tip-bg:#042953;
  --rail-tip-ink:#fff;
  --rail-ease:cubic-bezier(.2,.8,.2,1);
  position:fixed;
  z-index:70;
  left:50%;
  bottom:max(.75rem,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:.15rem;
  padding:.3rem;
  border:1px solid var(--rail-line);
  border-radius:999px;
  background:var(--rail-bg);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 #ffffffb3,0 1.1rem 2.4rem -1.1rem #04295366,0 .15rem .5rem #0429530d;
  transform:translateX(-50%);
  transition:background-color .45s,border-color .45s,box-shadow .45s,transform .5s var(--rail-ease),opacity .4s;
}
.ox-rail.is-dark{
  --rail-bg:#06142ad1;
  --rail-line:#44adfe38;
  --rail-ink:#e3f1ff;
  --rail-hover:#ffffff17;
  --rail-tip-bg:#fff;
  --rail-tip-ink:#042953;
  box-shadow:inset 0 1px 0 #ffffff14,0 1.1rem 2.4rem -1rem #000000b3,0 0 0 1px #00000033;
}
.ox-rail.is-tucked{transform:translate(-50%,calc(100% + 1.5rem));opacity:0}
.ox-rail :focus-visible{outline:3px solid #44ADFE;outline-offset:2px}

.ox-rail-list{display:flex;align-items:center;gap:.15rem;margin:0;padding:0;list-style:none}
.ox-rail-link,.ox-rail-lang{
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:2.75rem;
  height:2.75rem;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--rail-ink);
  transition:background-color .25s,color .45s,box-shadow .25s;
}
.ox-rail-link svg{width:1.2rem;height:1.2rem}
.ox-rail-link:hover,.ox-rail-lang:hover{background:var(--rail-hover)}
.ox-rail-link[aria-current=page]{background:#0062D6;color:#fff;box-shadow:0 .5rem 1.1rem -.4rem #0062d6cc,inset 0 1px 0 #ffffff40}
.ox-rail-lang{font:600 .68rem/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;cursor:pointer}
.ox-rail-sep{flex:none;width:1px;height:1.4rem;margin:0 .2rem;background:var(--rail-ink);opacity:.18;transition:background-color .45s}

/* Labels are always in the accessibility tree; phones keep them visually hidden. */
.ox-rail-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media (min-width:48rem){
  .ox-rail{
    left:auto;
    right:max(1rem,env(safe-area-inset-right));
    top:50%;
    bottom:auto;
    flex-direction:column;
    gap:.25rem;
    padding:.4rem;
    border-radius:1.75rem;
    transform:translateY(-50%);
  }
  .ox-rail.is-tucked{transform:translateY(-50%);opacity:1}
  .ox-rail-list{flex-direction:column;gap:.25rem}
  .ox-rail-sep{width:1.4rem;height:1px;margin:.2rem 0}
  .ox-rail-label{
    top:50%;
    right:calc(100% + .95rem);
    width:auto;
    height:auto;
    overflow:visible;
    clip:auto;
    padding:.5rem .8rem;
    border-radius:.6rem;
    background:var(--rail-tip-bg);
    color:var(--rail-tip-ink);
    font:600 .82rem/1 'DM Sans',sans-serif;
    letter-spacing:-.005em;
    box-shadow:0 .8rem 1.6rem -.8rem #04295399;
    opacity:0;
    pointer-events:none;
    transform:translate(.6rem,-50%);
    transition:opacity .2s,transform .35s var(--rail-ease);
  }
  .ox-rail-label::after{content:"";position:absolute;top:50%;right:-.25rem;width:.55rem;height:.55rem;border-radius:.1rem;background:inherit;transform:translateY(-50%) rotate(45deg)}
  .ox-rail-link:hover .ox-rail-label,.ox-rail-link:focus-visible .ox-rail-label{opacity:1;transform:translate(0,-50%)}
  /* The rail slides in once the hero has started its intro. */
  .ox-js .ox-rail{animation:oxRailIn .8s var(--rail-ease) 1.2s both}
}
@keyframes oxRailIn{from{opacity:0;transform:translate(1.5rem,-50%)}to{opacity:1;transform:translateY(-50%)}}

@media (prefers-reduced-motion:reduce){
  .ox-rail,.ox-rail-label{transition:none}
}
@media print{.ox-rail{display:none}}