#relay.relay-orbit-section{
  --relay-bg:#111217;
  --relay-ink:#F2F0F7;
  --relay-muted:#B8BDD0;
  --relay-line:rgba(110,151,255,.28);
  --relay-accent:#2F6BFF;
  --relay-highlight:#6E97FF;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:0;
  background:var(--relay-bg);
  color:var(--relay-ink);
}

#relay .relay-orbit-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(520px,1.22fr);
  grid-template-rows:auto minmax(120px,1fr) auto;
  column-gap:clamp(40px,6vw,96px);
  min-height:clamp(680px,55vw,790px);
  padding-block:clamp(48px,5vw,72px);
}

#relay .relay-orbit__heading{position:relative;z-index:3;grid-column:1;grid-row:1}
#relay .relay-orbit__heading h2{
  margin:0;
  max-width:none;
  color:var(--relay-ink);
  font:500 clamp(3.25rem,5vw,4.5rem)/.95 var(--tl-font-display);
  letter-spacing:-.04em;
}

#relay .relay-orbit__art{
  position:relative;
  z-index:1;
  grid-column:2;
  grid-row:1/4;
  min-width:0;
  min-height:100%;
  scroll-margin-top:96px;
}

#relay .relay-orbit__drawing{
  position:absolute;
  left:50%;
  top:50%;
  width:min(72vw,900px);
  max-width:none;
  aspect-ratio:1;
  overflow:visible;
  transform:translate(-42%,-48%);
}

#relay .relay-orbit__ring,
#relay .relay-orbit__axis,
#relay .relay-orbit__core{
  vector-effect:non-scaling-stroke;
  fill:none;
  stroke:var(--relay-highlight);
}

#relay .relay-orbit__ring{transform-box:fill-box;transform-origin:center;animation-play-state:paused}
#relay .relay-orbit__ring ellipse:first-child{stroke-width:1.15;opacity:.62}
#relay .relay-orbit__ring ellipse:last-child{stroke-width:.7;opacity:.34}
#relay .relay-orbit__ring--outer{animation:relay-orbit-clockwise 42s linear infinite}
#relay .relay-orbit__ring--middle{animation:relay-orbit-counter 31s linear infinite}
#relay .relay-orbit__ring--inner{animation:relay-orbit-clockwise 24s linear infinite}
#relay .relay-orbit__ring{animation-play-state:paused}
#relay .relay-orbit__axis{stroke-width:.75;stroke-dasharray:4 11;opacity:.32}
#relay .relay-orbit__core{fill:var(--relay-bg);stroke:var(--relay-accent);stroke-width:1.5}
#relay .relay-orbit__core::selection{background:transparent}
#relay[data-orbit-active="true"] .relay-orbit__ring{animation-play-state:running}

@keyframes relay-orbit-clockwise{to{transform:rotate(360deg)}}
@keyframes relay-orbit-counter{to{transform:rotate(-360deg)}}

#relay .relay-orbit__statuses{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none}
#relay .relay-orbit__status{
  position:absolute;
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  gap:12px;
  width:min(276px,47%);
  padding:13px 15px;
  border:1px solid rgba(110,151,255,.32);
  border-radius:2px;
  background:rgba(17,18,23,.94);
  box-shadow:0 12px 30px rgba(0,0,0,.24);
  color:var(--relay-ink);
}
#relay .relay-orbit__status::before{
  content:"";
  width:10px;
  height:10px;
  margin-top:4px;
  border:1px solid var(--relay-highlight);
  border-radius:1px;
  background:transparent;
}
#relay .relay-orbit__status--checked{left:5%;top:18%}
#relay .relay-orbit__status--record{right:0;top:45%}
#relay .relay-orbit__status--approval{left:15%;bottom:14%}
#relay .relay-orbit__status--checked::before{background:var(--relay-highlight)}
#relay .relay-orbit__status--record::before{background:var(--relay-accent);border-color:var(--relay-accent)}
#relay .relay-orbit__status strong,#relay .relay-orbit__status small{display:block}
#relay .relay-orbit__status strong{font:500 14px/1.35 var(--tl-font-display);letter-spacing:-.01em}
#relay .relay-orbit__status small{margin-top:3px;color:var(--relay-muted);font:400 12px/1.4 var(--tl-font-body)}

