:root {
  --void: #05080d;
  --surface: #080d14;
  --surface-raised: #0b121b;
  --text: #e9f0f5;
  --soft: #aab6bf;
  --muted: #687681;
  --signal: #5ee7f7;
  --violet: #9f8cff;
  --amber: #ffc66d;
  --signal-dim: rgba(94, 231, 247, 0.12);
  --line: rgba(196, 220, 231, 0.13);
  --line-strong: rgba(196, 220, 231, 0.23);
  --mono: "SFMono-Regular", "SF Mono", "Roboto Mono", Consolas, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  color-scheme: dark;
  background: var(--void);
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(40, 104, 123, 0.09), transparent 29rem),
    var(--void);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(153, 201, 217, 0.023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 201, 217, 0.023) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  animation: world-grid-drift 32s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(167, 220, 234, 0.024) 3px 4px);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.oasis-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.82;
}

.oasis-link {
  position: fixed;
  z-index: 400;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 48%, rgba(94, 231, 247, 0.12), transparent 20rem),
    #03060a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.motion-ready.is-linking .oasis-link {
  opacity: 1;
  visibility: visible;
}

.motion-ready.link-complete .oasis-link {
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms ease, visibility 420ms step-end;
}

.link-portal {
  position: relative;
  display: block;
  width: 112px;
  aspect-ratio: 1;
  margin-bottom: 26px;
}

.link-portal i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(94, 231, 247, 0.48);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(94, 231, 247, 0.08);
}

.link-portal i:nth-child(1) {
  border-block-color: transparent;
  animation: orbit-spin 1.2s linear infinite;
}

.link-portal i:nth-child(2) {
  inset: 16px;
  border-inline-color: transparent;
  animation: orbit-spin 0.9s linear reverse infinite;
}

.link-portal i:nth-child(3) {
  inset: 38px;
  border-color: var(--signal);
  background: rgba(94, 231, 247, 0.08);
  box-shadow: 0 0 24px rgba(94, 231, 247, 0.28), inset 0 0 16px rgba(94, 231, 247, 0.16);
  animation: link-core 700ms ease-in-out infinite alternate;
}

.oasis-link p {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.22em;
}

.oasis-link p span { color: var(--signal); font-weight: 450; }

.oasis-link small {
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.oasis-link small b { color: var(--soft); font-weight: 500; }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--void); background: var(--signal); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 10px 13px;
  color: var(--void);
  background: var(--signal);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site {
  position: relative;
  z-index: 2;
  width: min(100%, 1920px);
  min-height: 100svh;
  margin-inline: auto;
  border-inline: 1px solid rgba(196, 220, 231, 0.06);
  background: rgba(5, 8, 13, 0.34);
}

.brand {
  justify-self: start;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.075em;
}

.brand span { color: var(--signal); }

.profile {
  display: grid;
  grid-template-columns: minmax(450px, 0.78fr) minmax(620px, 1.22fr);
  min-height: 100svh;
}

.identity-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(24px, 3.2vh, 38px);
  min-width: 0;
  padding: clamp(30px, 3.4vw, 58px);
  border-right: 1px solid var(--line-strong);
}

.signal-console {
  position: absolute;
  z-index: 14;
  top: calc(clamp(30px, 3.4vw, 58px) - 18px);
  right: calc(50% - clamp(125px, 10vw, 155px) + 8px);
  display: grid;
  grid-template-columns: 8px auto 42px;
  width: 126px;
  height: 42px;
  padding: 0 9px;
  align-items: center;
  column-gap: 8px;
  color: rgba(151, 171, 183, 0.58);
  border: 1px solid rgba(116, 160, 175, 0.15);
  background:
    linear-gradient(90deg, rgba(94, 231, 247, 0.028) 1px, transparent 1px) 0 0 / 9px 100%,
    rgba(4, 13, 18, 0.86);
  box-shadow: inset 0 0 22px rgba(94, 231, 247, 0.025);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 240ms ease;
}

.signal-console::before,
.signal-console::after {
  position: absolute;
  z-index: 2;
  content: "";
  pointer-events: none;
}

.signal-console::before {
  top: -1px;
  right: -1px;
  width: 23px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: 0.52;
}

.signal-console::after {
  bottom: 0;
  left: 0;
  width: 44%;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.22;
  transform-origin: left center;
}

.signal-console:focus-visible {
  color: var(--signal);
  outline: 1px solid rgba(94, 231, 247, 0.48);
  outline-offset: 2px;
}

