:root{

  --bg:#050506;
  --ink:#f3efeb;
  --muted:rgba(243,239,235,.42);

  --wine:#681426;
  --wine-hi:#a82d50;

  --green:#72ef9e;
  --blue:#63baf7;
  --gold:#f1b84b;

  --line:rgba(255,255,255,.08);

}


*{
  box-sizing:border-box;
}


html,
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}


body{
  overflow-x:hidden;
}


a{
  color:inherit;
  text-decoration:none;
}


button{
  font:inherit;
  -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   WORLD
========================================================= */

.circle-world{

  position:fixed;
  inset:0;
  z-index:0;

  overflow:hidden;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 24%,
      rgba(104,20,38,.20),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #090607 0%,
      #050506 45%,
      #040405 100%
    );

}


.world-grid{

  position:absolute;
  inset:0;

  opacity:.14;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    88px 88px;

  mask-image:
    linear-gradient(
      180deg,
      transparent 5%,
      #000 24%,
      #000 76%,
      transparent
    );

}


.world-grain{

  position:absolute;
  inset:0;

  opacity:.12;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255,255,255,.018) 3px 4px
    );

}


.world-glow{

  position:absolute;

  width:56vw;
  height:56vw;

  min-width:520px;
  min-height:520px;

  border-radius:50%;

  filter:blur(90px);

  opacity:.20;

}


.glow-left{

  left:-18%;
  top:12%;

  background:#5c1021;

  animation:
    driftLeft
    17s
    ease-in-out
    infinite alternate;

}


.glow-right{

  right:-22%;
  top:18%;

  background:#3e0d18;

  animation:
    driftRight
    21s
    ease-in-out
    infinite alternate;

}


@keyframes driftLeft{

  from{
    transform:translate3d(-4%,-2%,0);
  }

  to{
    transform:translate3d(9%,8%,0);
  }

}


@keyframes driftRight{

  from{
    transform:translate3d(4%,3%,0);
  }

  to{
    transform:translate3d(-9%,-6%,0);
  }

}


/* =========================================================
   COMMAND
========================================================= */

.circle-command{

  position:relative;
  z-index:20;

  min-height:70px;

  padding:
    0 clamp(14px,4vw,44px);

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  border-bottom:
    1px solid rgba(255,255,255,.07);

  background:
    rgba(5,5,6,.60);

  backdrop-filter:
    blur(18px);

}


.circle-brand small{

  display:block;

  color:var(--wine-hi);

  font-size:7px;
  font-weight:950;
  letter-spacing:.20em;

}


.circle-brand strong{

  display:block;

  margin-top:3px;

  font-family:Georgia,serif;

  font-size:20px;

}


.circle-command-state{

  display:flex;
  align-items:center;
  gap:8px;

  color:rgba(255,255,255,.42);

  font-size:7px;
  font-weight:900;

  letter-spacing:.18em;

}


.pulse-dot{

  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--wine-hi);

  box-shadow:
    0 0 14px
    rgba(168,45,80,.8);

  animation:
    pulseDot
    1.6s
    ease-in-out
    infinite;

}


@keyframes pulseDot{

  50%{
    opacity:.32;
  }

}


.circle-command nav{

  justify-self:end;

  display:flex;
  gap:18px;

}


.circle-command nav a{

  color:rgba(255,255,255,.52);

  font-size:8px;
  font-weight:900;

  letter-spacing:.12em;

}


/* =========================================================
   SHELL
========================================================= */

.circle-shell{

  position:relative;
  z-index:3;

  width:min(1180px,calc(100% - 22px));

  margin:0 auto;

  padding:
    clamp(34px,6vw,72px)
    0
    80px;

}


/* =========================================================
   TITLE
========================================================= */

.circle-title{

  text-align:center;

  margin-bottom:
    clamp(14px,3vw,30px);

}


.circle-title small{

  color:var(--wine-hi);

  font-size:7px;
  font-weight:950;
  letter-spacing:.23em;

}


.circle-title h1{

  margin:10px 0 0;

  font-family:Georgia,serif;

  font-size:
    clamp(
      50px,
      8vw,
      102px
    );

  font-weight:500;

  letter-spacing:.08em;

  line-height:.9;

}


/* =========================================================
   CHAMBER
========================================================= */

