/*






*/
/*

*/
@property --cap-fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
@property --cap-gloss {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  --cap-accent: #38ff38;     /**/
  --cap-dark: #161616;       /**/
  --cap-rgb: 56,255,56;      /**/
  --cap-fill: .5;            /**/
  --cap-gloss: 1;            /**/
  --slot-stroke: .5;         /**/
}

/*

*/
.cap-bay {
  position: relative;
  min-height: 62px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transition: --cap-fill .22s ease, --cap-gloss .22s ease;
}
.key-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 62px;
  overflow: visible;
}
.k-slot {
  stroke: rgba(0,0,0,var(--slot-stroke));
  stroke-width: 1;
}
/*
*/
.k-cap-group {
  filter:
    drop-shadow(0 4px 9px rgba(0,0,0,.75))
    drop-shadow(0 10px 20px rgba(var(--cap-rgb),calc(.26 * var(--cap-fill) * 3)));
}
/*
*/
.k-cap-bevel {
  fill: none;
  stroke-width: 5;
}
.k-cap {
  fill: none;
  stroke: rgba(255,255,255,calc(.22 * var(--cap-gloss)));
  stroke-width: 1;
}
/**/
.key-t0 { stop-color: color-mix(in srgb, var(--cap-accent) calc(var(--cap-fill) * 100%), var(--cap-dark)); }
.key-t1 { stop-color: color-mix(in srgb, var(--cap-accent) calc(var(--cap-fill) * 32%), var(--cap-dark)); }
.key-t2 { stop-color: color-mix(in srgb, var(--cap-accent) calc(var(--cap-fill) * 74%), var(--cap-dark)); }
.key-w0 { stop-color: rgba(255,255,255,calc(.24 * var(--cap-gloss))); }
.key-w1 { stop-color: rgba(255,255,255,calc(.05 * var(--cap-gloss))); }
.key-s0 { stop-color: rgba(255,255,255,calc(.34 * var(--cap-gloss))); }
.key-s1 { stop-color: rgba(255,255,255,calc(.06 * var(--cap-gloss))); }
.key-b0 { stop-color: rgba(255,255,255,calc(.42 * var(--cap-gloss))); }
.key-b1 { stop-color: rgba(0,0,0,calc(.70 * var(--cap-gloss))); }
.cap-bay.is-vacant .k-cap-group,
.cap-bay.is-vacant .k-cap { display: none; }

/**/
.cap-bay.is-on .k-cap { stroke: rgba(var(--cap-rgb),.75); }
.cap-bay.is-on .k-cap-group {
  filter:
    drop-shadow(0 4px 9px rgba(0,0,0,.75))
    drop-shadow(0 10px 24px rgba(var(--cap-rgb),calc(.42 * var(--cap-fill) * 3)));
}

/**/
.id-capsule {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 24px 0 70px;      /**/
}
/*
*/
.cap-logo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 5px;
  display: grid;
  width: 52px;
  height: 52px;
  flex: none;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #06090a;
  transform: translateY(-50%);
  box-shadow: 0 0 18px -8px rgba(var(--cap-rgb),.55);
}
.cap-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.cap-logo-fallback { font-size: 24px; line-height: 1; }
.cap-logo-empty {
  cursor: default;
  box-shadow: none;
  color: rgba(255,255,255,.40);
}
.cap-name {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  color: #eaf3ea;
  font-family: var(--uc-fd, "Poppins", system-ui, sans-serif);
  font-size: 1.3rem;
  /*










*/
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}

/*





*/
.cap-scale {
  --cap-scale: 1;
  /*








*/
  --cap-w: 300px;
  display: block;
  width: calc(var(--cap-w) * var(--cap-scale));
  height: calc(62px * var(--cap-scale));
}
.cap-scale > .cap-bay {
  width: calc(100% / var(--cap-scale));
  transform: scale(var(--cap-scale));
  /*
*/
  transform-origin: top left;
}

/*


*/
.capsule-trigger {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease;
}
/*
*/
a.capsule-trigger { text-decoration: none; color: inherit; }
/*


*/
.capsule-trigger:hover .cap-bay,
.capsule-trigger:focus-visible .cap-bay { --cap-fill: .72; --cap-gloss: 1.12; }
.capsule-trigger:focus-visible { outline: 2px solid rgba(56,255,56,.70); outline-offset: 4px; }

/**/
.cap-bay.is-vacant::after {
  content: "No reality plugged";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 78px;
  color: rgba(255,255,255,.62);
  font-family: var(--uc-fd, "Poppins", system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%);
  text-shadow: 0 1px 2px rgba(0,0,0,1);
}