.signal-node {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.signal-node i {
  position: absolute;
  inset: 1px;
  display: block;
  background: currentColor;
  opacity: 0;
  transition: opacity 180ms ease;
}

.signal-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.signal-copy b,
.signal-copy small {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.signal-copy b {
  color: rgba(216, 232, 239, 0.78);
  font-size: 7px;
  letter-spacing: 0.18em;
}

.signal-copy small {
  color: currentColor;
  font-size: 5px;
  letter-spacing: 0.15em;
}

.signal-waveform {
  display: block;
  width: 42px;
  height: 16px;
  overflow: visible;
}

.signal-waveform path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 4 3;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-width: 0.8;
  opacity: 0.36;
}

.signal-console[data-signal="tuning"] {
  color: rgba(94, 231, 247, 0.72);
  border-color: rgba(94, 231, 247, 0.26);
}

.signal-console[data-signal="tuning"]::after { animation: signal-lock 820ms ease-in-out infinite; }

.signal-console[aria-pressed="true"] {
  color: rgba(94, 231, 247, 0.92);
  border-color: rgba(94, 231, 247, 0.34);
  background:
    linear-gradient(90deg, rgba(94, 231, 247, 0.044) 1px, transparent 1px) 0 0 / 9px 100%,
    rgba(6, 23, 30, 0.9);
  box-shadow: inset 0 0 24px rgba(94, 231, 247, 0.06), 0 0 22px rgba(94, 231, 247, 0.09);
}

.signal-console[aria-pressed="true"] .signal-node i { opacity: 1; animation: signal-beacon 1.8s ease-in-out infinite; }
.signal-console[aria-pressed="true"] .signal-waveform path { opacity: 0.92; animation: signal-trace 2.2s linear infinite; }
.signal-console[aria-pressed="true"]::after { opacity: 0.8; animation: signal-lock 2.8s ease-in-out infinite; }

.signal-receiving .avatar-node::before { animation-duration: 11s; }
.signal-receiving .avatar-node::after { animation-duration: 18s; border-color: rgba(94, 231, 247, 0.34); }
.signal-receiving .avatar-orbit { animation-duration: 15s; }
.signal-receiving .avatar-stage::before { opacity: 0.62; animation-duration: 2.8s; }

audio[data-ambient-audio] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .signal-console:hover {
    color: rgba(94, 231, 247, 0.84);
    border-color: rgba(94, 231, 247, 0.32);
    background:
      linear-gradient(90deg, rgba(94, 231, 247, 0.04) 1px, transparent 1px) 0 0 / 9px 100%,
      rgba(6, 22, 28, 0.92);
  }
}

.avatar-stage {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  isolation: isolate;
  width: clamp(250px, 20vw, 310px);
  min-height: clamp(232px, 18vw, 278px);
  margin: 0;
  padding: 0;
  color: inherit;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(196, 220, 231, 0.1) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(transparent calc(50% - 0.5px), rgba(196, 220, 231, 0.1) 50%, transparent calc(50% + 0.5px)),
    repeating-linear-gradient(90deg, rgba(153, 201, 217, 0.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(rgba(153, 201, 217, 0.025) 0 1px, transparent 1px 24px),
    radial-gradient(circle, rgba(94, 231, 247, 0.07), transparent 64%);
  font: inherit;
  cursor: pointer;
  perspective: 720px;
  transition: filter 260ms ease;
}

.avatar-stage:focus-visible {
  outline: 1px solid rgba(94, 231, 247, 0.72);
  outline-offset: 7px;
}

.avatar-stage::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--signal), var(--signal)) left top / 34px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) left top / 1px 34px no-repeat,
    linear-gradient(90deg, var(--signal), var(--signal)) right top / 34px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right top / 1px 34px no-repeat,
    linear-gradient(90deg, var(--signal), var(--signal)) left bottom / 34px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) left bottom / 1px 34px no-repeat,
    linear-gradient(90deg, var(--signal), var(--signal)) right bottom / 34px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right bottom / 1px 34px no-repeat;
  opacity: 0.42;
  animation: corner-signal 4.8s steps(1, end) infinite;
}

.avatar-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12px;
  border: 1px solid rgba(196, 220, 231, 0.07);
  pointer-events: none;
}

.avatar-node {
  position: relative;
  isolation: isolate;
  width: clamp(174px, 14vw, 220px);
  aspect-ratio: 1;
  margin: 0;
  background: radial-gradient(circle, rgba(94, 231, 247, 0.075), transparent 67%);
  transform: rotateX(var(--avatar-rx, 0deg)) rotateY(var(--avatar-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1), filter 320ms ease;
}

.avatar {
  position: absolute;
  z-index: 2;
  inset: 10%;
  width: 80%;
  height: 80%;
  border: 1px solid rgba(216, 244, 250, 0.52);
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.025);
  box-shadow:
    0 0 0 6px rgba(5, 8, 13, 0.82),
    0 0 42px rgba(94, 231, 247, 0.14);
}

.avatar-node::before,
.avatar-node::after,
.avatar-orbit {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.avatar-node::before {
  inset: 0;
  background: conic-gradient(
    from -18deg,
    rgba(94, 231, 247, 0.82) 0deg 8deg,
    transparent 8deg 87deg,
    rgba(94, 231, 247, 0.36) 87deg 98deg,
    transparent 98deg 186deg,
    rgba(196, 220, 231, 0.28) 186deg 194deg,
    transparent 194deg 278deg,
    rgba(94, 231, 247, 0.52) 278deg 289deg,
    transparent 289deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
  animation: orbit-spin 19s linear infinite;
}

.avatar-node::after {
  inset: 5%;
  border: 1px dashed rgba(196, 220, 231, 0.2);
  animation: orbit-spin 31s linear reverse infinite;
}

.avatar-orbit {
  inset: 0;
  animation: orbit-spin 27s linear reverse infinite;
}

.avatar-orbit span {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 1px;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(94, 231, 247, 0.35);
}

.avatar-orbit span:nth-child(1) { top: calc(50% - 1px); left: -5px; }
.avatar-orbit span:nth-child(2) { top: calc(50% - 1px); right: -5px; }
.avatar-orbit span:nth-child(3) { top: -5px; left: calc(50% - 1px); width: 1px; height: 11px; }
.avatar-orbit span:nth-child(4) { bottom: -5px; left: calc(50% - 1px); width: 1px; height: 11px; }

.portal-status {
  position: absolute;
  z-index: 5;
  bottom: 8px;
  left: 50%;
  width: max-content;
  color: rgba(94, 231, 247, 0.78);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.17em;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 180ms ease, transform 220ms ease;
}

.portal-status::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  vertical-align: 1px;
}

.avatar-stage:hover .portal-status,
.avatar-stage:focus-visible .portal-status {
  opacity: 1;
  transform: translate(-50%, 0);
}

.avatar-stage:hover .avatar-node,
.avatar-stage:focus-visible .avatar-node { filter: drop-shadow(0 0 16px rgba(94, 231, 247, 0.18)); }

.portal-open .avatar-stage { filter: drop-shadow(0 0 30px rgba(94, 231, 247, 0.3)); }
.portal-open .avatar-node::before { animation-duration: 720ms; }
.portal-open .avatar-node::after { animation-duration: 1.1s; }
.portal-open .avatar-orbit { animation-duration: 1.4s; }
.portal-open .avatar-stage::after { animation: portal-frame 980ms cubic-bezier(0.2, 0.72, 0.2, 1); }
.portal-open .avatar-stage::before { animation: portal-corners 820ms steps(2, end); }
.portal-open .avatar {
  box-shadow:
    0 0 0 6px rgba(5, 8, 13, 0.82),
    0 0 58px rgba(94, 231, 247, 0.42),
    0 0 96px rgba(159, 140, 255, 0.18);
}

body.portal-open::after { animation: world-flash 900ms ease-out; }
.portal-open .site { animation: portal-color-lock 900ms ease-out; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.name-block {
  align-self: end;
  text-align: center;
}

h1 {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-size: clamp(62px, 6.3vw, 116px);
  font-weight: 610;
  line-height: 0.83;
  letter-spacing: -0.075em;
}

h1 span { white-space: nowrap; }
h1 span + span { color: var(--soft); }

h1::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: -3%;
  left: -3%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--signal) 28%, #c8bfff 66%, transparent);
  box-shadow: 0 0 18px rgba(94, 231, 247, 0.65);
  opacity: 0;
}

