:root {
  --pa-blue: hsl(var(--primary));
  --pa-line: hsl(var(--border));
  --pa-ink: hsl(var(--foreground));
  --pa-muted: hsl(var(--muted-foreground));
}

html { scroll-behavior: smooth; }

.pa-mono,
.pa-annot,
.pa-seq,
.pa-node-k,
.pa-checksum {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pa-mono { color: var(--pa-muted); font-size: 11px; line-height: 1.4; }

.pa-hero-net {
  position: absolute;
  inset: 72px 0 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .82;
}

.pa-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 52%, #000 0, transparent 74%);
}

.pa-net-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pa-net-path { fill: none; stroke: rgba(37, 99, 235, .12); stroke-width: 1; }
.pa-net-path-lit {
  fill: none;
  stroke: rgba(37, 99, 235, .42);
  stroke-width: 1.25;
  stroke-dasharray: 4 13;
  animation: pa-drift 18s linear infinite;
}
.pa-net-drift-slow .pa-net-path-lit { animation-duration: 27s; animation-direction: reverse; }
.pa-net-node { fill: rgba(37, 99, 235, .62); }
.pa-net-core { fill: none; stroke: rgba(37, 99, 235, .28); stroke-width: 1; }

@keyframes pa-drift { to { stroke-dashoffset: -170; } }

.pa-hero-vignette {
  position: absolute;
  inset: 72px 0 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 54%, rgba(255,255,255,.15), hsl(var(--background)) 74%);
  opacity: .83;
}

.pa-annot {
  position: absolute;
  color: rgba(71, 85, 105, .58);
  font-size: 9px;
}

.pa-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s ease var(--pa-delay, 0ms), transform .65s ease var(--pa-delay, 0ms);
}
.pa-reveal.is-visible { opacity: 1; transform: translateY(0); }

.pa-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--pa-line);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(10px);
}

.pa-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.1);
}

.pa-card-viz { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pa-card-viz:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.28); box-shadow: 0 18px 44px rgba(15,23,42,.06); }
.pa-viz { display: block; width: 100%; height: 76px; margin-bottom: 22px; overflow: visible; }
.pa-viz .s { fill: none; stroke: rgba(71,85,105,.35); stroke-width: 1; }
.pa-viz .b { fill: none; stroke: rgb(37,99,235); stroke-width: 1.4; }
.pa-viz .bf { fill: rgb(37,99,235); }
.pa-viz .bl { fill: rgba(37,99,235,.12); stroke: rgba(37,99,235,.36); stroke-width: 1; }
.pa-viz .t { fill: rgb(100,116,139); font: 7px ui-monospace, monospace; letter-spacing: .08em; }
.pa-dash { stroke-dasharray: 5 6; animation: pa-drift 8s linear infinite; }