#relay .relay-orbit__copy{position:relative;z-index:3;grid-column:1;grid-row:3;max-width:470px}
#relay .relay-orbit__copy h3{
  margin:0 0 12px;
  color:var(--relay-ink);
  font:500 clamp(1.65rem,2.3vw,2.2rem)/1.12 var(--tl-font-display);
  letter-spacing:-.025em;
}
#relay .relay-orbit__copy p{max-width:46ch;margin:0;color:var(--relay-muted);font:400 16px/1.65 var(--tl-font-body)}
#relay .relay-orbit__copy .relay-orbit__demo-note{margin:0 0 16px;color:#D3D7E5;font-size:13px;line-height:1.45}
#relay .relay-orbit__copy .relay-orbit__guardrail{margin-top:12px;color:#D3D7E5;font-size:14px;line-height:1.55}
#relay .relay-orbit__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  margin-top:18px;
  color:var(--relay-ink);
  font:500 15px/1.4 var(--tl-font-body);
  text-decoration-color:var(--relay-highlight);
  text-decoration-thickness:1px;
  text-underline-offset:6px;
}
#relay .relay-orbit__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
#relay .relay-orbit__cta:hover svg{transform:translateX(3px)}
#relay .relay-orbit__cta:focus-visible,#relay .relay-access summary:focus-visible{outline:2px solid var(--relay-highlight);outline-offset:4px}

#relay .relay-access{max-width:470px;margin:18px 0 0;border-top:1px solid var(--relay-line);border-bottom:1px solid var(--relay-line)}
#relay .relay-access summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;color:#D3D7E5;font-size:13px;list-style:none;cursor:pointer}
#relay .relay-access summary::-webkit-details-marker{display:none}
#relay .relay-access summary>span:last-child{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;line-height:1;margin-right:4px;color:var(--relay-highlight);font-size:0}
#relay .relay-access summary>span:last-child::after{content:"+";font-size:20px}
#relay .relay-access[open] summary>span:last-child{transform:none}
#relay .relay-access[open] summary>span:last-child::after{content:"−"}
#relay .relay-access p{max-width:58ch;margin:0;padding:0 0 18px;color:var(--relay-muted);font-size:14px;line-height:1.6}

#relay ::selection{background:var(--relay-accent);color:var(--relay-ink)}

@media(max-width:980px){
  #relay .relay-orbit-shell{grid-template-columns:minmax(260px,.75fr) minmax(430px,1.25fr);column-gap:28px}
  #relay .relay-orbit__drawing{width:760px;transform:translate(-43%,-48%)}
  #relay .relay-orbit__status{width:min(248px,52%)}
}

@media(max-width:850px){
  #relay .relay-orbit-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:0;min-height:0;padding-block:40px}
  #relay .relay-orbit__heading{grid-column:1;grid-row:1}
  #relay .relay-orbit__heading h2{font-size:clamp(3rem,15vw,4rem)}
  #relay .relay-orbit__art{grid-column:1;grid-row:2;min-height:460px;margin-top:16px}
  #relay .relay-orbit__drawing{left:50%;top:48%;width:660px;transform:translate(-50%,-50%)}
  #relay .relay-orbit__copy{grid-column:1;grid-row:3;max-width:560px;margin-top:14px}
  #relay .relay-orbit__status{width:min(260px,70%)}
  #relay .relay-orbit__status--checked{left:0;top:11%}
  #relay .relay-orbit__status--record{right:0;top:43%}
  #relay .relay-orbit__status--approval{left:8%;bottom:9%}
}

@media(max-width:420px){
  #relay .relay-orbit-shell{padding-block:32px}
  #relay .relay-orbit__art{min-height:420px;margin-inline:-6px}
  #relay .relay-orbit__drawing{width:590px}
  #relay .relay-orbit__status{width:min(228px,76%);padding:11px 12px;gap:10px}
  #relay .relay-orbit__status strong{font-size:13px}
  #relay .relay-orbit__status small{font-size:11px}
  #relay .relay-orbit__status--checked{top:10%}
  #relay .relay-orbit__status--record{top:43%}
  #relay .relay-orbit__status--approval{left:4%;bottom:8%}
  #relay .relay-orbit__copy h3{font-size:1.65rem}
  #relay .relay-orbit__copy p{font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  #relay .relay-orbit__ring{animation:none}
  #relay .relay-orbit__cta svg,#relay .relay-access summary>span:last-child{transition:none}
}