h1.name-fx-chroma { animation: chroma-lock 760ms steps(2, end); }

h1.name-fx-scan { animation: name-hologram 980ms ease-out; }
h1.name-fx-scan::after { animation: name-scan 980ms cubic-bezier(0.2, 0.72, 0.2, 1); }

h1.name-fx-phase span:first-child { animation: name-phase-left 820ms cubic-bezier(0.2, 0.72, 0.2, 1); }
h1.name-fx-phase span + span { animation: name-phase-right 820ms cubic-bezier(0.2, 0.72, 0.2, 1); }

.role-stack {
  position: relative;
  display: grid;
  gap: 0;
  align-self: end;
  padding: 0;
  background: transparent;
  isolation: isolate;
}

.role-stack::before,
.role-stack::after { content: none; }

.role-stack p {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(94px, auto);
  gap: 16px;
  align-items: center;
  min-height: 76px;
  margin: 0;
  padding: 18px 10px 18px 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 240ms ease;
}

.role-stack p::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(196, 220, 231, 0.16), rgba(196, 220, 231, 0.07) 72%, transparent);
}

.role-stack p::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -18%;
  width: 14%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 231, 247, 0.92) 48%, rgba(159, 140, 255, 0.64) 70%, transparent);
  box-shadow: 0 0 8px rgba(94, 231, 247, 0.32);
  opacity: 0;
  animation: role-channel 12s cubic-bezier(0.2, 0.72, 0.2, 1) infinite;
}

.role-stack p:nth-child(2)::after { animation-delay: 4s; }
.role-stack p:nth-child(3)::after { animation-delay: 8s; }

.role-stack p:hover,
.role-stack p:focus-within {
  background: radial-gradient(circle 170px at var(--mx) var(--my), rgba(94, 231, 247, 0.045), transparent 74%);
}

.role-stack p > * { position: relative; z-index: 2; }

.role-stack p > span,
.role-stack small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.role-stack p > span {
  display: block;
  color: rgba(133, 151, 163, 0.72);
  transition: color 180ms ease;
}

.role-stack p > span::before,
.role-stack p > span::after { content: none; }

.role-stack strong {
  font-size: clamp(17px, 1.08vw, 20px);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.026em;
  font-optical-sizing: auto;
  font-feature-settings: "ss01" 1, "cv05" 1;
  transition: color 180ms ease, transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.role-stack small {
  color: rgba(128, 145, 157, 0.78);
  text-align: right;
  transition: color 180ms ease, letter-spacing 220ms ease;
}

.role-stack p:hover > span,
.role-stack p:focus-within > span {
  color: var(--signal);
}

.role-stack p:hover strong,
.role-stack p:focus-within strong { color: #f6f9fb; transform: translateX(2px); }

.role-stack p:hover small,
.role-stack p:focus-within small { color: var(--soft); letter-spacing: 0.17em; }

.provenance {
  position: relative;
  width: min(100%, 520px);
  justify-self: center;
  padding: 12px 2px 8px;
  opacity: 0.82;
  transition: opacity 180ms ease;
}

.provenance:hover,
.provenance:focus-within { opacity: 0.94; }

.provenance > span,
.provenance time,
.provenance .trace-time,
.provenance strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.provenance > span {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-align: center;
}

.provenance > span::before,
.provenance > span::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 231, 247, 0.28));
}

.provenance > span::after {
  background: linear-gradient(90deg, rgba(159, 140, 255, 0.24), transparent);
}

.provenance ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
  padding: 0 2px 5px;
  list-style: none;
}

.provenance ol::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 29px;
  right: 11%;
  left: 11%;
  height: 1px;
  background: linear-gradient(90deg, rgba(94, 231, 247, 0.08), rgba(94, 231, 247, 0.42) 34%, rgba(94, 231, 247, 0.3) 68%, rgba(159, 140, 255, 0.34));
  box-shadow: 0 0 8px rgba(94, 231, 247, 0.12);
}