.circle-chamber{

  position:relative;

}


.circle-camera{

  position:relative;

  width:min(980px,100%);

  height:
    clamp(
      520px,
      69vw,
      740px
    );

  margin:0 auto;

  perspective:1500px;

  transform-style:preserve-3d;

  transition:
    transform .18s ease-out;

}


.circle-camera:before{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:78%;
  height:74%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(104,20,38,.10),
      rgba(5,5,6,0) 60%
    );

  filter:blur(18px);

}


.dome{

  position:absolute;

  left:50%;
  top:46%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  border:
    1px solid
    rgba(255,255,255,.07);

  pointer-events:none;

}


.dome-a{

  width:94%;
  height:72%;

  border-color:
    rgba(168,45,80,.16);

}


.dome-b{

  width:72%;
  height:56%;

}


.dome-c{

  width:46%;
  height:36%;

  border-color:
    rgba(243,239,235,.12);

}


/* =========================================================
   PLATFORM
========================================================= */

.platform{

  position:absolute;

  left:50%;
  bottom:2%;

  width:78%;
  height:29%;

  transform:
    translateX(-50%)
    rotateX(66deg);

  transform-style:preserve-3d;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(104,20,38,.18),
      rgba(104,20,38,.06) 45%,
      transparent 72%
    );

  border:
    1px solid
    rgba(168,45,80,.26);

  box-shadow:
    0 0 75px
    rgba(104,20,38,.15);

}


.platform:after{

  content:"";

  position:absolute;

  inset:18%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.03),
      transparent 65%
    );

}


.platform-ring{

  position:absolute;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.07);

}


.ring-a{

  width:72%;
  height:72%;

}


.ring-b{

  width:42%;
  height:42%;

  border-color:
    rgba(168,45,80,.30);

}


.platform-core{

  position:absolute;

  left:50%;
  top:50%;

  width:14%;
  height:14%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    rgba(168,45,80,.08);

  box-shadow:
    0 0 28px
    rgba(168,45,80,.30);

}


/* =========================================================
   PATHS
========================================================= */

.path-layer{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  z-index:3;

  overflow:visible;

  pointer-events:none;

}


.path-line{

  fill:none;

  stroke-width:1.5;

  stroke-linecap:round;

  opacity:.72;

}


.path-mutual{

  stroke:var(--green);

  filter:
    drop-shadow(
      0 0 8px
      rgba(114,239,158,.38)
    );

}


.path-following{

  stroke:var(--blue);

  filter:
    drop-shadow(
      0 0 7px
      rgba(99,186,247,.28)
    );

}


.path-waiting{

  stroke:var(--gold);

  stroke-dasharray:7 9;

  filter:
    drop-shadow(
      0 0 7px
      rgba(241,184,75,.28)
    );

}


.path-pulse{

  fill:none;

  stroke-width:3.5;

  stroke-linecap:round;

  stroke-dasharray:1 34;

  animation:
    pulseTravel
    3.4s
    linear
    infinite;

}


.path-pulse-mutual{
  stroke:var(--green);
}

.path-pulse-following{
  stroke:var(--blue);
}

.path-pulse-waiting{
  stroke:var(--gold);
}


@keyframes pulseTravel{

  to{
    stroke-dashoffset:-70;
  }

}


/* =========================================================
   CENTER
========================================================= */

.center-node{

  position:absolute;

  z-index:10;

  left:50%;
  top:48%;

  transform:
    translate(-50%,-50%);

  width:
    clamp(
      110px,
      15vw,
      156px
    );

  height:
    clamp(
      110px,
      15vw,
      156px
    );

  padding:0;

  border-radius:50%;

  border:
    1px solid
    rgba(243,239,235,.26);

  background:
    radial-gradient(
      circle,
      rgba(104,20,38,.46),
      rgba(9,7,8,.98) 63%
    );

  color:#fff;

  box-shadow:
    0 0 0 12px rgba(104,20,38,.045),
    0 0 0 28px rgba(104,20,38,.020),
    0 0 90px rgba(104,20,38,.32);

  display:grid;
  place-content:center;

  text-align:center;

  cursor:default;

}


