body.aeq-v3-ready{
  background:#020304 !important;
}

.aequilibrium-v3{
  min-height:100vh;
  padding:0 0 120px !important;
  background:
    radial-gradient(circle at 50% 210px,
      rgba(83,220,205,.07),
      transparent 320px),
    linear-gradient(180deg,#07100f 0,#020505 620px,#000 100%) !important;
}

body.mode-venere .aequilibrium-v3{
  background:
    radial-gradient(circle at 50% 210px,
      rgba(202,127,190,.09),
      transparent 330px),
    linear-gradient(180deg,#100a12 0,#040405 620px,#000 100%) !important;
}

.a4-hero{
  position:relative;
  min-height:610px;
  box-sizing:border-box;
  padding:
    calc(env(safe-area-inset-top) + 62px)
    28px 54px;
  overflow:hidden;
}

.a4-k{
  position:relative;
  z-index:3;
  color:#77d9ce;
  font-size:9px;
  font-weight:700;
  letter-spacing:.24em;
}

.a4-orbit{
  position:relative;
  width:330px;
  height:330px;
  margin:42px auto 24px;
}

.a4-ring{
  position:absolute;
  border:1px solid rgba(119,217,206,.14);
  border-radius:50%;
}

.a4-ring-one{
  inset:0;
}

.a4-ring-two{
  inset:42px;
  border-color:rgba(151,162,255,.12);
}

.a4-orb{
  position:absolute;
  width:156px;
  height:156px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  border:1px solid rgba(119,217,206,.30);
  background:
    radial-gradient(circle at 38% 28%,
      rgba(255,255,255,.10),
      rgba(91,196,190,.12) 28%,
      rgba(10,24,25,.88) 67%,
      #030707 100%);
  box-shadow:
    0 0 70px rgba(87,218,204,.12),
    inset 0 0 34px rgba(255,255,255,.025);
}

.a4-orb small,
.a4-float small{
  color:rgba(119,217,206,.64);
  font-size:8px;
  letter-spacing:.17em;
}

.a4-orb strong{
  margin:7px 0 4px;
  font-family:Georgia,serif;
  font-size:47px;
  font-weight:400;
}

.a4-orb span{
  color:rgba(255,255,255,.34);
  font-size:7px;
  letter-spacing:.15em;
}

.a4-float{
  position:absolute;
  min-width:92px;
  padding:12px 14px;
  border-bottom:1px solid rgba(119,217,206,.20);
}

.a4-float strong{
  display:block;
  margin-top:5px;
  color:#f4f4f2;
  font-family:Georgia,serif;
  font-size:19px;
  font-weight:400;
}

.a4-float-left{
  left:0;
  top:74px;
}

.a4-float-right{
  right:0;
  bottom:64px;
  text-align:right;
}

.a4-hero-copy{
  max-width:560px;
  margin:0 auto;
}

.a4-hero-copy h1{
  margin:0 0 12px;
  font-family:Georgia,serif;
  font-size:44px;
  line-height:1;
  font-weight:400;
}

.a4-hero-copy p{
  margin:0;
  color:rgba(244,244,242,.50);
  font-size:13px;
  line-height:1.65;
}

.a4-context{
  margin:0 28px 46px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.a4-context small,
.a4-context strong,
.a4-context span{
  display:block;
}

.a4-context small{
  margin-bottom:7px;
  color:#77d9ce;
  font-size:8px;
  letter-spacing:.18em;
}

.a4-context strong{
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
}

.a4-context span{
  margin-top:5px;
  color:rgba(255,255,255,.40);
  font-size:11px;
}

.a4-modes{
  margin-bottom:52px;
}

.a4-section-title{
  padding:0 28px 16px;
}

.a4-section-title span{
  display:block;
  color:#77d9ce;
  font-size:9px;
  letter-spacing:.20em;
}

.a4-section-title small{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.42);
}

.a4-mode-rail{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:0 28px 8px;
  scrollbar-width:none;
}

.a4-mode-rail::-webkit-scrollbar{
  display:none;
}

.a4-mode{
  flex:0 0 auto;
  min-width:118px;
  min-height:52px;
  padding:0 20px;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.38) !important;
  font-size:10px;
  letter-spacing:.16em;
}

.a4-mode.active{
  border-bottom-color:#77d9ce !important;
  color:#f4f4f2 !important;
}

.a4-path{
  margin:0 28px;
}

.a4-path-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:28px;
}

.a4-path-head span{
  color:#77d9ce;
  font-size:9px;
  letter-spacing:.20em;
}

.a4-path-head strong{
  font-family:Georgia,serif;
  font-size:21px;
  font-weight:400;
}

.a4-path-line{
  position:relative;
}

.a4-path-line:before{
  content:"";
  position:absolute;
  left:18px;
  top:14px;
  bottom:18px;
  width:1px;
  background:
    linear-gradient(
      #77d9ce,
      rgba(119,217,206,.06)
    );
}

.a4-node{
  position:relative;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:22px;
  padding:0 0 42px;
}

.a4-node-mark{
  position:relative;
  z-index:1;
  width:37px;
  height:37px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(119,217,206,.28);
  border-radius:50%;
  background:#030706;
}

.a4-node-mark span{
  color:#77d9ce;
  font-family:Georgia,serif;
  font-size:13px;
}

.a4-node-copy small{
  color:#93a4ff;
  font-size:8px;
  letter-spacing:.17em;
}

.a4-node-copy h3{
  margin:7px 0 8px;
  font-family:Georgia,serif;
  font-size:30px;
  line-height:1.05;
  font-weight:400;
}

.a4-node-copy p{
  max-width:420px;
  margin:0;
  color:rgba(255,255,255,.43);
  font-size:12px;
  line-height:1.55;
}

.a4-start{
  width:calc(100% - 56px);
  min-height:64px;
  margin:6px 28px 0;
  padding:0 20px !important;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid rgba(119,217,206,.34) !important;
  border-radius:999px;
  background:rgba(119,217,206,.06) !important;
  color:#f5f5f2 !important;
  font-size:9px;
  letter-spacing:.18em;
}

.a4-start b{
  color:#77d9ce;
  font-size:18px;
  font-weight:400;
}

.a4-live{
  margin:18px 28px 0;
  padding:28px;
  border-radius:28px;
  background:
    radial-gradient(circle at 80% 0,
      rgba(119,217,206,.09),
      transparent 180px),
    #06100e;
}

.a4-live small,
.a4-live strong,
.a4-live span{
  display:block;
}

.a4-live strong{
  margin:14px 0;
  font-family:Georgia,serif;
  font-size:44px;
  font-weight:400;
}

.aeq-v3-ready .a3-bridge{
  width:calc(100% - 56px);
  margin:18px 28px 0;
  padding:18px 2px !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.38) !important;
}

.aeq-v3-ready .a3-bridge b{
  color:#77d9ce !important;
}

@media(max-width:520px){
  .a4-orbit{
    width:300px;
    height:300px;
  }

  .a4-hero-copy h1{
    font-size:40px;
  }
}
