/* OmniCore Lab reference-lock v4
   Binding targets: authorization field + architecture scale field only. */

:root {
  --lock-serif: "Bodoni MT", Didot, "Iowan Old Style", "Times New Roman", Georgia, serif;
}

.auth-render-v3,
.scale-render-v3 {
  display: none !important;
}

.auth-render-v4,
.scale-render-v4 {
  margin-top: clamp(42px, 5vw, 76px);
  scroll-margin-top: calc(var(--header, 76px) + 18px);
}

.auth-reference-field,
.scale-reference-field {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.auth-reference-desktop {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 51% 43%, rgba(215, 255, 22, 0.045), transparent 17%),
    radial-gradient(circle at 45% 42%, rgba(233, 236, 222, 0.028), transparent 30%),
    #030504;
}

.auth-reference-desktop::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(3, 5, 4, 0.3), transparent 28%, transparent 78%, rgba(3, 5, 4, 0.46)),
    linear-gradient(180deg, rgba(3, 5, 4, 0.14), transparent 16%, transparent 82%, rgba(3, 5, 4, 0.48));
  content: "";
  pointer-events: none;
}

.auth-reference-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.auth-reference-svg path,
.auth-reference-svg circle,
.auth-reference-svg use {
  vector-effect: non-scaling-stroke;
}

.auth-reference-copy {
  position: absolute;
  z-index: 5;
  left: 4.4%;
  width: 27%;
  color: #ecece6;
  pointer-events: none;
}

.auth-reference-copy--before {
  top: 9.5%;
}

.auth-reference-copy--after {
  bottom: 9.2%;
}