.center-avatar{

  width:
    clamp(
      60px,
      8vw,
      86px
    );

  height:
    clamp(
      60px,
      8vw,
      86px
    );

  margin:
    0 auto
    8px;

  overflow:hidden;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:
    1px solid
    rgba(255,255,255,.20);

  background:#111114;

  font-family:Georgia,serif;
  font-size:18px;

}


.center-avatar img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.center-node small{

  color:rgba(255,255,255,.48);

  font-size:6px;
  font-weight:900;

  letter-spacing:.15em;

}


.center-node strong{

  margin-top:4px;

  color:#fff;

  font-family:Georgia,serif;

  font-size:
    clamp(
      16px,
      3vw,
      23px
    );

  font-weight:500;

}


/* =========================================================
   CREATOR NODES
========================================================= */

.creator-node{

  --scale:1;
  --z:0px;
  --float-x:0px;
  --float-y:0px;

  position:absolute;

  z-index:6;

  width:
    clamp(
      86px,
      12vw,
      128px
    );

  padding:0;

  border:0;

  background:transparent;

  color:#fff;

  transform:
    translate(-50%,-50%)
    translateZ(var(--z))
    scale(var(--scale));

  transform-origin:center;

  cursor:pointer;

  animation:
    creatorDrift
    var(--float-time,8s)
    ease-in-out
    infinite alternate;

  animation-delay:
    var(--float-delay,0s);

}


@keyframes creatorDrift{

  from{

    margin-left:
      calc(
        var(--float-x) * -.45
      );

    margin-top:
      calc(
        var(--float-y) * -.45
      );

  }

  to{

    margin-left:
      var(--float-x);

    margin-top:
      var(--float-y);

  }

}


.creator-avatar{

  position:relative;

  width:
    clamp(
      66px,
      9vw,
      94px
    );

  height:
    clamp(
      66px,
      9vw,
      94px
    );

  margin:
    0 auto
    9px;

  display:grid;
  place-items:center;

  overflow:hidden;

  border-radius:50%;

  background:#111114;

  font-family:Georgia,serif;
  font-size:20px;

  box-shadow:
    0 8px 30px
    rgba(0,0,0,.42);

}


.creator-avatar:before{

  content:"";

  position:absolute;

  inset:0;

  z-index:3;

  border-radius:50%;

  border:
    1px solid
    var(--node-color);

  box-shadow:
    inset 0 0 20px rgba(255,255,255,.04),
    0 0 20px var(--node-glow);

  pointer-events:none;

}


.creator-avatar img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.creator-handle{

  display:block;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:rgba(255,255,255,.94);

  font-size:
    clamp(
      8px,
      1vw,
      11px
    );

  font-weight:900;

  letter-spacing:.05em;

}


.creator-state{

  display:block;

  margin-top:4px;

  color:var(--node-color);

  font-size:6px;
  font-weight:950;

  letter-spacing:.12em;

  white-space:nowrap;

}


.creator-mutual{

  --node-color:var(--green);
  --node-glow:rgba(114,239,158,.34);

}


.creator-following{

  --node-color:var(--blue);
  --node-glow:rgba(99,186,247,.28);

}


.creator-waiting{

  --node-color:var(--gold);
  --node-glow:rgba(241,184,75,.30);

}


/* =========================================================
   FOCUS MODE
========================================================= */

.circle-camera.has-focus
.creator-node{

  opacity:.18;

  filter:blur(1px);

  transition:
    opacity .25s ease,
    filter .25s ease,
    transform .25s ease;

}


.circle-camera.has-focus
.creator-node.is-focus{

  opacity:1;

  filter:none;

  z-index:16;

  transform:
    translate(-50%,-50%)
    translateZ(90px)
    scale(1.34);

}


/* =========================================================
   METRICS
========================================================= */

.circle-metrics{

  width:min(980px,100%);

  margin:
    -6px auto 0;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  background:
    rgba(5,5,6,.40);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  backdrop-filter:blur(10px);

}


.circle-metrics > div{

  min-height:92px;

  display:grid;
  place-content:center;

  text-align:center;

  border-right:
    1px solid rgba(255,255,255,.06);

}


.circle-metrics > div:last-child{

  border-right:0;

}


.circle-metrics strong{

  font-family:Georgia,serif;

  font-size:
    clamp(
      26px,
      4vw,
      42px
    );

  font-weight:500;

}