.provenance ol::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 27px;
  left: 3%;
  width: 13%;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 231, 247, 0.2), var(--signal), transparent);
  filter: blur(0.2px);
  opacity: 0;
  animation: trace-sweep 5.8s linear infinite;
}

.provenance li {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 0;
  text-align: center;
  isolation: isolate;
  outline: none;
  cursor: default;
  transition: transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.provenance li::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -9px -7px;
  pointer-events: none;
  background: radial-gradient(circle 78px at var(--mx) var(--my), rgba(94, 231, 247, 0.1), transparent 72%);
  border-bottom: 1px solid rgba(94, 231, 247, 0.18);
  opacity: 0;
  transition: opacity 200ms ease;
}

.provenance li::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 29px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(94, 231, 247, 0.48);
  background: var(--void);
  box-shadow: 0 0 0 4px rgba(5, 8, 13, 0.98), 0 0 9px rgba(94, 231, 247, 0.16);
  opacity: 0.82;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: opacity 180ms ease, transform 240ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.provenance li > *:not(.archive-card) { position: relative; z-index: 2; }

.provenance li:hover,
.provenance li:focus-within { transform: none; }

.provenance li:hover::before,
.provenance li:focus-within::before { opacity: 1; }

.provenance li:hover::after,
.provenance li:focus-within::after {
  border-color: var(--signal);
  box-shadow:
    0 0 0 4px rgba(5, 8, 13, 0.98),
    0 0 0 5px rgba(94, 231, 247, 0.08),
    0 0 14px rgba(94, 231, 247, 0.48);
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

.provenance li:hover time,
.provenance li:hover .trace-time,
.provenance li:focus-within .trace-time,
.provenance li:focus-within time { color: rgba(94, 231, 247, 0.72); }

.provenance li:hover strong,
.provenance li:focus-within strong { color: #aebac2; }

.provenance time,
.provenance .trace-time { color: #52606a; }

.provenance strong {
  position: relative;
  color: #85919a;
  font-weight: 450;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 30px;
}

.provenance li.is-active {
  --node-rgb: 94, 231, 247;
}

.provenance li.is-active::after {
  animation: trace-node-active 2.8s ease-in-out infinite;
}

.provenance li.is-active-alt {
  --node-rgb: 159, 140, 255;
}

.provenance li.is-active-alt::after {
  animation-delay: -1.4s;
}

.archive-card {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 12px);
  left: -7px;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: min(330px, 82vw);
  padding: 13px 16px 14px;
  color: #c4d3dc;
  border: 1px solid rgba(94, 231, 247, 0.42);
  background:
    linear-gradient(rgba(94, 231, 247, 0.035) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgba(94, 231, 247, 0.035) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(135deg, rgba(94, 231, 247, 0.11), transparent 46%),
    rgba(4, 9, 14, 0.97);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: 0 0 0 1px rgba(159, 140, 255, 0.08), 0 0 32px rgba(94, 231, 247, 0.13), 12px 14px 30px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.08em;
  white-space: pre;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px) scale(0.96);
  transform-origin: left bottom;
  transition: opacity 170ms ease, visibility 0s linear 230ms, transform 230ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.provenance li:nth-child(n + 3) .archive-card {
  right: -7px;
  left: auto;
  transform-origin: right bottom;
}

.archive-card > span { position: relative; z-index: 2; }
.archive-card > span:first-child { color: #d2e1e8; letter-spacing: 0.12em; }
.archive-card > span:nth-child(2) { color: #c4d3dc; }
.archive-card > span:last-child { color: rgba(94, 231, 247, 0.78); }

.archive-card::before {
  content: "";
  position: absolute;
  z-index: 21;
  top: 0;
  left: 0;
  width: 46px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  box-shadow: 0 0 10px rgba(94, 231, 247, 0.7);
  opacity: 0;
}

.provenance li[data-archive-node]:hover .archive-card,
.provenance li[data-archive-node]:focus-visible .archive-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
  animation: archive-materialize 430ms steps(6, end) both, archive-idle 2.8s linear 430ms infinite;
}

.provenance li[data-archive-node]:hover .archive-card::before,
.provenance li[data-archive-node]:focus-visible .archive-card::before { animation: archive-scan 1.25s linear infinite; }

.systems {
  display: grid;
  grid-template-rows: 1fr;
  min-width: 0;
  min-height: 100svh;
  background: rgba(8, 13, 20, 0.44);
}

.systems-header {
  position: relative;
  display: flex;
  align-items: end;
  min-height: 142px;
  padding: 29px clamp(28px, 3.8vw, 64px);
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
}

.systems-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--signal) 48%, transparent 100%);
  opacity: 0.64;
  transform: translateX(-110%);
  animation: range-sweep 8s cubic-bezier(0.22, 0.72, 0.2, 1) infinite;
}

.systems-header .eyebrow { margin-bottom: 12px; }

.systems-header .eyebrow::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(94, 231, 247, 0.72);
  animation: signal-pulse 2.4s ease-in-out infinite;
}

.systems-header h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(17px, 1.75vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.055em;
}

.system-index {
  display: grid;
  grid-template-rows: repeat(3, minmax(220px, 1fr));
  align-self: stretch;
  min-height: 100%;
}

.system-row {
  --mx: 50%;
  --my: 50%;
  --px: 0px;
  --py: 0px;
  --row-tail: clamp(18px, 1.7vw, 30px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 38%) minmax(320px, 1fr) 76px var(--row-tail);
  gap: 0;
  align-items: center;
  min-height: 220px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  transition: background-color 280ms ease, box-shadow 280ms ease, opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.72, 0.2, 1), clip-path 620ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.system-row:last-child { border-bottom: 0; }