#pa-flow { position: relative; }
.pa-lane { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 12px; }
.pa-lane-l { color: var(--pa-ink); font-size: 12px; font-weight: 700; }
.pa-lane-r { height: 1px; background: linear-gradient(90deg, rgba(37,99,235,.42), rgba(37,99,235,.06)); }
.pa-flow-row { display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr); align-items: stretch; gap: 10px; }
.pa-flow-row-2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 690px; margin-inline: auto; }
.pa-node {
  position: relative;
  min-height: 132px;
  padding: 21px;
  text-align: left;
  border: 1px solid var(--pa-line);
  border-radius: 12px;
  background: hsl(var(--card));
  color: var(--pa-ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pa-node:hover,
.pa-node:focus-visible,
.pa-node.is-active { outline: none; border-color: rgba(37,99,235,.5); box-shadow: 0 12px 32px rgba(37,99,235,.08); transform: translateY(-2px); }
.pa-node.is-active::after { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 3px; border-radius: 12px 0 0 12px; background: rgb(37,99,235); }
.pa-seq { position: absolute; top: 17px; right: 18px; color: rgba(100,116,139,.65); font-size: 10px; }
.pa-node-k { display: block; color: rgb(37,99,235); font-size: 9px; margin-bottom: 14px; }
.pa-node-t { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.pa-node-s { display: block; color: var(--pa-muted); font-size: 12px; line-height: 1.5; }
.pa-arrow { position: relative; align-self: center; height: 1px; background: rgba(37,99,235,.32); }
.pa-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid rgb(37,99,235); border-right: 1px solid rgb(37,99,235); transform: rotate(45deg); }
.pa-flow-merge { width: 1px; height: 38px; margin: 0 auto; background: linear-gradient(rgba(37,99,235,.18), rgba(37,99,235,.48)); }
.pa-node-wide { display: block; width: min(100%, 440px); min-height: 116px; margin-inline: auto; }
.pa-flow-split { position: relative; width: 55%; height: 42px; margin-inline: auto; border-top: 1px solid rgba(37,99,235,.35); }
.pa-flow-split::before,
.pa-flow-split::after { content: ""; position: absolute; top: 0; width: 1px; height: 42px; background: rgba(37,99,235,.35); }
.pa-flow-split::before { left: 0; }
.pa-flow-split::after { right: 0; }
.pa-flow-cap { display: flex; justify-content: space-between; gap: 18px; padding: 12px 2px 0; }

.pa-field { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; padding: 15px 0; border-bottom: 1px solid var(--pa-line); }
.pa-field:first-of-type { padding-top: 0; }
.pa-field > span { grid-column: 1 / -1; }
.pa-input { width: 150px; height: 38px; padding: 0 11px; border: 1px solid var(--pa-line); border-radius: 8px; background: hsl(var(--background)); color: var(--pa-ink); font: 600 13px ui-monospace, monospace; text-align: right; }
.pa-input:focus { outline: 2px solid rgba(37,99,235,.14); border-color: rgba(37,99,235,.55); }
.pa-rows { display: grid; }
.pa-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 13px 0; border-bottom: 1px solid var(--pa-line); }
.pa-row-total { margin-top: 5px; padding: 17px 14px; border: 1px solid rgba(37,99,235,.2); border-radius: 9px; background: rgba(37,99,235,.045); }
.pa-chart { display: block; width: 100%; height: 96px; overflow: visible; }
.pa-chart .g { stroke: rgba(100,116,139,.14); stroke-width: 1; }
.pa-chart .ln { fill: none; stroke: rgb(37,99,235); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pa-chart .ar { fill: rgba(37,99,235,.08); }

.pa-tier-track { position: relative; height: 1px; margin: 0 12.5% 28px; background: linear-gradient(90deg, rgba(100,116,139,.18), rgba(37,99,235,.5)); }
.pa-tier-track span { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--background)); border: 1px solid rgba(100,116,139,.35); transform: translate(-50%,-50%); }
.pa-tier-track span.on { border-color: rgb(37,99,235); background: rgb(37,99,235); box-shadow: 0 0 0 5px rgba(37,99,235,.08); }
.pa-tier { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pa-tier:hover,
.pa-tier:focus-visible { outline: none; transform: translateY(-4px); border-color: rgba(37,99,235,.38); box-shadow: 0 18px 44px rgba(15,23,42,.06); }
.pa-bar { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(100,116,139,.13); }
.pa-bar i { display: block; height: 100%; border-radius: inherit; background: rgb(37,99,235); }

.pa-report { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 19px 22px; border-bottom: 1px solid var(--pa-line); }
.pa-report:last-child { border-bottom: 0; }
.pa-checksum { color: rgba(100,116,139,.72); font-size: 9px; }

.pa-contract {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 40px rgba(15,23,42,.055);
  text-align: left;
  backdrop-filter: blur(10px);
}
.pa-contract-heading,
.pa-contract-address-row,
.pa-contract-links { display: flex; align-items: center; }
.pa-contract-heading { justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.pa-contract-live { display: inline-flex; align-items: center; gap: 6px; color: rgb(22,163,74); font: 700 10px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.pa-contract-live span { width: 6px; height: 6px; border-radius: 50%; background: rgb(34,197,94); box-shadow: 0 0 0 4px rgba(34,197,94,.1); }
.pa-contract-address-row { gap: 10px; }
.pa-contract-address-row code { min-width: 0; flex: 1; overflow: hidden; padding: 12px 14px; border: 1px solid var(--pa-line); border-radius: 8px; background: rgba(248,250,252,.9); color: var(--pa-ink); font: 600 12px/1.25 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.pa-contract-address-row button { flex: 0 0 auto; height: 41px; padding: 0 15px; border: 1px solid rgb(37,99,235); border-radius: 8px; background: rgb(37,99,235); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.pa-contract-address-row button:hover { background: rgb(29,78,216); }
.pa-contract-address-row button:active { transform: scale(.97); }
.pa-contract-links { justify-content: flex-end; gap: 8px; margin-top: 10px; color: var(--pa-muted); font-size: 11px; }
.pa-contract-links a { color: rgb(37,99,235); font-weight: 600; }
.pa-contract-links a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .pa-hero-net { opacity: .46; }
  .pa-annot { display: none; }
  .pa-flow-row,
  .pa-flow-row-2 { grid-template-columns: 1fr; gap: 10px; }
  .pa-arrow { width: 1px; height: 24px; margin-inline: auto; background: rgba(37,99,235,.32); }
  .pa-arrow::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }
  .pa-flow-split { width: 1px; height: 24px; border: 0; background: rgba(37,99,235,.35); }
  .pa-flow-split::before,
  .pa-flow-split::after { display: none; }
  .pa-flow-cap { flex-direction: column; align-items: center; }
  .pa-field { grid-template-columns: 1fr; }
  .pa-input { width: 100%; text-align: left; }
  .pa-report { grid-template-columns: 42px 1fr; align-items: start; }
  .pa-report > :last-child { grid-column: 2; justify-self: start; }
  .pa-tier-track { display: none; }
  .pa-contract { padding: 14px; }
  .pa-contract-address-row { align-items: stretch; flex-direction: column; }
  .pa-contract-address-row code { white-space: normal; overflow-wrap: anywhere; }
  .pa-contract-address-row button { width: 100%; }
  .pa-contract-links { justify-content: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pa-reveal { opacity: 1; transform: none; transition: none; }
  .pa-net-path-lit,
  .pa-dash { animation: none; }
}