.circle-metrics span{

  margin-top:7px;

  color:rgba(255,255,255,.42);

  font-size:6px;
  font-weight:950;

  letter-spacing:.14em;

}


.circle-metrics > div:nth-child(2) strong{
  color:var(--green);
}

.circle-metrics > div:nth-child(3) strong{
  color:var(--gold);
}

.circle-metrics > div:nth-child(4) strong{
  color:var(--blue);
}


.circle-hint{

  margin-top:26px;

  text-align:center;

  color:rgba(243,239,235,.60);

  font-size:7px;
  font-weight:950;

  letter-spacing:.24em;

}


.circle-status{

  margin-top:28px;

  min-height:18px;

  text-align:center;

  color:rgba(255,255,255,.28);

  font-size:7px;
  font-weight:850;

  letter-spacing:.12em;

}


.circle-footer{

  margin-top:56px;

  padding-top:17px;

  border-top:
    1px solid rgba(255,255,255,.07);

  display:flex;
  justify-content:space-between;

  gap:20px;

  color:rgba(255,255,255,.26);

  font-size:7px;
  font-weight:900;

  letter-spacing:.13em;

}


/* =========================================================
   HUD
========================================================= */

.hud-backdrop{

  position:fixed;

  inset:0;

  z-index:70;

  background:
    rgba(0,0,0,.58);

  backdrop-filter:
    blur(8px);

}


.relationship-hud{

  position:fixed;

  z-index:80;

  left:50%;
  top:50%;

  width:
    min(
      520px,
      calc(100% - 20px)
    );

  padding:
    28px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    linear-gradient(
      150deg,
      rgba(25,12,17,.98),
      rgba(7,7,9,.985)
    );

  box-shadow:
    0 28px 110px
    rgba(0,0,0,.68);

  backdrop-filter:
    blur(28px);

  transform:
    translate(-50%,-46%)
    scale(.94);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .24s ease,
    transform .24s ease;

}


.relationship-hud.is-open{

  opacity:1;

  pointer-events:auto;

  transform:
    translate(-50%,-50%)
    scale(1);

}


.hud-close{

  position:absolute;

  right:16px;
  top:14px;

  width:34px;
  height:34px;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.025);

  color:rgba(255,255,255,.58);

  font-size:20px;

  cursor:pointer;

}


.hud-avatar{

  width:88px;
  height:88px;

  overflow:hidden;

  border-radius:50%;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(255,255,255,.18);

  background:#111114;

  font-family:Georgia,serif;
  font-size:24px;

}


.hud-avatar img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.hud-copy{

  margin-top:18px;

}


.hud-copy small{

  color:var(--wine-hi);

  font-size:7px;
  font-weight:950;

  letter-spacing:.18em;

}


.hud-copy h2{

  margin:
    7px 0 0;

  font-family:Georgia,serif;

  font-size:
    clamp(
      38px,
      8vw,
      60px
    );

  font-weight:500;

}


.hud-copy p{

  margin:
    5px 0 0;

  color:rgba(255,255,255,.44);

  font-size:10px;
  letter-spacing:.08em;

}


.hud-facts{

  margin-top:24px;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:1px;

  background:
    rgba(255,255,255,.07);

}


.hud-facts > div{

  padding:16px;

  background:
    rgba(5,5,6,.84);

}


.hud-facts small{

  display:block;

  color:rgba(255,255,255,.29);

  font-size:6px;
  font-weight:900;

  letter-spacing:.14em;

}


.hud-facts strong{

  display:block;

  margin-top:8px;

  color:rgba(255,255,255,.84);

  font-size:11px;

}


.hud-connect{

  width:100%;

  min-height:48px;

  margin-top:18px;

  border:
    1px solid
    rgba(241,184,75,.48);

  background:
    rgba(241,184,75,.10);

  color:var(--gold);

  font-size:8px;
  font-weight:950;

  letter-spacing:.15em;

  cursor:pointer;

}