.system-row::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-left: 2px solid var(--signal);
  background:
    linear-gradient(rgba(94, 231, 247, 0.027) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(94, 231, 247, 0.027) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(94, 231, 247, 0.1), transparent 48%);
  opacity: 0;
  transform: translateX(-9px);
  transition: opacity 220ms ease, transform 320ms ease, background-position 700ms ease;
}

.system-row::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 190px at var(--mx) var(--my), rgba(94, 231, 247, 0.14), rgba(94, 231, 247, 0.035) 42%, transparent 72%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.system-row:hover::before,
.system-row:has(.row-arrow:focus-visible)::before {
  opacity: 1;
  transform: translateX(0);
  background-position: 10px 0, 10px 0, 0 0;
}
.system-row:hover::after,
.system-row:has(.row-arrow:focus-visible)::after { opacity: 1; }

.domain-backdrop {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(62%, 820px);
  height: 100%;
  object-fit: cover;
  opacity: 0.31;
  filter: saturate(0.82) contrast(1.12) brightness(0.7);
  pointer-events: none;
  transform: translate3d(var(--px), var(--py), 0) scale(1.035);
  transition: transform 620ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 360ms ease, filter 360ms ease;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.24) 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.24) 82%, transparent 100%);
}

.system-row:hover .domain-backdrop,
.system-row:has(.row-arrow:focus-visible) .domain-backdrop {
  transform: translate3d(var(--px), var(--py), 0) scale(1.08);
  filter: saturate(1.02) contrast(1.14) brightness(0.78);
}

.xiangxin-backdrop {
  object-position: 50% 60%;
  opacity: 0.34;
}

.teulab-backdrop {
  object-position: 38% 51%;
  opacity: 0.38;
  filter: saturate(0.9) contrast(1.14) brightness(0.76);
}

.field-backdrop {
  object-position: 37% 50%;
  opacity: 0.36;
  filter: saturate(0.82) contrast(1.1) brightness(0.76);
}

.row-index {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: clamp(26px, 2.6vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-family: var(--mono);
  line-height: 1.12;
  white-space: nowrap;
}

.row-index span:first-child {
  color: rgba(94, 231, 247, 0.56);
  font-size: 8px;
  letter-spacing: 0.13em;
}

.row-index span:last-child {
  color: #7f8d98;
  font-size: 9px;
  letter-spacing: 0.11em;
}

.row-title,
.row-copy,
.row-arrow { position: relative; z-index: 2; }

.row-title {
  display: flex;
  min-height: 100%;
  align-items: center;
}

.org-title {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100%;
  padding: 38px clamp(34px, 4vw, 74px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.org-title::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 22%;
  width: 56%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 231, 247, 0.52), rgba(159, 140, 255, 0.28), transparent);
  box-shadow: 0 0 10px rgba(94, 231, 247, 0.22);
  opacity: 0;
  transform: translateY(-50%) scaleX(0.18);
  animation: logo-resolve-line 12.6s cubic-bezier(0.2, 0.72, 0.2, 1) infinite;
}

.system-row:nth-child(2) .org-title::after { animation-delay: 4.2s; }
.system-row:nth-child(3) .org-title::after { animation-delay: 8.4s; }

.org-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(100%, 280px);
  object-fit: contain;
  object-position: center;
  transition: transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1), filter 320ms ease;
}

.system-row:hover .org-logo,
.system-row:has(.row-arrow:focus-visible) .org-logo {
  transform: scale(1.025);
  filter: drop-shadow(0 0 13px rgba(94, 231, 247, 0.2));
}

.xiangxin-logo { height: 36px; }
.teulab-logo { height: 30px; }
.mikatube-logo { height: 30px; }

.row-copy {
  max-width: 46em;
  padding: 38px clamp(22px, 2.2vw, 38px);
  color: var(--muted);
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.82;
  transition: color 240ms ease, transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.system-row:hover .row-copy,
.system-row:has(.row-arrow:focus-visible) .row-copy {
  color: #84939e;
  transform: translateX(3px);
}

.row-copy b {
  display: block;
  margin-bottom: 9px;
  color: #dce6ec;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 580;
  letter-spacing: -0.018em;
  line-height: 1.35;
}

.backed-by {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 11px;
  padding-top: 9px;
  color: #83919b;
  border-top: 1px solid rgba(196, 220, 231, 0.08);
  font-size: clamp(9px, 0.68vw, 10px);
  line-height: 1.6;
}

.backed-by i {
  color: rgba(94, 231, 247, 0.64);
  font-family: var(--mono);
  font-size: inherit;
  font-style: normal;
  letter-spacing: 0.14em;
}

.row-pulse {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 30%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 231, 247, 0.78) 78%, rgba(210, 248, 252, 0.95));
  box-shadow: 0 0 9px rgba(94, 231, 247, 0.38);
  opacity: 0;
  transform: translateX(-110%);
  animation: row-signal 13.2s cubic-bezier(0.2, 0.72, 0.2, 1) infinite;
}

.row-pulse::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(94, 231, 247, 0.82);
}

.system-row:nth-child(2) .row-pulse { animation-delay: 4.4s; }
.system-row:nth-child(3) .row-pulse { animation-delay: 8.8s; }

.row-arrow {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  justify-self: center;
  color: #dce7ed;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  opacity: 0.9;
  cursor: pointer;
  transition: color 180ms ease, opacity 180ms ease, filter 220ms ease;
}

.row-arrow::before,
.row-arrow::after { content: none; }

.row-arrow span {
  position: relative;
  z-index: 2;
  display: block;
  width: 24px;
  height: 24px;
  transform: translate(-1px, 1px);
  transition: transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.row-arrow span::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.row-arrow span::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 2px;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: left center;
}

