.unizo-lens {
  --ul-canvas: #0A0D12;
  --ul-inset: #070A0E;
  --ul-surface: #0F131A;
  --ul-overlay: #1A202B;
  --ul-primary: #E4E8EE;
  --ul-secondary: #A2ABBB;
  --ul-tertiary: #7C8698;
  --ul-cyan: #22C7E6;
  --ul-cyan-bright: #48DCE8;
  --ul-cyan-light: #7FEBF2;
  --ul-red: #FF5C6C;
  --ul-green: #3ED598;
  --ul-cycle: 9.4s;
  --ul-ease: cubic-bezier(.22,.61,.36,1);
}

.unizo-lens {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 760 / 650;
  overflow: visible;
  isolation: isolate;
  color: var(--ul-primary);
  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.unizo-lens__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.ul-aura,
.ul-shell,
.ul-tick,
.ul-reticle,
.ul-background-routes path,
.ul-route,
.ul-evidence-return,
.ul-aperture__ring,
.ul-aperture__tick,
.ul-gate line,
.ul-verified__ring,
.ul-verified__check,
.ul-action-rule,
.ul-sigil circle,
.ul-sigil line {
  vector-effect: non-scaling-stroke;
}

.ul-aura { fill: none; }
.ul-aura--wash { fill: url(#ul-orb-wash); opacity: .70; }
.ul-aura--outer {
  fill: url(#ul-mid-hue);
  stroke: rgba(34,199,230,.075);
  stroke-width: .95;
  filter: drop-shadow(0 0 6px rgba(34,199,230,.05));
}
.ul-aura--mid {
  fill: rgba(22,32,47,.22);
  stroke: rgba(34,199,230,.24);
  stroke-width: 1.15;
  filter: drop-shadow(0 0 5px rgba(34,199,230,.075));
}
.ul-aura--secondary {
  fill: none;
  stroke: rgba(72,220,232,.08);
  stroke-width: .85;
}
.ul-shell--outer {
  fill: rgba(7,10,16,.98);
  stroke: rgba(34,199,230,.46);
  stroke-width: 1.22;
  filter: drop-shadow(0 0 6px rgba(34,199,230,.10));
}
.ul-shell--inner {
  fill: rgba(22,32,47,.78);
  stroke: rgba(255,255,255,.075);
  stroke-width: .92;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.025));
}

.ul-tick {
  stroke: rgba(124,134,152,.46);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.ul-tick--major {
  stroke: rgba(72,220,232,.88);
  stroke-width: 2.1;
}

.ul-reticle {
  stroke: rgba(34,199,230,.12);
  stroke-width: 1;
  stroke-dasharray: 4 8;
}
.ul-background-routes path {
  fill: none;
  stroke: rgba(138,165,182,.13);
  stroke-width: 1.1;
}

.ul-particle {
  fill: rgba(72,220,232,.46);
  transform-box: fill-box;
  transform-origin: center;
  animation: ul-particle-drift 3.8s ease-in-out infinite alternate;
}
.ul-particle--1 { animation-delay: -.8s; opacity: .46; }
.ul-particle--2 { animation-delay: -1.7s; opacity: .31; }
.ul-particle--3 { animation-delay: -2.5s; opacity: .22; }

.ul-route {
  fill: none;
  stroke: var(--ul-red);
  stroke-width: 3.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255,92,108,.35));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ul-route--upstream {
  animation: ul-route-upstream var(--ul-cycle) var(--ul-ease) infinite;
}
.ul-route--downstream {
  animation: ul-route-downstream var(--ul-cycle) var(--ul-ease) infinite;
}

.ul-node {
  opacity: .16;
  transform-box: fill-box;
  transform-origin: center;
}
.ul-node__ring {
  fill: rgba(34,199,230,.08);
  stroke: rgba(72,220,232,.64);
  stroke-width: 1.2;
}
.ul-node__core { fill: var(--ul-cyan-bright); filter: drop-shadow(0 0 4px rgba(72,220,232,.34)); }
.ul-node--entry { animation: ul-node-entry var(--ul-cycle) var(--ul-ease) infinite; }
.ul-node--context { animation: ul-node-context var(--ul-cycle) var(--ul-ease) infinite; }
.ul-node--impact { animation: ul-node-impact var(--ul-cycle) var(--ul-ease) infinite; }
.ul-node__impact-halo { fill: rgba(255,92,108,.13); }
.ul-node__impact-ring { fill: rgba(255,92,108,.06); stroke: rgba(255,92,108,.55); stroke-width: 1.2; }
.ul-node__impact-core { fill: var(--ul-red); }

.ul-aperture {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ul-aperture var(--ul-cycle) var(--ul-ease) infinite;
}
.ul-aperture__ring {
  fill: rgba(34,199,230,.025);
  stroke: rgba(72,220,232,.76);
  stroke-width: 1.05;
  filter: drop-shadow(0 0 2px rgba(72,220,232,.18));
}
.ul-aperture__ring--one { stroke-opacity: .28; }
.ul-aperture__ring--two { stroke-opacity: .38; }
.ul-aperture__ring--three { stroke-opacity: .52; }
.ul-aperture__ring--four { stroke-opacity: .66; }
.ul-aperture__ring--five { stroke-opacity: .86; }
.ul-aperture__focus { fill: rgba(34,199,230,.08); stroke: rgba(127,235,242,.92); stroke-width: 1.35; }
.ul-aperture__core { fill: var(--ul-cyan-bright); filter: url(#ul-soft-glow); }
.ul-aperture__tick { stroke: var(--ul-cyan-light); stroke-width: 1.35; stroke-linecap: round; }

.ul-gate {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ul-gate var(--ul-cycle) var(--ul-ease) infinite;
}
.ul-gate line { stroke: var(--ul-cyan-bright); stroke-width: 2.2; stroke-linecap: round; }

.ul-evidence-return {
  fill: none;
  stroke: rgba(72,220,232,.8);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: .02 .045;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: ul-evidence var(--ul-cycle) var(--ul-ease) infinite;
}

.ul-verified {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ul-verified var(--ul-cycle) var(--ul-ease) infinite;
}
.ul-verified__ring { fill: none; stroke: var(--ul-green); stroke-width: 1.35; filter: url(#ul-ring-glow); }
.ul-verified__ring--one { stroke-opacity: .35; }
.ul-verified__ring--two { stroke-opacity: .46; }
.ul-verified__ring--three { stroke-opacity: .58; }
.ul-verified__ring--four { stroke-opacity: .72; }
.ul-verified__ring--five { stroke-opacity: .88; }
.ul-verified__center { fill: rgba(62,213,152,.08); stroke: rgba(62,213,152,.78); stroke-width: 1.2; }
.ul-verified__check {
  fill: none;
  stroke: #7AE7BB;
  stroke-width: 2.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#ul-green-glow);
}

.ul-analyst-label rect {
  fill: rgba(15,19,26,.96);
  stroke: rgba(34,199,230,.46);
  stroke-width: 1;
  filter: drop-shadow(0 0 8px rgba(34,199,230,.10));
}
.ul-analyst-label text,
.ul-action-label,
.ul-signal-label text,
.ul-evidence-label text,
.ul-verified-label text {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: .072em;
}
.ul-analyst-label text { fill: var(--ul-cyan-light); font-size: 13px; font-weight: 600; }
.ul-sigil { filter: url(#ul-sigil-glow); }
.ul-sigil__ring,
.ul-sigil line { fill: none; stroke: var(--ul-cyan-bright); stroke-width: 1.05; }
.ul-sigil__ring--outer { stroke-opacity: .88; }
.ul-sigil__ring--middle { stroke-opacity: .72; }
.ul-sigil__ring--inner { stroke-opacity: .9; }
.ul-sigil__core { fill: var(--ul-cyan-light); stroke: none; filter: drop-shadow(0 0 3px rgba(127,235,242,.45)); }
.ul-sigil line { stroke-opacity: .8; stroke-linecap: round; }

.ul-action-label,
.ul-action-rule {
  opacity: 0;
  animation: ul-action-label var(--ul-cycle) var(--ul-ease) infinite;
}
.ul-action-label { fill: var(--ul-cyan-light); font-size: 12.25px; font-weight: 600; }
.ul-action-rule { stroke: rgba(127,235,242,.62); stroke-width: 1; }

.ul-signal-label text,
.ul-evidence-label text { fill: #929DAF; font-size: 10.5px; font-weight: 600; }
.ul-signal-label circle:first-child,
.ul-evidence-label circle:first-child { fill: rgba(34,199,230,.12); }
.ul-signal-label circle:nth-child(2),
.ul-evidence-label circle:nth-child(2) { fill: var(--ul-cyan-bright); }
.ul-evidence-label { opacity: .42; animation: ul-evidence-label var(--ul-cycle) var(--ul-ease) infinite; }

.ul-verified-label {
  opacity: 0;
  animation: ul-verified-label var(--ul-cycle) var(--ul-ease) infinite;
}
.ul-verified-label__backdrop { fill: none; stroke: none; }
.ul-verified-label__icon { fill: rgba(62,213,152,.11); stroke: var(--ul-green); stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(62,213,152,.22)); }
.ul-verified-label path { fill: none; stroke: #83EDC1; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.ul-verified-label text { fill: #70E4B1; font-size: 13.25px; font-weight: 600; letter-spacing: .055em; filter: drop-shadow(0 0 4px rgba(62,213,152,.14)); }

.ul-edge-particles circle { fill: var(--ul-cyan-bright); opacity: .22; animation: ul-edge-particles 3.4s ease-in-out infinite alternate; }
.ul-edge-particles circle:nth-child(2n) { animation-delay: -1.4s; opacity: .13; }
.ul-edge-fade,
.ul-bottom-fade { pointer-events: none; }

/* 9.4 second narrative cycle
   0–1.2 ambient | 1.2–2.6 resolve | 2.6–4.0 intervene |
   4.0–5.6 evidence/verify | 5.6–8.6 hold | 8.6–9.4 reset */
@keyframes ul-route-upstream {
  0%, 12% { stroke-dashoffset: 1; opacity: 0; }
  18% { opacity: 1; }
  28%, 91% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes ul-route-downstream {
  0%, 18% { stroke-dashoffset: 1; opacity: 0; }
  28% { stroke-dashoffset: 0; opacity: 1; }
  42% { stroke-dashoffset: 0; opacity: 1; }
  50%, 91% { stroke-dashoffset: 0; opacity: .08; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes ul-node-entry {
  0%, 13% { opacity: .15; transform: scale(.86); }
  20%, 91% { opacity: 1; transform: scale(1); }
  100% { opacity: .15; transform: scale(.86); }
}
@keyframes ul-node-context {
  0%, 16% { opacity: .15; transform: scale(.84); }
  24%, 91% { opacity: 1; transform: scale(1); }
  100% { opacity: .15; transform: scale(.84); }
}
@keyframes ul-node-impact {
  0%, 20% { opacity: .16; transform: scale(.85); }
  29%, 43% { opacity: 1; transform: scale(1); }
  52%, 91% { opacity: .22; transform: scale(.9); filter: grayscale(.5); }
  100% { opacity: .16; transform: scale(.85); }
}
@keyframes ul-aperture {
  0%, 26% { opacity: 0; transform: scale(1.45); }
  34%, 43% { opacity: 1; transform: scale(1); }
  50%, 91% { opacity: .58; transform: scale(.98); }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes ul-gate {
  0%, 31% { opacity: 0; transform: scale(.75); }
  37%, 43% { opacity: 1; transform: scale(1); }
  49%, 91% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(.75); }
}
@keyframes ul-action-label {
  0%, 26% { opacity: 0; transform: translateY(4px); }
  34%, 91% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}
@keyframes ul-evidence {
  0%, 42% { stroke-dashoffset: 1; opacity: 0; }
  48% { opacity: 1; }
  58%, 91% { stroke-dashoffset: 0; opacity: .72; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes ul-evidence-label {
  0%, 40% { opacity: .25; }
  49%, 91% { opacity: .88; }
  100% { opacity: .25; }
}
@keyframes ul-verified {
  0%, 48% { opacity: 0; transform: scale(.72); }
  56% { opacity: 1; transform: scale(1.06); }
  62%, 91% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.72); }
}
@keyframes ul-verified-label {
  0%, 50% { opacity: 0; transform: translateY(5px); }
  59%, 91% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(5px); }
}
@keyframes ul-particle-drift {
  from { transform: translate(-1px,-1px); }
  to { transform: translate(2px,2px); }
}
@keyframes ul-edge-particles {
  from { transform: translate(-3px,-2px); }
  to { transform: translate(5px,3px); }
}

@media (max-width: 720px) {
  .unizo-lens { aspect-ratio: 760 / 590; }
  .ul-signal-label,
  .ul-evidence-label,
  .ul-action-label,
  .ul-action-rule { opacity: 0 !important; }
  .ul-analyst-label { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .unizo-lens * { animation: none !important; }
  .ul-route--upstream { stroke-dashoffset: 0; opacity: 1; }
  .ul-route--downstream { stroke-dashoffset: 0; opacity: .08; }
  .ul-node--entry,
  .ul-node--context { opacity: 1; transform: none; }
  .ul-node--impact { opacity: .22; transform: scale(.9); filter: grayscale(.5); }
  .ul-aperture { opacity: .58; transform: scale(.98); }
  .ul-gate { opacity: 0; }
  .ul-action-label,
  .ul-action-rule { opacity: 1; }
  .ul-evidence-return { stroke-dashoffset: 0; opacity: .72; }
  .ul-evidence-label { opacity: .88; }
  .ul-verified,
  .ul-verified-label { opacity: 1; transform: none; }
}

/* Homepage hero placement.
   The stock component lets the SVG paint outside its box (overflow: visible)
   so glows are not clipped. Inside the hero grid that lets the edge fade and
   the right-hand labels extend past the column, so the lens is constrained
   here and centred within the art cell. */
.uw-hero .uw-hero__in .uw-hero__art { display: grid; place-items: center; overflow: hidden; min-width: 0; }
.uw-hero .uw-hero__art .unizo-lens {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  margin-inline: auto;
  align-self: center;
}
.uw-hero .uw-hero__art .unizo-lens__svg { overflow: hidden; }

/* Below 900px site.css pulls the art cell wider than the viewport with a
   negative inline margin, which suited a cropped photograph but pushes the
   lens off-screen. Keep the lens inside the viewport instead. */
@media (max-width: 900px) {
  .uw-hero .uw-hero__in .uw-hero__art { margin: 0 auto; width: 100%; max-width: 100%; overflow: hidden; }
  .uw-hero .uw-hero__art .unizo-lens { max-width: 520px; }
}

/* Between 900px and 1360px the hero grid gives the art column less width than
   the lens wants, and aspect-ratio then derives an oversized height from the
   stretched cell. Cap the lens explicitly across that range. */
@media (min-width: 901px) and (max-width: 1360px) {
  /* Constrain the grid track itself; a content-sized track lets the lens
     dictate its own width and spill past the container. */
  .uw-hero .uw-hero__in { grid-template-columns: minmax(0,1fr) minmax(0,480px); }
  .uw-hero .uw-hero__art .unizo-lens { max-width: 480px; }
}