.hud-connect:disabled{
  opacity:.5;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .circle-command{

    min-height:62px;

    grid-template-columns:
      1fr auto;

    padding:
      0 12px;

  }


  .circle-command-state{
    display:none;
  }


  .circle-command nav{
    gap:11px;
  }


  .circle-command nav a{
    font-size:6px;
  }


  .circle-brand strong{
    font-size:17px;
  }


  .circle-shell{

    width:
      calc(100% - 14px);

    padding-top:28px;

  }


  .circle-title h1{

    font-size:
      clamp(
        44px,
        14vw,
        66px
      );

    letter-spacing:.04em;

  }


  .circle-camera{

    height:
      min(
        132vw,
        600px
      );

    min-height:450px;

  }


  .dome-a{
    width:108%;
  }


  .dome-b{
    width:82%;
  }


  .dome-c{
    width:52%;
  }


  .center-node{

    top:50%;

    width:100px;
    height:100px;

  }


  .center-avatar{

    width:56px;
    height:56px;

  }


  .creator-node{

    width:74px;

  }


  .creator-avatar{

    width:56px;
    height:56px;

  }


  .creator-handle{
    font-size:8px;
  }


  .creator-state{
    font-size:5px;
  }


  .circle-metrics{

    grid-template-columns:
      repeat(2,1fr);

  }


  .circle-metrics > div{

    min-height:78px;

  }


  .circle-metrics > div:nth-child(2){

    border-right:0;

  }


  .circle-metrics > div:nth-child(-n+2){

    border-bottom:
      1px solid rgba(255,255,255,.06);

  }


  .relationship-hud{

    top:auto;

    bottom:0;

    transform:
      translate(-50%,100%);

    width:
      calc(100% - 10px);

    border-bottom:0;

  }


  .relationship-hud.is-open{

    transform:
      translate(-50%,0);

  }


  .circle-footer{

    flex-direction:column;

  }

}


@media(prefers-reduced-motion:reduce){

  .creator-node,
  .world-glow,
  .pulse-dot,
  .path-pulse{

    animation:none !important;

  }

}

/* ==========================================================
   N.P.P. CIRCLE V3.1 — VISUAL DEPTH SURGERY
========================================================== */


/* ----------------------------------------------------------
   TITLE — LET THE NETWORK DOMINATE
---------------------------------------------------------- */

.circle-title{
  margin-bottom:
    clamp(
      6px,
      1.5vw,
      14px
    );
}

.circle-title h1{
  font-size:
    clamp(
      44px,
      6.8vw,
      84px
    );

  letter-spacing:.055em;
}


/* ----------------------------------------------------------
   STAGE — DENSER / LESS DEAD SPACE
---------------------------------------------------------- */

.circle-camera{
  height:
    clamp(
      430px,
      58vw,
      620px
    );
}


/* ----------------------------------------------------------
   CHAMBER HALO
---------------------------------------------------------- */

.circle-camera:after{

  content:"";

  position:absolute;

  left:50%;
  top:48%;

  width:72%;
  height:62%;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(104,20,38,.26) 0%,
      rgba(104,20,38,.11) 32%,
      rgba(104,20,38,.035) 56%,
      transparent 72%
    );

  filter:
    blur(22px);

  pointer-events:none;

}


/* ----------------------------------------------------------
   DOME RINGS — MAKE THE ROOM READ
---------------------------------------------------------- */

.dome{
  border-width:1px;
}

.dome-a{
  border-color:
    rgba(168,45,80,.38);

  box-shadow:
    0 0 38px
    rgba(104,20,38,.12);
}

.dome-b{
  border-color:
    rgba(255,255,255,.13);
}

.dome-c{
  border-color:
    rgba(243,239,235,.20);
}


/* ----------------------------------------------------------
   PLATFORM — MAKE IT PHYSICAL
---------------------------------------------------------- */

.platform{

  bottom:-1%;

  width:84%;
  height:34%;

  border:
    1px solid
    rgba(168,45,80,.48);

  background:

    radial-gradient(
      ellipse,
      rgba(168,45,80,.20) 0%,
      rgba(104,20,38,.10) 34%,
      rgba(5,5,6,.15) 56%,
      transparent 73%
    );

  box-shadow:

    0 0 34px
    rgba(168,45,80,.20),

    0 0 95px
    rgba(104,20,38,.24);

}


.platform:before{

  content:"";

  position:absolute;

  inset:7%;

  border-radius:50%;

  border:
    1px solid
    rgba(168,45,80,.30);

  box-shadow:

    inset 0 0 28px
    rgba(168,45,80,.08),

    0 0 20px
    rgba(168,45,80,.08);

}


.platform:after{

  inset:20%;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.045),
      transparent 65%
    );

}