.row-arrow:hover,
.row-arrow:focus-visible {
  color: var(--signal);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(94, 231, 247, 0.36));
}

.row-arrow:hover span,
.row-arrow:focus-visible span { transform: translate(3px, -3px); }

.row-arrow:focus-visible {
  outline: 1px solid rgba(94, 231, 247, 0.58);
  outline-offset: -5px;
}

.motion-ready .system-row {
  opacity: 0;
  clip-path: inset(0 0 18% 0);
  transform: translateY(24px);
}

.motion-ready .system-row.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

.motion-ready .identity-panel > * {
  opacity: 0;
  transform: translateY(14px);
}

.motion-ready.is-linked .identity-panel > * {
  animation: resolve-in 620ms cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
}

.motion-ready.is-linked .identity-panel > *:nth-child(2) { animation-delay: 80ms; }
.motion-ready.is-linked .identity-panel > *:nth-child(3) { animation-delay: 150ms; }
.motion-ready.is-linked .identity-panel > *:nth-child(4) { animation-delay: 220ms; }

@keyframes orbit-spin { to { transform: rotate(1turn); } }

@keyframes link-core {
  to { transform: scale(1.16); opacity: 0.62; }
}

@keyframes corner-signal {
  0%, 86%, 100% { opacity: 0.42; }
  88% { opacity: 0.86; }
  91% { opacity: 0.24; }
  94% { opacity: 0.68; }
}

@keyframes world-grid-drift {
  to { background-position: 48px 48px, 48px 48px; }
}

@keyframes range-sweep {
  0%, 72% { transform: translateX(-110%); opacity: 0; }
  76% { opacity: 0.62; }
  94%, 100% { transform: translateX(110%); opacity: 0; }
}