.auth-reference-copy p {
  margin: 0;
  color: var(--lock-signal);
  font: 600 10px/1.2 var(--lock-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.auth-reference-copy i {
  display: block;
  width: 15px;
  height: 1px;
  margin: 13px 0 18px;
  background: var(--lock-signal);
}

.auth-reference-copy h3 {
  margin: 0;
  color: #f0efea;
  font-family: var(--lock-serif);
  font-size: clamp(3rem, 4.45vw, 4.75rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.auth-reference-copy span {
  display: block;
  margin-top: 22px;
  color: #93978f;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.55;
}

.auth-v4-field-haze {
  fill: none;
  stroke: var(--lock-signal);
  stroke-width: 70;
  opacity: 0.055;
  filter: url(#auth-v4-soft-d);
}

.auth-v4-streams use {
  fill: none;
  stroke: rgba(225, 229, 216, 0.18);
  stroke-width: 0.7;
}

.auth-v4-streams use:nth-child(3n + 1) {
  stroke: rgba(215, 255, 22, 0.2);
}

.auth-v4-streams use:nth-child(4n) {
  stroke-dasharray: 1 5;
}

.auth-v4-streams--output use {
  stroke: rgba(215, 255, 22, 0.28);
}

.auth-v4-dust circle {
  fill: #eef0e4;
  opacity: 0.46;
  animation: auth-v4-dust 4.6s ease-in-out infinite alternate;
}

.auth-v4-dust circle:nth-child(3n) {
  fill: var(--lock-signal);
  opacity: 0.62;
  animation-delay: -1.7s;
}

.auth-v4-boundary-glow,
.auth-v4-boundary,
.auth-v4-boundary-core {
  fill: none;
}

.auth-reference-svg--desktop .auth-v4-boundary-glow {
  stroke: var(--lock-signal);
  stroke-width: 23;
  opacity: 0.27;
  filter: url(#auth-v4-glow-d);
}

.auth-reference-svg--desktop .auth-v4-boundary {
  stroke: url(#auth-v4-boundary-d);
  stroke-width: 3.2;
}

.auth-reference-svg--desktop .auth-v4-boundary-core {
  stroke: rgba(245, 247, 219, 0.84);
  stroke-width: 0.9;
}

.auth-v4-threshold-halo {
  fill: url(#auth-v4-node-d);
  opacity: 0.42;
  filter: url(#auth-v4-glow-d);
}

.auth-v4-threshold-node {
  fill: #f2f5d7;
  stroke: var(--lock-signal);
  stroke-width: 1.4;
}

.auth-v4-index,
.auth-v4-binding,
.auth-v4-callout text {
  font-family: var(--lock-mono);
  font-weight: 600;
  letter-spacing: 0.15em;
}

.auth-v4-index {
  fill: var(--lock-signal);
  font-size: 12.5px;
}

.auth-v4-threshold-title {
  fill: #efeee9;
  font-family: var(--lock-serif);
  font-size: 49px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.auth-v4-binding {
  fill: #a5a99f;
  font-size: 12.5px;
}

.auth-v4-threshold-line,
.auth-v4-qualified-line {
  fill: none;
  stroke: rgba(215, 255, 22, 0.78);
  stroke-width: 1;
}

.auth-v4-qualified-line {
  stroke-dasharray: 2 7;
}

.auth-v4-callout path {
  fill: none;
  stroke: rgba(208, 212, 202, 0.36);
  stroke-width: 0.8;
}

.auth-v4-callout circle {
  fill: #030504;
  stroke: rgba(224, 227, 216, 0.65);
  stroke-width: 0.8;
}

.auth-v4-callout text {
  fill: #aeb2a9;
  font-size: 13px;
}

.auth-v4-callout .auth-v4-callout-active {
  fill: #cfd3c8;
}

.auth-v4-label-node--active {
  fill: var(--lock-signal) !important;
  stroke: rgba(215, 255, 22, 0.85) !important;
}

.auth-v4-output-arrows path,
.auth-v4-mobile-out {
  fill: none;
  stroke: rgba(215, 255, 22, 0.6);
  stroke-width: 0.85;
  stroke-dasharray: 3 7;
  animation: auth-v4-flow 9s linear infinite;
}

.auth-reference-mobile {
  display: none;
}

@keyframes auth-v4-flow {
  to { stroke-dashoffset: -80; }
}

@keyframes auth-v4-dust {
  from { opacity: 0.22; }
  to { opacity: 0.72; }
}

@media (min-width: 1440px) {
  .auth-reference-field,
  .scale-reference-field {
    margin-right: -1.5vw;
    margin-left: -1.5vw;
  }
}

@media (max-width: 1100px) {
  .auth-render-v4,
  .scale-render-v4 {
    margin-top: 34px;
  }

  .auth-reference-desktop {
    display: none;
  }

  .auth-reference-mobile {
    display: block;
    width: min(100%, 620px);
    margin: 0 auto;
  }

  .auth-reference-copy {
    position: static;
    width: auto;
    padding: 12px 4px 0;
  }

  .auth-reference-copy h3 {
    font-size: clamp(3.1rem, 13vw, 5rem);
    line-height: 0.9;
  }

  .auth-reference-copy span {
    margin-top: 18px;
    font-size: 15px;
  }

  .auth-reference-copy--mobile-after {
    padding-top: 36px;
  }

  .auth-reference-svg--mobile {
    margin-top: 18px;
    background:
      radial-gradient(circle at 46% 51%, rgba(215, 255, 22, 0.05), transparent 22%),
      #030504;
  }

  .auth-reference-svg--mobile .auth-v4-streams use {
    stroke-width: 0.75;
  }

  .auth-reference-svg--mobile .auth-v4-boundary-glow {
    stroke: var(--lock-signal);
    stroke-width: 19;
    opacity: 0.25;
    filter: url(#auth-v4-glow-m);
  }

  .auth-reference-svg--mobile .auth-v4-boundary {
    stroke: url(#auth-v4-boundary-m);
    stroke-width: 2.7;
  }

  .auth-reference-svg--mobile .auth-v4-threshold-halo {
    fill: var(--lock-signal);
    opacity: 0.2;
    filter: url(#auth-v4-glow-m);
  }

  .auth-v4-threshold-copy--mobile .auth-v4-index {
    font-size: 10.5px;
  }

  .auth-v4-threshold-copy--mobile .auth-v4-threshold-title {
    font-size: 31px;
  }

  .auth-v4-threshold-copy--mobile .auth-v4-binding {
    font-size: 10.5px;
    letter-spacing: 0.095em;
  }

  .auth-v4-callout--mobile text {
    font-size: 11.5px;
    letter-spacing: 0.09em;
  }

  .auth-v4-callout--mobile path {
    stroke-width: 0.75;
  }

  .auth-render-v4 .render-truth-note {
    margin-top: 17px;
    font-size: 8px;
    text-align: left;
  }
}

@media (max-width: 390px) {
  .auth-reference-copy h3 {
    font-size: 3.15rem;
  }

  .auth-reference-copy span {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-v4-dust circle,
  .auth-v4-output-arrows path,
  .auth-v4-mobile-out {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* One architecture / many scales                                             */
/* -------------------------------------------------------------------------- */

.scale-reference-desktop {
  position: relative;
  background:
    radial-gradient(circle at 60% 45%, rgba(215, 255, 22, 0.025), transparent 34%),
    linear-gradient(180deg, #040705, #020403);
}

.scale-reference-svg {
  display: block;
  width: 100%;
  height: auto;
}

.scale-reference-svg path,
.scale-reference-svg circle,
.scale-reference-svg ellipse,
.scale-reference-svg rect,
.scale-reference-svg use {
  vector-effect: non-scaling-stroke;
}

.scale-v4-frame,
.scale-v4-mobile-row > rect,
.scale-v4-intelligence-band > rect,
.scale-v4-capability-strip > rect,
.scale-v4-mobile-band > rect {
  fill: rgba(2, 5, 4, 0.28);
  stroke: rgba(222, 225, 215, 0.18);
  stroke-width: 0.8;
}

.scale-v4-heading,
.scale-v4-mobile-heading {
  fill: #eff0ea;
  font-family: var(--lock-mono);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.scale-v4-intro,
.scale-v4-mobile-intro {
  fill: #a0a59c;
  font-family: var(--lock-display);
  font-size: 13px;
}

.scale-v4-progress {
  fill: none;
  stroke: rgba(215, 255, 22, 0.58);
  stroke-width: 1.1;
}

.scale-v4-progress-label circle {
  fill: var(--lock-signal);
  stroke: var(--lock-signal);
  filter: url(#scale-v4-glow-d);
}

.scale-v4-progress-label text {
  fill: #d9dcd4;
  font-family: var(--lock-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.scale-v4-progress-label .scale-v4-progress-copy {
  fill: #888e85;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.scale-v4-atmosphere path {
  fill: none;
  stroke: rgba(215, 255, 22, 0.07);
  stroke-width: 0.75;
}

.scale-v4-flow-haze {
  fill: none;
  stroke: var(--lock-signal);
  stroke-width: 30;
  opacity: 0.12;
  filter: url(#scale-v4-glow-d);
}

.scale-v4-flow {
  fill: none;
  stroke: var(--lock-signal);
  stroke-width: 1.35;
  stroke-dasharray: 3 8;
  animation: scale-v4-flow 11s linear infinite;
}

.scale-v4-field {
  fill: url(#scale-v4-field-d);
  stroke: none;
}

.scale-v4-orbit,
.scale-v4-globe {
  fill: none;
  stroke: rgba(215, 255, 22, 0.38);
  stroke-width: 0.85;
}

.scale-v4-orbit--inner {
  stroke: rgba(228, 231, 222, 0.24);
  stroke-dasharray: 2 5;
}

.scale-v4-orbit--fine {
  stroke: rgba(215, 255, 22, 0.17);
  stroke-dasharray: 1 5;
}

.scale-v4-links,
.scale-v4-network-links {
  fill: none;
  stroke: rgba(215, 255, 22, 0.52);
  stroke-width: 0.8;
  stroke-dasharray: 2 5;
}

.scale-v4-machine-shadow {
  fill: #000;
  opacity: 0.78;
  filter: url(#scale-v4-soft-d);
}

.scale-v4-machine-base {
  fill: #10130f;
  stroke: rgba(215, 255, 22, 0.42);
  stroke-width: 0.8;
}

.scale-v4-machine-side {
  fill: url(#scale-v4-side-d);
  stroke: rgba(231, 233, 226, 0.58);
  stroke-width: 0.8;
}

.scale-v4-machine-top {
  fill: url(#scale-v4-top-d);
  stroke: rgba(238, 239, 233, 0.72);
  stroke-width: 0.8;
}

.scale-v4-machine-face {
  fill: #171a17;
  stroke: rgba(232, 234, 226, 0.5);
  stroke-width: 0.75;
}

.scale-v4-machine-edge,
.scale-v4-machine-window,
.scale-v4-machine-tool {
  fill: none;
  stroke: rgba(232, 234, 227, 0.64);
  stroke-width: 0.75;
}

.scale-v4-machine-window {
  fill: rgba(3, 5, 4, 0.88);
  stroke: rgba(215, 255, 22, 0.3);
}

.scale-v4-active {
  fill: var(--lock-signal);
  stroke: none;
}

.scale-v4-node-halo {
  fill: var(--lock-signal);
  opacity: 0.2;
  filter: url(#scale-v4-glow-d);
}

.scale-v4-node {
  fill: #040604;
  stroke: var(--lock-signal);
  stroke-width: 1.15;
}

.scale-v4-floor {
  fill: rgba(115, 121, 112, 0.12);
  stroke: rgba(226, 229, 220, 0.3);
  stroke-width: 0.8;
}

.scale-v4-building path:first-child {
  fill: url(#scale-v4-top-d);
  stroke: rgba(236, 238, 230, 0.62);
  stroke-width: 0.8;
}

.scale-v4-building path:nth-child(2) {
  fill: #292d28;
  stroke: rgba(228, 231, 223, 0.47);
  stroke-width: 0.8;
}

.scale-v4-building path:nth-child(3) {
  fill: #171a17;
  stroke: rgba(228, 231, 223, 0.42);
  stroke-width: 0.8;
}

.scale-v4-roof {
  fill: none !important;
  stroke: rgba(215, 255, 22, 0.27) !important;
  stroke-width: 0.7 !important;
}

.scale-v4-land {
  fill: rgba(178, 184, 174, 0.16);
  stroke: rgba(221, 225, 215, 0.39);
  stroke-width: 0.7;
}

.scale-v4-stage-label > circle {
  fill: rgba(4, 7, 5, 0.88);
  stroke: rgba(215, 255, 22, 0.54);
  stroke-width: 0.8;
}

.scale-v4-stage-label > use {
  fill: none;
  stroke: var(--lock-signal);
  stroke-width: 1;
}

.scale-v4-stage-title {
  fill: #e7e9e2;
  font-family: var(--lock-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.scale-v4-stage-copy {
  fill: #969c92;
  font-family: var(--lock-display);
  font-size: 13px;
}

.scale-v4-intelligence-band > rect {
  stroke: rgba(215, 255, 22, 0.28);
}

.scale-v4-band-glow {
  fill: none;
  stroke: var(--lock-signal);
  stroke-width: 26;
  opacity: 0.1;
  filter: url(#scale-v4-glow-d);
}

.scale-v4-band-wave {
  fill: none;
  stroke: rgba(215, 255, 22, 0.42);
  stroke-width: 0.8;
}

.scale-v4-band-side,
.scale-v4-band-title,
.scale-v4-capability-strip text,
.scale-v4-mobile-band > text,
.scale-v4-mobile-capabilities text,
.scale-v4-mobile-footer {
  font-family: var(--lock-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.scale-v4-band-side {
  fill: var(--lock-signal);
  font-size: 12.5px;
}

.scale-v4-band-title {
  fill: var(--lock-signal);
  font-size: 16px;
}

.scale-v4-band-copy {
  fill: #8f958c;
  font-family: var(--lock-display);
  font-size: 12.5px;
}

.scale-v4-band-copy--center {
  fill: #b5bab1;
  font-size: 12px;
}

.scale-v4-band-link {
  fill: none;
  stroke: rgba(215, 255, 22, 0.62);
  stroke-width: 0.8;
}

.scale-v4-capability-strip > path {
  fill: none;
  stroke: rgba(222, 225, 215, 0.14);
  stroke-width: 0.8;
}

.scale-v4-capability-strip g circle {
  fill: rgba(4, 7, 5, 0.86);
  stroke: rgba(215, 255, 22, 0.5);
  stroke-width: 0.8;
}

.scale-v4-capability-strip g use,
.scale-v4-capability-strip g path,
.scale-v4-capability-strip g circle + circle {
  fill: none;
  stroke: var(--lock-signal);
  stroke-width: 0.85;
}

.scale-v4-capability-strip text {
  fill: #ccd0c7;
  font-size: 12.5px;
}

.scale-v4-capability-strip .scale-v4-cap-copy {
  fill: #7f857c;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.scale-reference-mobile {
  display: none;
}

@keyframes scale-v4-flow {
  to { stroke-dashoffset: -92; }
}

@media (max-width: 1100px) {
  .scale-reference-desktop {
    display: none;
  }

  .scale-reference-mobile {
    display: block;
    width: min(100%, 620px);
    margin: 0 auto;
    background:
      radial-gradient(circle at 32% 48%, rgba(215, 255, 22, 0.025), transparent 32%),
      #030504;
  }

  .scale-reference-svg--mobile .scale-v4-frame {
    stroke: rgba(224, 227, 217, 0.22);
  }

  .scale-v4-mobile-heading {
    font-size: 18px;
    letter-spacing: 0.13em;
  }

  .scale-v4-mobile-intro {
    font-size: 11px;
  }

  .scale-v4-mobile-spine {
    fill: none;
    stroke: rgba(215, 255, 22, 0.7);
    stroke-width: 1;
  }

  .scale-v4-mobile-row > rect {
    fill: rgba(5, 8, 6, 0.6);
    stroke: rgba(225, 228, 219, 0.15);
  }

  .scale-v4-mobile-index,
  .scale-v4-mobile-title,
  .scale-v4-mobile-copy {
    font-family: var(--lock-mono);
  }

  .scale-v4-mobile-index {
    fill: var(--lock-signal);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
  }

  .scale-v4-mobile-title {
    fill: #e7e9e2;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.13em;
  }

  .scale-v4-mobile-copy {
    fill: #969c92;
    font-size: 11px;
  }

  .scale-reference-svg--mobile .scale-v4-field {
    fill: url(#scale-v4-field-m);
  }

  .scale-reference-svg--mobile .scale-v4-machine-side {
    fill: url(#scale-v4-side-m);
  }

  .scale-reference-svg--mobile .scale-v4-machine-top,
  .scale-reference-svg--mobile .scale-v4-building path:first-child {
    fill: url(#scale-v4-top-m);
  }

  .scale-reference-svg--mobile .scale-v4-node-halo {
    filter: url(#scale-v4-glow-m);
  }

  .scale-v4-mobile-band > rect {
    stroke: rgba(215, 255, 22, 0.28);
  }

  .scale-v4-mobile-band > text:first-of-type {
    fill: var(--lock-signal);
    font-size: 13px;
  }

  .scale-v4-mobile-band .scale-v4-mobile-band-copy {
    fill: #b2b7ad;
    font-size: 11.2px;
    letter-spacing: 0.04em;
  }

  .scale-v4-mobile-band .scale-v4-mobile-band-foot {
    fill: #7f857c;
    font-size: 11.2px;
    letter-spacing: 0.025em;
  }

  .scale-reference-svg--mobile .scale-v4-band-glow {
    filter: url(#scale-v4-glow-m);
  }

  .scale-v4-mobile-capabilities path {
    fill: none;
    stroke: rgba(215, 255, 22, 0.24);
    stroke-width: 0.8;
  }

  .scale-v4-mobile-capabilities circle {
    fill: rgba(4, 7, 5, 0.88);
    stroke: rgba(215, 255, 22, 0.52);
    stroke-width: 0.8;
  }

  .scale-v4-mobile-capabilities text {
    fill: #aeb3aa;
    font-size: 11.2px;
    letter-spacing: 0.015em;
  }

  .scale-v4-mobile-footer {
    fill: var(--lock-signal);
    font-size: 11.2px;
  }

  .scale-render-v4 .render-truth-note {
    margin-top: 15px;
    font-size: 8px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scale-v4-flow {
    animation: none !important;
  }
}