.ring-a{

  width:78%;
  height:78%;

  border-color:
    rgba(168,45,80,.34);

}


.ring-b{

  width:47%;
  height:47%;

  border-color:
    rgba(243,239,235,.16);

}


.platform-core{

  width:18%;
  height:18%;

  background:
    rgba(168,45,80,.14);

  box-shadow:
    0 0 38px
    rgba(168,45,80,.42);

}


/* ----------------------------------------------------------
   CENTER — MORE PRESENCE
---------------------------------------------------------- */

.center-node{

  width:
    clamp(
      128px,
      17vw,
      178px
    );

  height:
    clamp(
      128px,
      17vw,
      178px
    );

  box-shadow:

    0 0 0 13px
    rgba(104,20,38,.07),

    0 0 0 30px
    rgba(104,20,38,.03),

    0 0 110px
    rgba(168,45,80,.38);

}


.center-avatar{

  width:
    clamp(
      72px,
      9vw,
      96px
    );

  height:
    clamp(
      72px,
      9vw,
      96px
    );

}


/* ----------------------------------------------------------
   CREATOR NODES — BIGGER
---------------------------------------------------------- */

.creator-node{

  width:
    clamp(
      104px,
      14vw,
      148px
    );

}


.creator-avatar{

  width:
    clamp(
      82px,
      10.5vw,
      110px
    );

  height:
    clamp(
      82px,
      10.5vw,
      110px
    );

  box-shadow:
    0 12px 38px
    rgba(0,0,0,.48);

}


.creator-avatar:before{

  border-width:2px;

  box-shadow:

    inset
    0 0 28px
    rgba(255,255,255,.05),

    0 0 26px
    var(--node-glow),

    0 0 48px
    var(--node-glow);

}


.creator-handle{

  font-size:
    clamp(
      9px,
      1.2vw,
      12px
    );

}


.creator-state{

  margin-top:5px;

  font-size:6px;

}


/* ----------------------------------------------------------
   PATHS — MORE ELECTRIC
---------------------------------------------------------- */

.path-line{

  stroke-width:2.1;

  opacity:.82;

}


.path-pulse{

  stroke-width:4.5;

  stroke-dasharray:
    2 29;

  filter:
    drop-shadow(
      0 0 8px
      currentColor
    );

}


/* ----------------------------------------------------------
   METRICS — CLOSER TO STAGE
---------------------------------------------------------- */

.circle-metrics{

  margin-top:-20px;

}


.circle-hint{

  margin-top:18px;

}


/* ----------------------------------------------------------
   MOBILE — SAME CINEMATIC FEEL
---------------------------------------------------------- */

@media(max-width:700px){

  .circle-camera{

    height:
      min(
        112vw,
        520px
      );

    min-height:390px;

  }


  .circle-title h1{

    font-size:
      clamp(
        40px,
        12vw,
        58px
      );

  }


  .center-node{

    width:112px;
    height:112px;

  }


  .center-avatar{

    width:62px;
    height:62px;

  }


  .creator-node{

    width:88px;

  }


  .creator-avatar{

    width:68px;
    height:68px;

  }


  .platform{

    width:94%;
    height:30%;

  }

}


/* ==========================================================
   N.P.P. CIRCLE V3.2 — SCALE WEB ENGINE
   NO ORBITS. NO RADAR.
========================================================== */


/* ----------------------------------------------------------
   REMOVE ALL LEGACY ORBIT LANGUAGE
---------------------------------------------------------- */

.dome,
.platform-ring,
.ring-a,
.ring-b,
.platform-core{
  display:none !important;
}


/* ----------------------------------------------------------
   NETWORK STAGE
---------------------------------------------------------- */

.circle-camera{

  height:
    clamp(
      460px,
      60vw,
      650px
    );

  perspective:
    1450px;

}


/* no giant circular halo */

.circle-camera:after{

  width:78%;
  height:68%;

  border-radius:44%;

  background:

    radial-gradient(
      ellipse at center,
      rgba(104,20,38,.25) 0%,
      rgba(104,20,38,.10) 34%,
      rgba(104,20,38,.025) 56%,
      transparent 73%
    );

  filter:blur(34px);

}


/* ----------------------------------------------------------
   PLATFORM BECOMES LIGHT FIELD, NOT A RING
---------------------------------------------------------- */