@keyframes signal-pulse {
  0%, 100% { opacity: 0.46; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes arrow-ping {
  0% { opacity: 0.78; transform: scale(0.72); }
  78%, 100% { opacity: 0; transform: scale(1.55); }
}

@keyframes resolve-in {
  from { opacity: 0; filter: blur(5px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes chroma-lock {
  0%, 100% { text-shadow: none; transform: translateX(0); }
  18% { text-shadow: -3px 0 var(--signal), 3px 0 var(--violet); transform: translateX(1px); }
  36% { text-shadow: 2px 0 var(--signal), -2px 0 var(--violet); transform: translateX(-1px); }
  58% { text-shadow: -1px 0 var(--signal), 1px 0 var(--violet); }
}

@keyframes name-hologram {
  0%, 100% { filter: none; }
  14% { filter: brightness(1.45) drop-shadow(0 0 9px rgba(94, 231, 247, 0.42)); }
  28% { filter: brightness(0.82); }
  44% { filter: brightness(1.18) drop-shadow(0 0 14px rgba(159, 140, 255, 0.2)); }
}

@keyframes name-scan {
  0% { top: -8%; opacity: 0; transform: scaleX(0.26); }
  12% { opacity: 0.9; }
  82% { opacity: 0.58; }
  100% { top: 108%; opacity: 0; transform: scaleX(1); }
}

@keyframes name-phase-left {
  0%, 100% { transform: translateX(0); filter: none; }
  22% { transform: translateX(-7px); filter: drop-shadow(5px 0 rgba(94, 231, 247, 0.34)); }
  48% { transform: translateX(3px); }
  70% { transform: translateX(-1px); }
}

@keyframes name-phase-right {
  0%, 100% { transform: translateX(0); filter: none; }
  22% { transform: translateX(7px); filter: drop-shadow(-5px 0 rgba(159, 140, 255, 0.3)); }
  48% { transform: translateX(-3px); }
  70% { transform: translateX(1px); }
}

@keyframes portal-frame {
  0% { opacity: 0.2; transform: scale(0.86); }
  38% { opacity: 0.9; border-color: rgba(94, 231, 247, 0.54); }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes portal-corners {
  0%, 100% { opacity: 0.42; filter: none; }
  22% { opacity: 1; filter: drop-shadow(0 0 8px var(--signal)); }
  44% { opacity: 0.16; }
  58% { opacity: 0.92; }
}

@keyframes world-flash {
  0%, 100% { opacity: 0.42; }
  28% { opacity: 0.92; background-color: rgba(94, 231, 247, 0.035); }
}

@keyframes portal-color-lock {
  0%, 100% { filter: none; }
  26% { filter: brightness(1.08) drop-shadow(0 0 22px rgba(94, 231, 247, 0.08)); }
  44% { filter: hue-rotate(8deg); }
}

@keyframes archive-scan {
  0% { opacity: 0; transform: translateX(0); }
  18% { opacity: 0.92; }
  82% { opacity: 0.52; }
  100% { opacity: 0; transform: translateX(236px); }
}

@keyframes archive-materialize {
  0% { opacity: 0; filter: blur(3px) brightness(1.8); transform: translateY(8px) scaleX(0.68); }
  18% { opacity: 0.9; filter: blur(0) brightness(1.35); transform: translateY(-2px) scaleX(1.025); }
  34% { opacity: 0.42; transform: translateY(1px) translateX(-3px) scaleX(0.98); }
  54% { opacity: 1; transform: translateY(0) translateX(2px) scaleX(1.01); }
  72% { opacity: 0.72; transform: translateY(0) translateX(-1px) scaleX(1); }
  100% { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}

@keyframes archive-idle {
  0%, 92%, 100% { background-position: 0 0, 0 0, 0 0, 0 0; box-shadow: 0 0 0 1px rgba(159, 140, 255, 0.08), 0 0 32px rgba(94, 231, 247, 0.13), 12px 14px 30px rgba(0, 0, 0, 0.42); }
  94% { background-position: 0 2px, 2px 0, 0 0, 0 0; box-shadow: -3px 0 0 rgba(94, 231, 247, 0.18), 3px 0 0 rgba(159, 140, 255, 0.12), 0 0 36px rgba(94, 231, 247, 0.18); }
  96% { background-position: 0 -1px, -1px 0, 0 0, 0 0; }
}

@keyframes role-channel {
  0%, 60% { opacity: 0; transform: translateX(0); }
  65% { opacity: 0.78; }
  84% { opacity: 0.24; }
  92%, 100% { opacity: 0; transform: translateX(850%); }
}

@keyframes row-signal {
  0%, 68% { opacity: 0; transform: translateX(-110%); }
  72% { opacity: 0.68; }
  88% { opacity: 0.24; }
  94%, 100% { opacity: 0; transform: translateX(440%); }
}

@keyframes logo-resolve-line {
  0%, 74%, 100% { opacity: 0; transform: translateY(-50%) scaleX(0.18); }
  78% { opacity: 0.48; }
  84% { opacity: 0.14; transform: translateY(-50%) scaleX(1); }
  88% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}

@keyframes trace-sweep {
  0% { left: 3%; opacity: 0; }
  8% { opacity: 0.7; }
  48% { opacity: 0.32; }
  92% { opacity: 0.76; }
  100% { left: 84%; opacity: 0; }
}

@keyframes trace-node-active {
  0%, 100% {
    border-color: rgba(94, 231, 247, 0.48);
    opacity: 0.82;
    box-shadow:
      0 0 0 4px rgba(5, 8, 13, 0.98),
      0 0 9px rgba(94, 231, 247, 0.16);
  }
  50% {
    border-color: rgba(var(--node-rgb), 0.92);
    opacity: 1;
    box-shadow:
      0 0 0 4px rgba(5, 8, 13, 0.98),
      0 0 0 6px rgba(var(--node-rgb), 0.07),
      0 0 16px rgba(var(--node-rgb), 0.56);
  }
}

@keyframes signal-trace {
  to { stroke-dashoffset: -28; }
}

@keyframes signal-beacon {
  0%, 100% { opacity: 0.34; box-shadow: 0 0 0 rgba(94, 231, 247, 0); }
  50% { opacity: 1; box-shadow: 0 0 9px rgba(94, 231, 247, 0.72); }
}

@keyframes signal-lock {
  0%, 100% { opacity: 0.2; transform: scaleX(0.28); }
  48%, 58% { opacity: 0.86; transform: scaleX(1); }
}

@media (max-width: 1180px) {
  .profile { grid-template-columns: minmax(360px, 0.68fr) minmax(560px, 1.32fr); }
  .identity-panel { padding: 32px; }
  h1 span { display: block; }
  h1 span + span { margin-top: 0.12em; }
  .system-row {
    --row-tail: clamp(14px, 1.5vw, 22px);
    grid-template-columns: minmax(210px, 37%) minmax(300px, 1fr) 66px var(--row-tail);
  }
  .org-title { padding-inline: 34px; }
  .row-copy { padding-inline: 24px; }
}

@media (max-width: 940px) {
  .profile { grid-template-columns: 1fr; }
  .identity-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }
  .avatar-stage { grid-row: auto; }
  .name-block { align-self: center; }
  h1 { font-size: clamp(70px, 12vw, 112px); }
  h1 span { display: inline; }
  h1 span + span { margin: 0; }
  .role-stack { align-self: center; }
  .provenance { grid-column: 1; }
  .systems { min-height: 840px; }
}

@media (max-width: 660px) {
  .identity-panel {
    display: block;
    padding: 28px 20px 24px;
  }
  .signal-console {
    top: 10px;
    right: calc(50% - 127px);
    width: 118px;
    height: 40px;
    grid-template-columns: 8px auto 36px;
    padding-inline: 8px;
    column-gap: 7px;
  }
  .signal-waveform { width: 36px; }

  .signal-console:hover {
    color: rgba(151, 171, 183, 0.58);
    border-color: rgba(116, 160, 175, 0.15);
    background:
      linear-gradient(90deg, rgba(94, 231, 247, 0.028) 1px, transparent 1px) 0 0 / 9px 100%,
      rgba(4, 13, 18, 0.86);
    box-shadow: inset 0 0 22px rgba(94, 231, 247, 0.025);
  }

  .signal-console[aria-pressed="true"]:hover {
    color: rgba(94, 231, 247, 0.92);
    border-color: rgba(94, 231, 247, 0.34);
    background:
      linear-gradient(90deg, rgba(94, 231, 247, 0.044) 1px, transparent 1px) 0 0 / 9px 100%,
      rgba(6, 23, 30, 0.9);
    box-shadow: inset 0 0 24px rgba(94, 231, 247, 0.06), 0 0 22px rgba(94, 231, 247, 0.09);
  }
  .avatar-stage { width: min(100%, 270px); min-height: 230px; margin: 0 auto 30px; }
  .avatar-node { width: 166px; }
  h1 { font-size: clamp(62px, 20vw, 98px); }
  .role-stack { margin-top: 34px; padding: 0; }
  .role-stack p { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; min-height: 68px; padding: 16px 0; }
  .role-stack small { grid-column: 2; margin-top: -7px; text-align: left; }
  .provenance { margin-top: 28px; }
  .provenance ol { gap: 8px; }
  .provenance [data-archive-node] { pointer-events: none; animation: none !important; }
  .archive-card { display: none !important; }

  .systems { min-height: 0; }
  .system-index { grid-template-rows: repeat(3, auto); min-height: 0; }
  .system-row {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 15px;
    min-height: 0;
    padding: 64px 20px 27px;
  }
  .row-index { top: 22px; left: 20px; }
  .row-title { grid-column: 1; min-height: 46px; padding: 0; }
  .row-copy { grid-column: 1; padding: 0; }
  .row-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .row-copy { max-width: 34rem; }
  .org-logo { max-width: 210px; }
  .org-title { min-height: 46px; align-items: flex-start; justify-content: flex-start; transform: none; }
  .org-logo { object-position: left center; }
  .xiangxin-logo { height: 36px; }
  .teulab-logo { height: 30px; }
  .mikatube-logo { height: 30px; }

  .domain-backdrop {
    left: 0;
    width: 100%;
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 42%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 42%, transparent 100%);
  }
  .teulab-backdrop { opacity: 0.24; }
  .field-backdrop { opacity: 0.21; }

}

@media (max-width: 660px), (hover: none), (pointer: coarse) {
  .system-row::after { display: none; }

  .domain-backdrop,
  .system-row:hover .domain-backdrop,
  .system-row:has(.row-arrow:focus-visible) .domain-backdrop {
    transform: scale(1.04);
  }

  .system-row:hover .domain-backdrop {
    filter: saturate(0.82) contrast(1.12) brightness(0.7);
  }

  .system-row:hover .teulab-backdrop {
    filter: saturate(0.9) contrast(1.14) brightness(0.76);
  }

  .system-row:hover .field-backdrop {
    filter: saturate(0.82) contrast(1.1) brightness(0.76);
  }

  .system-row:has(.row-arrow:focus-visible) .domain-backdrop {
    filter: saturate(0.82) contrast(1.12) brightness(0.7);
  }

  .system-row:has(.row-arrow:focus-visible) .teulab-backdrop {
    filter: saturate(0.9) contrast(1.14) brightness(0.76);
  }

  .system-row:has(.row-arrow:focus-visible) .field-backdrop {
    filter: saturate(0.82) contrast(1.1) brightness(0.76);
  }

  .portal-status { display: none; }

  .avatar-stage:hover .avatar-node { filter: none; }

  .role-stack p:hover {
    background: transparent;
  }

  .role-stack p:hover::before { opacity: 1; }

  .role-stack p:hover::after {
    opacity: 0;
    animation: none;
  }

  .role-stack p:hover > span {
    color: rgba(133, 151, 163, 0.72);
  }

  .role-stack p:hover strong {
    color: inherit;
    transform: none;
  }

  .role-stack p:hover small {
    color: rgba(128, 145, 157, 0.78);
    letter-spacing: 0.14em;
  }

  .provenance:hover { opacity: 0.82; }

  .provenance li:hover { transform: none; }
  .provenance li:hover::before { opacity: 0; }

  .provenance li:not(.is-active):hover::after {
    border-color: rgba(94, 231, 247, 0.48);
    box-shadow: 0 0 0 4px rgba(5, 8, 13, 0.98), 0 0 9px rgba(94, 231, 247, 0.16);
    opacity: 0.82;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .provenance li.is-active:hover::after {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .provenance li:hover time,
  .provenance li:hover .trace-time { color: #52606a; }

  .provenance li:hover strong { color: #85919a; }

  .provenance [data-archive-node] { pointer-events: none; animation: none !important; }
  .archive-card { display: none !important; }

  .system-row:hover::before {
    opacity: 0;
    transform: translateX(-9px);
    background-position: 0 0, 0 0, 0 0;
  }

  .system-row:has(.row-arrow:focus-visible)::before {
    opacity: 0;
    transform: translateX(-9px);
    background-position: 0 0, 0 0, 0 0;
  }

  .system-row:hover::after {
    display: none;
    opacity: 0;
  }


  .system-row:has(.row-arrow:focus-visible)::after {
    display: none;
    opacity: 0;
  }

  .system-row:hover .org-logo {
    transform: none;
    filter: none;
  }

  .system-row:has(.row-arrow:focus-visible) .org-logo {
    transform: none;
    filter: none;
  }

  .system-row:hover .row-copy {
    color: var(--muted);
    transform: none;
  }

  .system-row:has(.row-arrow:focus-visible) .row-copy {
    color: var(--muted);
    transform: none;
  }

  .system-row:hover .row-arrow {
    color: #dce7ed;
    opacity: 0.9;
    filter: none;
  }

  .system-row:hover .row-arrow span {
    transform: translate(-1px, 1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .oasis-field,
  .oasis-link { display: none !important; }

  .motion-ready .system-row,
  .motion-ready .identity-panel > * {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
  }

  .domain-backdrop { transform: scale(1.035) !important; }
}

.not-found {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  min-height: 100svh;
  border: 1px solid var(--line-strong);
}

.not-found > section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 64px);
}

.not-found > section:first-child { border-right: 1px solid var(--line-strong); }
.not-found > section:last-child { background: linear-gradient(135deg, var(--signal-dim), transparent 62%); }
.not-found strong { color: transparent; font-size: clamp(150px, 26vw, 480px); line-height: 0.72; letter-spacing: -0.1em; -webkit-text-stroke: 1px rgba(94, 231, 247, 0.42); }
.not-found p { margin: 0; font-size: clamp(28px, 4vw, 58px); font-weight: 540; letter-spacing: -0.05em; }
.not-found > section:last-child a { align-self: flex-start; padding-bottom: 6px; color: var(--signal); border-bottom: 1px solid currentColor; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; }

@media (max-width: 660px) {
  .not-found { grid-template-columns: 1fr; grid-template-rows: 1fr 0.65fr; }
  .not-found > section:first-child { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .not-found strong { font-size: min(48vw, 250px); }
}