.platform{

  left:50%;
  bottom:4%;

  width:72%;
  height:16%;

  transform:
    translateX(-50%)
    rotateX(67deg);

  border:0 !important;

  border-radius:44%;

  background:

    radial-gradient(
      ellipse at center,
      rgba(168,45,80,.22),
      rgba(104,20,38,.07) 45%,
      transparent 73%
    );

  box-shadow:

    0 18px 60px
    rgba(104,20,38,.13),

    0 0 80px
    rgba(168,45,80,.08);

}


.platform:before{

  inset:auto;

  left:50%;
  top:50%;

  width:48%;
  height:22%;

  transform:
    translate(-50%,-50%);

  border:0;

  border-radius:50%;

  background:
    rgba(168,45,80,.16);

  filter:blur(20px);

  box-shadow:none;

}


.platform:after{

  display:none;

}


/* ----------------------------------------------------------
   CENTER PATH
---------------------------------------------------------- */

.center-node{

  width:
    clamp(
      118px,
      15vw,
      160px
    );

  height:
    clamp(
      118px,
      15vw,
      160px
    );

  border:
    1px solid
    rgba(255,255,255,.14);

  box-shadow:

    0 0 30px
    rgba(104,20,38,.22),

    0 0 90px
    rgba(104,20,38,.24);

}


/* ----------------------------------------------------------
   FREE FLOATING PEOPLE
---------------------------------------------------------- */

.creator-node{

  width:
    clamp(
      100px,
      13vw,
      142px
    );

}


.creator-avatar{

  width:
    clamp(
      78px,
      10vw,
      106px
    );

  height:
    clamp(
      78px,
      10vw,
      106px
    );

}


/* ----------------------------------------------------------
   DIRECT WEB PATHS
---------------------------------------------------------- */

.path-line{

  stroke-width:1.8;

  opacity:.76;

}


.path-pulse{

  stroke-width:4;

  stroke-dasharray:
    2 31;

  opacity:.92;

}


/* ----------------------------------------------------------
   MORE PATHS
---------------------------------------------------------- */

.circle-explore-more{

  display:block;

  min-width:210px;

  min-height:44px;

  margin:
    22px auto
    0;

  padding:
    0 18px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.64);

  font-size:7px;

  font-weight:950;

  letter-spacing:.16em;

  cursor:pointer;

}


.circle-explore-more[hidden]{
  display:none !important;
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:700px){

  .circle-camera{

    height:
      min(
        116vw,
        530px
      );

    min-height:410px;

  }


  .platform{

    width:86%;
    height:14%;

  }


  .center-node{

    width:108px;
    height:108px;

  }


  .creator-node{
    width:88px;
  }


  .creator-avatar{

    width:68px;
    height:68px;

  }

}


/* ==========================================================
   N.P.P. CIRCLE V3.3 — COMPOSITION SURGERY
========================================================== */


/* ----------------------------------------------------------
   TITLE — LESS DOMINANT
---------------------------------------------------------- */

.circle-title{
  margin-bottom:4px;
}

.circle-title h1{
  font-size:
    clamp(
      38px,
      6vw,
      74px
    );

  letter-spacing:.045em;
}


/* ----------------------------------------------------------
   CAMERA — TIGHTER + HIGHER
---------------------------------------------------------- */

.circle-camera{
  height:
    clamp(
      420px,
      54vw,
      590px
    );

  margin-top:-6px;
}


/* ----------------------------------------------------------
   CENTER — PATH MARKER, NOT "YOU"
---------------------------------------------------------- */

.center-node{

  top:53%;

  width:
    clamp(
      96px,
      12vw,
      132px
    );

  height:
    clamp(
      96px,
      12vw,
      132px
    );

  background:
    radial-gradient(
      circle,
      rgba(104,20,38,.34),
      rgba(8,7,8,.98) 67%
    );

  box-shadow:

    0 0 24px
    rgba(104,20,38,.18),

    0 0 70px
    rgba(104,20,38,.22);

}


.center-avatar{

  width:
    clamp(
      56px,
      7vw,
      72px
    );

  height:
    clamp(
      56px,
      7vw,
      72px
    );

  margin-bottom:7px;

}


.center-node strong{

  margin-top:0;

  font-size:
    clamp(
      13px,
      2.2vw,
      18px
    );

  letter-spacing:.02em;

}


/* ----------------------------------------------------------
   CREATOR NODES — MORE PRESENCE
---------------------------------------------------------- */

.creator-node{

  width:
    clamp(
      112px,
      15vw,
      154px
    );

}


.creator-avatar{

  width:
    clamp(
      88px,
      11vw,
      114px
    );

  height:
    clamp(
      88px,
      11vw,
      114px
    );

}


.creator-handle{

  font-size:
    clamp(
      10px,
      1.3vw,
      13px
    );

}


.creator-state{

  font-size:6px;
  letter-spacing:.10em;

}


/* ----------------------------------------------------------
   PATH — STRONGER
---------------------------------------------------------- */

.path-line{

  stroke-width:2.4;

  opacity:.86;

}


.path-pulse{

  stroke-width:5;

  stroke-dasharray:2 27;

  opacity:1;

}


/* ----------------------------------------------------------
   FLOOR — STRONGER ANCHOR
---------------------------------------------------------- */

.platform{

  bottom:2%;

  width:78%;
  height:15%;

  background:

    radial-gradient(
      ellipse at center,
      rgba(168,45,80,.29),
      rgba(104,20,38,.10) 43%,
      transparent 72%
    );

  box-shadow:

    0 20px 60px
    rgba(104,20,38,.16),

    0 0 90px
    rgba(168,45,80,.12);

}


/* ----------------------------------------------------------
   METRICS — LESS DOMINANT
---------------------------------------------------------- */

.circle-metrics{

  margin-top:-10px;

}


.circle-metrics > div{

  min-height:78px;

}


.circle-metrics strong{

  font-size:
    clamp(
      24px,
      3.5vw,
      36px
    );

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:700px){

  .circle-shell{

    padding-top:22px;

  }


  .circle-title{

    margin-bottom:0;

  }


  .circle-title h1{

    font-size:
      clamp(
        34px,
        10.5vw,
        50px
      );

  }


  .circle-camera{

    height:
      min(
        102vw,
        470px
      );

    min-height:360px;

  }


  .center-node{

    top:55%;

    width:90px;
    height:90px;

  }


  .center-avatar{

    width:50px;
    height:50px;

  }


  .creator-node{

    width:94px;

  }


  .creator-avatar{

    width:74px;
    height:74px;

  }


  .platform{

    width:90%;
    height:13%;

  }


  .circle-metrics{

    margin-top:-4px;

  }


  .circle-metrics > div{

    min-height:70px;

  }

}


/* ==========================================================
   N.P.P. CIRCLE V3.4 — CENTER IDENTITY CLEANUP
========================================================== */


/* ----------------------------------------------------------
   CENTER = PROFILE NODE
---------------------------------------------------------- */

.center-node{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  width:
    clamp(
      92px,
      11vw,
      124px
    );

  height:
    clamp(
      92px,
      11vw,
      124px
    );

  padding:0;

  overflow:visible;

  border:
    1px solid
    rgba(168,45,80,.42);

  background:
    rgba(6,6,7,.96);

  box-shadow:

    0 0 24px
    rgba(104,20,38,.18),

    0 0 66px
    rgba(104,20,38,.20);

}


/* avatar fills the circle */

.center-avatar{

  width:100%;

  height:100%;

  margin:0;

  border-radius:50%;

  overflow:hidden;

  display:grid;

  place-items:center;

  border:0;

  background:#111114;

  font-family:
    Georgia,
    serif;

  font-size:18px;

}


.center-avatar img{

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

  border-radius:50%;

}


/* real handle sits below like every other creator */

.center-handle{

  position:absolute;

  top:
    calc(
      100% +
      10px
    );

  left:50%;

  transform:
    translateX(-50%);

  width:max-content;

  max-width:140px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:
    rgba(255,255,255,.92);

  font-size:
    clamp(
      10px,
      1.2vw,
      13px
    );

  font-weight:900;

  letter-spacing:.04em;

}


/* remove old center text styling from influence */

.center-node small,
.center-node strong{

  display:none !important;

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:700px){

  .center-node{

    width:84px;

    height:84px;

  }


  .center-handle{

    top:
      calc(
        100% +
        8px
      );

    font-size:10px;

  }

}