{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bitcoin-motion",
  "title": "Bitcoin motion",
  "description": "Accessible confirmation, mempool, proof-of-work, UTXO, and Merkle motion primitives.",
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/bitcoin-core",
    "dennisonbertram/bitcoin-ui/bitcoin-theme"
  ],
  "files": [
    {
      "path": "components/bitcoin/bitcoin-motion.tsx",
      "content": "\"use client\";\n\nimport {\n  useId,\n  useState,\n  type ComponentProps,\n  type CSSProperties,\n} from \"react\";\n\nimport {\n  clampPercent,\n  formatFeeRate,\n  formatSats,\n  formatWeight,\n  truncateMiddle,\n  type SatoshiValue,\n} from \"@/lib/bitcoin\";\nimport { componentClasses } from \"@/lib/utils\";\n\nimport styles from \"./bitcoin-motion.module.css\";\nimport type { BitcoinVisualProps } from \"./shared\";\n\ntype MotionProps = BitcoinVisualProps & {\n  /** Pauses motion without changing the represented state. @default false */\n  paused?: boolean;\n};\n\ntype MotionStyle = CSSProperties & {\n  \"--motion-column\"?: number;\n  \"--motion-index\"?: number;\n  \"--motion-lane\"?: number;\n};\n\nexport type AnimatedConfirmationsProps = Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n> &\n  MotionProps & {\n    confirmations: number;\n    /** Confirmation target represented by the relay. @default 6 */\n    target?: number;\n  };\n\nexport function AnimatedConfirmations({\n  confirmations,\n  target = 6,\n  paused,\n  unstyled,\n  className,\n  ...props\n}: AnimatedConfirmationsProps) {\n  const safeTarget = Math.max(1, Math.floor(target));\n  const safeConfirmations = Math.max(0, Math.floor(confirmations));\n  const boundedConfirmations = Math.min(safeConfirmations, safeTarget);\n  const remaining = Math.max(0, safeTarget - boundedConfirmations);\n  const complete = boundedConfirmations >= safeTarget;\n  const valueText = complete\n    ? `${safeConfirmations} confirmations, finality target reached`\n    : `${boundedConfirmations} of ${safeTarget} confirmations`;\n\n  return (\n    <div\n      data-slot=\"animated-confirmations\"\n      data-state={complete ? \"complete\" : \"confirming\"}\n      data-paused={paused || undefined}\n      data-unstyled={unstyled || undefined}\n      className={componentClasses(\n        unstyled,\n        styles.confirmations,\n        className,\n      )}\n      {...props}\n    >\n      <header className={componentClasses(unstyled, styles.motionHeader)}>\n        <span>Confirmation relay</span>\n        <output aria-live=\"polite\">\n          {boundedConfirmations} / {safeTarget}\n        </output>\n      </header>\n      <div\n        data-slot=\"animated-confirmations-progress\"\n        role=\"progressbar\"\n        aria-label=\"Transaction confirmation relay\"\n        aria-valuemin={0}\n        aria-valuemax={safeTarget}\n        aria-valuenow={boundedConfirmations}\n        aria-valuetext={valueText}\n        className={componentClasses(unstyled, styles.confirmationProgress)}\n      >\n        <ol\n          className={componentClasses(unstyled, styles.confirmationRail)}\n          aria-hidden=\"true\"\n        >\n          {Array.from({ length: safeTarget }, (_, index) => {\n            const confirmed = index < boundedConfirmations;\n\n            return (\n              <li\n                key={index}\n                data-state={confirmed ? \"confirmed\" : \"pending\"}\n                className={componentClasses(\n                  unstyled,\n                  styles.confirmationNode,\n                )}\n                style={{ \"--motion-index\": index } as MotionStyle}\n              >\n                <span>{index + 1}</span>\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n      <p className={componentClasses(unstyled, styles.motionCaption)}>\n        {complete\n          ? \"Finality target reached.\"\n          : `${remaining} ${remaining === 1 ? \"block\" : \"blocks\"} until the display target.`}\n      </p>\n    </div>\n  );\n}\n\nexport type CandidateBlockMetadata = {\n  /** Label shown at the top of the metadata surface. @default \"Candidate block\" */\n  label?: string;\n  /** Current assembly state. @default \"Assembling\" */\n  status?: string;\n  /** Transactions currently selected for the candidate block. */\n  transactionCount?: number;\n  /** Candidate block weight in weight units. */\n  weight?: number;\n  /** Aggregate transaction fees selected for the candidate block. */\n  feeTotal?: SatoshiValue;\n};\n\nexport type MempoolPacketMetadata = {\n  /** Optional sample label. @default \"Transaction sample\" */\n  label?: string;\n  /** Caller-supplied transaction id for this sample. */\n  txid?: string;\n  /** Fee rate in sat/vB. */\n  feeRate?: number;\n  /** Virtual transaction size in vbytes. */\n  vsize?: number;\n  /** Queue state. @default \"Waiting\" */\n  status?: string;\n};\n\nexport type MempoolFlowProps = Omit<ComponentProps<\"figure\">, \"children\"> &\n  MotionProps & {\n    transactionCount: number;\n    /** Normalized pressure from 0 to 1. */\n    pressure: number;\n    /** Number of visual packets. Clamped from 8 to 32. @default 20 */\n    packetCount?: number;\n    /**\n     * Transaction samples represented across the animated field and exposed\n     * through a keyboard- and touch-accessible inspector.\n     */\n    packetSamples?: readonly MempoolPacketMetadata[];\n    /** Optional caller-supplied metadata for the candidate block preview. */\n    candidateBlock?: CandidateBlockMetadata;\n  };\n\nexport function MempoolFlow({\n  transactionCount,\n  pressure,\n  packetCount = 20,\n  packetSamples = [],\n  candidateBlock,\n  paused,\n  unstyled,\n  className,\n  ...props\n}: MempoolFlowProps) {\n  const metadataId = useId();\n  const sampleInspectorId = useId();\n  const [metadataOpen, setMetadataOpen] = useState(false);\n  const [selectedSampleIndex, setSelectedSampleIndex] = useState(0);\n  const safeCount = Math.max(0, Math.floor(transactionCount));\n  const normalizedPressure = clampPercent(pressure * 100);\n  const visualPackets = Math.min(32, Math.max(8, Math.floor(packetCount)));\n  const filledSlots = Math.max(1, Math.round(normalizedPressure / 25));\n  const metadataLabel = candidateBlock?.label ?? \"Candidate block\";\n  const metadataStatus = candidateBlock?.status ?? \"Assembling\";\n  const activeSample =\n    packetSamples.length > 0\n      ? packetSamples[\n          Math.min(selectedSampleIndex, packetSamples.length - 1)\n        ]\n      : undefined;\n  const candidateTransactionCount =\n    candidateBlock?.transactionCount === undefined\n      ? undefined\n      : Math.max(0, Math.floor(candidateBlock.transactionCount));\n  const label = `${new Intl.NumberFormat(\"en-US\").format(\n    safeCount,\n  )} transactions at ${Math.round(normalizedPressure)} percent pressure, flowing toward the next block`;\n\n  return (\n    <figure\n      data-slot=\"mempool-flow\"\n      data-state={\n        normalizedPressure >= 75\n          ? \"high\"\n          : normalizedPressure >= 40\n            ? \"medium\"\n            : \"low\"\n      }\n      data-paused={paused || undefined}\n      data-unstyled={unstyled || undefined}\n      role=\"group\"\n      aria-label={label}\n      className={componentClasses(unstyled, styles.mempool, className)}\n      {...props}\n    >\n      <figcaption\n        className={componentClasses(unstyled, styles.motionHeader)}\n      >\n        <span>\n          Mempool pressure\n          {packetSamples.length > 0 ? (\n            <small className={componentClasses(unstyled, styles.packetHint)}>\n              Inspect samples below\n            </small>\n          ) : null}\n        </span>\n        <span>{Math.round(normalizedPressure)}%</span>\n      </figcaption>\n      <div className={componentClasses(unstyled, styles.mempoolField)}>\n        <div\n          className={componentClasses(unstyled, styles.packetField)}\n          aria-hidden=\"true\"\n        >\n          {Array.from({ length: visualPackets }, (_, index) => {\n            const lane = index % 4;\n            const sample =\n              packetSamples.length > 0\n                ? packetSamples[index % packetSamples.length]\n                : undefined;\n\n            return (\n              <span\n                key={index}\n                data-slot=\"mempool-packet\"\n                data-lane={lane}\n                data-sample={sample ? (index % packetSamples.length) + 1 : undefined}\n                className={componentClasses(unstyled, styles.mempoolPacket)}\n                style={\n                  {\n                    \"--motion-column\": index % 5,\n                    \"--motion-index\": index,\n                    \"--motion-lane\": lane,\n                  } as MotionStyle\n                }\n              >\n                <i />\n                <i />\n                <span\n                  data-slot=\"mempool-packet-metadata\"\n                  hidden={unstyled || undefined}\n                  className={componentClasses(unstyled, styles.packetTooltip)}\n                >\n                  <strong>{sample?.label ?? \"Transaction packet\"}</strong>\n                  <span>\n                    <small>Visual packet</small>\n                    <b>\n                      {index + 1} / {visualPackets}\n                    </b>\n                  </span>\n                  <span>\n                    <small>Visual lane</small>\n                    <b>{lane + 1} / 4</b>\n                  </span>\n                  {sample?.txid ? (\n                    <span>\n                      <small>Txid</small>\n                      <b title={sample.txid}>\n                        {truncateMiddle(sample.txid, 5, 5)}\n                      </b>\n                    </span>\n                  ) : null}\n                  {sample?.feeRate !== undefined ? (\n                    <span>\n                      <small>Fee rate</small>\n                      <b>{formatFeeRate(sample.feeRate)}</b>\n                    </span>\n                  ) : null}\n                  {sample?.vsize !== undefined ? (\n                    <span>\n                      <small>Virtual size</small>\n                      <b>{Math.max(0, Math.round(sample.vsize))} vB</b>\n                    </span>\n                  ) : null}\n                  <span>\n                    <small>State</small>\n                    <b>{sample?.status ?? \"Waiting\"}</b>\n                  </span>\n                </span>\n              </span>\n            );\n          })}\n        </div>\n        <div\n          data-slot=\"candidate-block\"\n          data-open={metadataOpen || undefined}\n          className={componentClasses(unstyled, styles.blockAperture)}\n        >\n          <button\n            type=\"button\"\n            data-slot=\"candidate-block-trigger\"\n            aria-controls={metadataId}\n            aria-expanded={metadataOpen}\n            className={componentClasses(unstyled, styles.blockSummary)}\n            onClick={() => setMetadataOpen((open) => !open)}\n            onKeyDown={(event) => {\n              if (event.key === \"Escape\") {\n                setMetadataOpen(false);\n              }\n            }}\n          >\n            <span\n              className={componentClasses(unstyled, styles.blockLabel)}\n            >\n              <span>Next block</span>\n              <small>Inspect</small>\n            </span>\n            <span\n              className={componentClasses(unstyled, styles.blockSlots)}\n              aria-hidden=\"true\"\n            >\n              {Array.from({ length: 4 }, (_, index) => (\n                <i\n                  key={index}\n                  data-slot=\"candidate-block-slot\"\n                  data-state={index < filledSlots ? \"filled\" : \"empty\"}\n                />\n              ))}\n            </span>\n          </button>\n          <aside\n            id={metadataId}\n            data-slot=\"candidate-block-metadata\"\n            aria-label={`${metadataLabel} metadata`}\n            aria-hidden={!metadataOpen}\n            hidden={unstyled && !metadataOpen ? true : undefined}\n            className={componentClasses(unstyled, styles.blockTooltip)}\n          >\n            <header\n              className={componentClasses(\n                unstyled,\n                styles.blockTooltipHeader,\n              )}\n            >\n              <strong>{metadataLabel}</strong>\n              <span>{metadataStatus}</span>\n            </header>\n            <dl\n              className={componentClasses(\n                unstyled,\n                styles.blockMetadata,\n              )}\n            >\n              {candidateTransactionCount !== undefined ? (\n                <div>\n                  <dt>Transactions</dt>\n                  <dd>\n                    {new Intl.NumberFormat(\"en-US\").format(\n                      candidateTransactionCount,\n                    )}\n                  </dd>\n                </div>\n              ) : null}\n              {candidateBlock?.weight !== undefined ? (\n                <div>\n                  <dt>Weight</dt>\n                  <dd>{formatWeight(candidateBlock.weight)}</dd>\n                </div>\n              ) : null}\n              {candidateBlock?.feeTotal !== undefined ? (\n                <div>\n                  <dt>Fees</dt>\n                  <dd>{formatSats(candidateBlock.feeTotal)} sat</dd>\n                </div>\n              ) : null}\n              <div>\n                <dt>Pressure</dt>\n                <dd>{Math.round(normalizedPressure)}%</dd>\n              </div>\n              <div>\n                <dt>Capacity signal</dt>\n                <dd>{filledSlots} / 4 slots</dd>\n              </div>\n            </dl>\n          </aside>\n        </div>\n      </div>\n      {activeSample ? (\n        <section\n          data-slot=\"mempool-sample-inspector\"\n          aria-labelledby={`${sampleInspectorId}-label`}\n          className={componentClasses(unstyled, styles.sampleInspector)}\n        >\n          <header className={componentClasses(unstyled, styles.sampleHeader)}>\n            <span id={`${sampleInspectorId}-label`}>Transaction samples</span>\n            <small>Keyboard and touch accessible</small>\n          </header>\n          <div className={componentClasses(unstyled, styles.sampleLayout)}>\n            <div\n              className={componentClasses(unstyled, styles.sampleButtons)}\n              aria-label=\"Choose a transaction sample\"\n            >\n              {packetSamples.map((sample, index) => {\n                const selected =\n                  index ===\n                  Math.min(selectedSampleIndex, packetSamples.length - 1);\n\n                return (\n                  <button\n                    key={`${sample.txid ?? sample.label ?? \"sample\"}-${index}`}\n                    type=\"button\"\n                    data-slot=\"mempool-sample-trigger\"\n                    data-state={selected ? \"selected\" : \"idle\"}\n                    aria-pressed={selected}\n                    onClick={() => setSelectedSampleIndex(index)}\n                  >\n                    <span>Sample {index + 1}</span>\n                    <code title={sample.txid}>\n                      {sample.txid\n                        ? truncateMiddle(sample.txid, 5, 5)\n                        : \"No txid\"}\n                    </code>\n                  </button>\n                );\n              })}\n            </div>\n            <aside\n              data-slot=\"mempool-sample-metadata\"\n              aria-label={`${activeSample.label ?? \"Transaction sample\"} metadata`}\n              aria-live=\"polite\"\n              className={componentClasses(unstyled, styles.sampleMetadata)}\n            >\n              <header>\n                <strong>\n                  {activeSample.label ?? \"Transaction sample\"}\n                </strong>\n                <span>{activeSample.status ?? \"Waiting\"}</span>\n              </header>\n              <dl>\n                {activeSample.txid ? (\n                  <div>\n                    <dt>Txid</dt>\n                    <dd title={activeSample.txid}>\n                      {truncateMiddle(activeSample.txid, 8, 8)}\n                    </dd>\n                  </div>\n                ) : null}\n                {activeSample.feeRate !== undefined ? (\n                  <div>\n                    <dt>Fee rate</dt>\n                    <dd>{formatFeeRate(activeSample.feeRate)}</dd>\n                  </div>\n                ) : null}\n                {activeSample.vsize !== undefined ? (\n                  <div>\n                    <dt>Virtual size</dt>\n                    <dd>\n                      {Math.max(0, Math.round(activeSample.vsize))} vB\n                    </dd>\n                  </div>\n                ) : null}\n                <div>\n                  <dt>State</dt>\n                  <dd>{activeSample.status ?? \"Waiting\"}</dd>\n                </div>\n              </dl>\n            </aside>\n          </div>\n        </section>\n      ) : null}\n      <div className={componentClasses(unstyled, styles.mempoolScale)}>\n        <span>Waiting</span>\n        <span>Fee pressure</span>\n        <span>Candidate block</span>\n      </div>\n    </figure>\n  );\n}\n\nexport type BitcoinSpinnerVariant = \"hash\" | \"blocks\" | \"sync\";\n\nexport type BitcoinSpinnerProps = Omit<ComponentProps<\"div\">, \"children\"> &\n  MotionProps & {\n    /** Semantic loader treatment. @default \"hash\" */\n    variant?: BitcoinSpinnerVariant;\n    /** Accessible and optionally visible status label. */\n    label?: string;\n    /** Shows the status label next to the loader. @default false */\n    showLabel?: boolean;\n    /** Visual size. @default \"md\" */\n    size?: \"sm\" | \"md\" | \"lg\";\n  };\n\nexport function BitcoinSpinner({\n  variant = \"hash\",\n  label = \"Verifying Bitcoin data\",\n  showLabel = false,\n  size = \"md\",\n  paused,\n  unstyled,\n  className,\n  ...props\n}: BitcoinSpinnerProps) {\n  return (\n    <div\n      data-slot=\"bitcoin-spinner\"\n      data-variant={variant}\n      data-size={size}\n      data-state={paused ? \"paused\" : \"loading\"}\n      data-paused={paused || undefined}\n      data-unstyled={unstyled || undefined}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={label}\n      className={componentClasses(unstyled, styles.spinner, className)}\n      {...props}\n    >\n      <span\n        className={componentClasses(unstyled, styles.spinnerVisual)}\n        aria-hidden=\"true\"\n      >\n        {variant === \"blocks\" ? (\n          <span className={componentClasses(unstyled, styles.blockSpinner)}>\n            <i />\n            <i />\n            <i />\n          </span>\n        ) : (\n          <svg viewBox=\"0 0 48 48\" focusable=\"false\">\n            <circle cx=\"24\" cy=\"24\" r=\"17\" />\n            <circle cx=\"24\" cy=\"24\" r=\"10\" />\n            {variant === \"hash\" ? <path d=\"M17 24h14M20 18l-2 12M30 18l-2 12\" /> : null}\n          </svg>\n        )}\n      </span>\n      {showLabel ? (\n        <span className={componentClasses(unstyled, styles.spinnerLabel)}>\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport type UtxoMotionNode = {\n  id: string;\n  label: string;\n  value: bigint | number | string;\n};\n\nexport type UtxoMerkleFlowProps = Omit<\n  ComponentProps<\"section\">,\n  \"children\"\n> &\n  MotionProps & {\n    inputs: UtxoMotionNode[];\n    outputs: UtxoMotionNode[];\n    transactionId: string;\n    merkleRoot: string;\n    /** Number of sibling hashes in the proof path. @default 3 */\n    proofDepth?: number;\n  };\n\nexport function UtxoMerkleFlow({\n  inputs,\n  outputs,\n  transactionId,\n  merkleRoot,\n  proofDepth = 3,\n  paused,\n  unstyled,\n  className,\n  ...props\n}: UtxoMerkleFlowProps) {\n  const safeDepth = Math.min(6, Math.max(1, Math.floor(proofDepth)));\n  const txLabel = truncateMiddle(transactionId, 6, 6);\n  const rootLabel = truncateMiddle(merkleRoot, 6, 6);\n\n  return (\n    <section\n      data-slot=\"utxo-merkle-flow\"\n      data-paused={paused || undefined}\n      data-unstyled={unstyled || undefined}\n      aria-label=\"Relationship between transaction outputs and Merkle inclusion\"\n      className={componentClasses(unstyled, styles.utxoMerkle, className)}\n      {...props}\n    >\n      <header className={componentClasses(unstyled, styles.motionHeader)}>\n        <span>State and history</span>\n        <span>One transaction · two views</span>\n      </header>\n\n      <div className={componentClasses(unstyled, styles.relationshipMap)}>\n        <div\n          className={componentClasses(unstyled, styles.proofAxis)}\n          role=\"group\"\n          aria-label={`Transaction ${txLabel} is a Merkle tree leaf with a proof depth of ${safeDepth}, resolving to root ${rootLabel}`}\n        >\n          <span className={componentClasses(unstyled, styles.axisTitle)}>\n            Historical inclusion\n          </span>\n          <div className={componentClasses(unstyled, styles.merkleTree)}>\n            <div\n              data-slot=\"merkle-root-node\"\n              className={componentClasses(unstyled, styles.rootNode)}\n            >\n              <span>Merkle root</span>\n              <code title={merkleRoot}>{rootLabel}</code>\n            </div>\n            <div\n              className={componentClasses(unstyled, styles.branchNodes)}\n              aria-hidden=\"true\"\n            >\n              {Array.from({ length: safeDepth }, (_, index) => (\n                <span key={index}>H{index + 1}</span>\n              ))}\n            </div>\n            <div\n              data-slot=\"merkle-leaf-node\"\n              className={componentClasses(unstyled, styles.leafNode)}\n            >\n              <span>Transaction leaf</span>\n              <code title={transactionId}>{txLabel}</code>\n            </div>\n            <span\n              className={componentClasses(unstyled, styles.proofSignal)}\n              aria-hidden=\"true\"\n            />\n          </div>\n        </div>\n\n        <div\n          className={componentClasses(unstyled, styles.relationshipHinge)}\n          role=\"note\"\n          aria-label={`The Merkle leaf and UTXO state transition refer to the same transaction ${txLabel}`}\n        >\n          <span>Same transaction</span>\n          <code>{txLabel}</code>\n        </div>\n\n        <div\n          className={componentClasses(unstyled, styles.stateAxis)}\n          role=\"group\"\n          aria-label={`${inputs.length} unspent outputs are consumed and ${outputs.length} new unspent outputs are created`}\n        >\n          <div\n            data-slot=\"spent-utxos\"\n            className={componentClasses(unstyled, styles.utxoColumn)}\n          >\n            <span className={componentClasses(unstyled, styles.axisTitle)}>\n              UTXOs consumed\n            </span>\n            <ul>\n              {inputs.map((input, index) => (\n                <li\n                  key={input.id}\n                  data-state=\"spent\"\n                  style={{ \"--motion-index\": index } as MotionStyle}\n                >\n                  <span>{input.label}</span>\n                  <code title={input.id}>{truncateMiddle(input.id, 5, 4)}</code>\n                  <strong>{formatSats(input.value)} sat</strong>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <div\n            data-slot=\"transaction-state-node\"\n            className={componentClasses(unstyled, styles.transactionNode)}\n          >\n            <span>Transaction</span>\n            <code title={transactionId}>{txLabel}</code>\n            <small>\n              {inputs.length} in · {outputs.length} out\n            </small>\n          </div>\n\n          <div\n            data-slot=\"created-utxos\"\n            className={componentClasses(unstyled, styles.utxoColumn)}\n          >\n            <span className={componentClasses(unstyled, styles.axisTitle)}>\n              UTXOs created\n            </span>\n            <ul>\n              {outputs.map((output, index) => (\n                <li\n                  key={output.id}\n                  data-state=\"unspent\"\n                  style={{ \"--motion-index\": index } as MotionStyle}\n                >\n                  <span>{output.label}</span>\n                  <code title={output.id}>{truncateMiddle(output.id, 5, 4)}</code>\n                  <strong>{formatSats(output.value)} sat</strong>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <span\n            className={componentClasses(unstyled, styles.stateSignal)}\n            aria-hidden=\"true\"\n          />\n        </div>\n      </div>\n\n      <div className={componentClasses(unstyled, styles.relationshipNote)}>\n        <p>\n          <strong>UTXO set</strong>\n          Spendable state derived from transaction outputs.\n        </p>\n        <p>\n          <strong>Merkle root</strong>\n          Inclusion commitment to transactions in one block.\n        </p>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/bitcoin/bitcoin-motion.module.css",
      "content": "/* Hallmark · component: Bitcoin motion indicators · genre: modern-minimal · macrostructure: motion workbench\n * theme: Vercel monochrome · motion: propagation · pressure · proof-of-work\n * pre-emit critique: P5 H5 E5 S5 R5 V4\n * states: idle · hover · focus · active · pinned · loading · paused · confirming · complete · reduced-motion\n * contrast: pass (46–50) · slop: pass (component scope)\n */\n\n.confirmations,\n.mempool,\n.utxoMerkle {\n  display: grid;\n  min-width: 0;\n  gap: var(--space-5);\n  color: var(--color-ink);\n  font-variant-numeric: tabular-nums;\n}\n\n.motionHeader {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  color: var(--color-muted);\n  font-size: var(--text-xs);\n}\n\n.motionHeader > :last-child,\n.motionHeader output {\n  color: var(--color-ink);\n  font-family: var(--font-mono);\n}\n\n.packetHint {\n  margin-left: var(--space-2);\n  color: var(--color-muted);\n  font: inherit;\n  opacity: 0.72;\n}\n\n.motionCaption {\n  min-height: 1lh;\n  margin: 0;\n  color: var(--color-muted);\n  font-size: var(--text-xs);\n}\n\n.confirmationProgress {\n  min-width: 0;\n}\n\n.confirmationRail {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));\n  gap: var(--space-2);\n  list-style: none;\n}\n\n.confirmationNode {\n  position: relative;\n  display: grid;\n  min-width: 2.75rem;\n  min-height: 3.5rem;\n  place-items: center;\n  overflow: hidden;\n  border: var(--rule-hair) solid var(--color-rule);\n  border-radius: var(--radius-md);\n  color: var(--color-muted);\n  background: var(--color-surface);\n  font-family: var(--font-mono);\n  font-size: var(--text-xs);\n}\n\n.confirmationNode::before {\n  position: absolute;\n  inset: 0;\n  background: var(--color-accent);\n  content: \"\";\n  opacity: 0;\n  transform: translateX(-104%);\n}\n\n.confirmationNode[data-state=\"confirmed\"] {\n  border-color: var(--color-rule-strong);\n  color: var(--color-ink);\n}\n\n.confirmationNode[data-state=\"confirmed\"]::before {\n  animation: confirmation-propagate var(--dur-slow) var(--ease-out) both;\n  animation-delay: calc(var(--motion-index) * var(--dur-stagger));\n}\n\n.confirmationNode span {\n  position: relative;\n  z-index: var(--z-content);\n  mix-blend-mode: difference;\n  color: var(--color-ink);\n}\n\n.mempoolField {\n  display: grid;\n  min-height: 13rem;\n  grid-template-columns: minmax(0, 1fr) minmax(6rem, 0.28fr);\n  gap: var(--space-4);\n  align-items: stretch;\n}\n\n.packetField {\n  position: relative;\n  min-width: 0;\n  overflow: visible;\n  border-block: var(--rule-hair) solid var(--color-rule);\n}\n\n.packetField::before,\n.packetField::after {\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: var(--rule-hair);\n  background: var(--color-rule-subtle);\n  content: \"\";\n}\n\n.packetField::before {\n  top: 33%;\n}\n\n.packetField::after {\n  top: 66%;\n}\n\n.mempoolPacket {\n  position: absolute;\n  top: calc(8% + var(--motion-lane) * 23%);\n  left: calc(2% + var(--motion-column) * 13%);\n  display: grid;\n  width: var(--space-6);\n  height: var(--space-4);\n  padding: var(--space-1);\n  gap: var(--space-1);\n  border: var(--rule-hair) solid var(--color-rule-strong);\n  border-radius: var(--radius-xs);\n  background: var(--color-paper);\n  opacity: 0;\n  transform: translateX(calc(var(--space-6) * -1));\n  animation: mempool-route var(--dur-flow) linear infinite;\n  animation-delay: calc(var(--motion-index) * var(--dur-stagger) * -1);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  transition:\n    color var(--dur-fast) var(--ease-out),\n    border-color var(--dur-fast) var(--ease-out),\n    background-color var(--dur-fast) var(--ease-out),\n    outline-color var(--dur-fast) var(--ease-out);\n}\n\n.mempoolPacket i {\n  display: block;\n  height: var(--rule-hair);\n  background: var(--color-muted);\n  transition: background-color var(--dur-fast) var(--ease-out);\n}\n\n.packetTooltip {\n  position: absolute;\n  z-index: var(--z-toolbar);\n  bottom: calc(100% + var(--space-3));\n  left: 50%;\n  display: grid;\n  width: 12.5rem;\n  padding: var(--space-3);\n  gap: var(--space-2);\n  transform: translate(-50%, var(--space-1));\n  border: var(--rule-hair) solid var(--color-rule-strong);\n  border-radius: var(--radius-sm);\n  color: var(--color-ink);\n  background: var(--color-surface-raised);\n  box-shadow: 0 0 var(--space-5) var(--color-rule-subtle);\n  opacity: 0;\n  pointer-events: none;\n  visibility: hidden;\n  transition:\n    opacity var(--dur-base) var(--ease-out) 900ms,\n    transform var(--dur-base) var(--ease-out) 900ms,\n    visibility 0s linear 900ms;\n}\n\n.mempoolPacket[data-lane=\"0\"] .packetTooltip {\n  top: calc(100% + var(--space-3));\n  bottom: auto;\n  transform: translate(-50%, calc(var(--space-1) * -1));\n}\n\n.packetTooltip > strong {\n  padding-bottom: var(--space-2);\n  border-bottom: var(--rule-hair) solid var(--color-rule);\n  font-size: 0.6875rem;\n  font-weight: 560;\n}\n\n.packetTooltip > span {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n\n.packetTooltip small,\n.packetTooltip b {\n  overflow: hidden;\n  font-family: var(--font-mono);\n  font-size: 0.625rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.packetTooltip small {\n  color: var(--color-muted);\n}\n\n.packetTooltip b {\n  font-weight: 500;\n}\n\n.blockAperture {\n  position: relative;\n  min-width: 0;\n  border: var(--rule-hair) solid var(--color-rule-strong);\n  border-radius: var(--radius-md);\n  background: var(--color-surface);\n  transition:\n    border-color var(--dur-base) var(--ease-out),\n    background-color var(--dur-base) var(--ease-out);\n}\n\n.blockSummary {\n  display: grid;\n  width: 100%;\n  min-height: 100%;\n  padding: var(--space-4);\n  align-content: space-between;\n  gap: var(--space-5);\n  border: 0;\n  border-radius: inherit;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  appearance: none;\n  color: inherit;\n  background: transparent;\n  font: inherit;\n  text-align: left;\n  transition:\n    color var(--dur-fast) var(--ease-out),\n    background-color var(--dur-fast) var(--ease-out);\n}\n\n.blockSummary:focus-visible {\n  outline-color: var(--color-focus);\n}\n\n.blockSummary:active {\n  background: var(--color-surface-active);\n}\n\n.blockLabel {\n  display: grid;\n  gap: var(--space-1);\n  color: var(--color-muted);\n  font-family: var(--font-mono);\n  font-size: 0.6875rem;\n}\n\n.blockLabel small {\n  color: var(--color-muted);\n  font: inherit;\n  opacity: 0.72;\n}\n\n.blockLabel span,\n.blockLabel small {\n  white-space: nowrap;\n}\n\n.blockSlots {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.blockSlots i {\n  display: block;\n  height: var(--space-2);\n  border: var(--rule-hair) solid var(--color-rule);\n  border-radius: var(--radius-xs);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  transition:\n    border-color var(--dur-fast) var(--ease-out),\n    background-color var(--dur-fast) var(--ease-out),\n    outline-color var(--dur-fast) var(--ease-out);\n}\n\n.blockSlots i[data-state=\"filled\"] {\n  border-color: var(--color-ink);\n  background: var(--color-ink);\n}\n\n.blockTooltip {\n  position: absolute;\n  z-index: var(--z-toolbar);\n  top: 50%;\n  right: calc(100% + var(--space-3));\n  display: block;\n  width: min(15rem, calc(100vw - var(--space-8)));\n  padding: var(--space-4);\n  translate: 0 -50%;\n  transform: translateX(var(--space-2));\n  border: var(--rule-hair) solid var(--color-rule-strong);\n  border-radius: var(--radius-md);\n  color: var(--color-ink);\n  background: var(--color-surface-raised);\n  opacity: 0;\n  pointer-events: none;\n  visibility: hidden;\n  transition:\n    opacity var(--dur-base) var(--ease-out),\n    transform var(--dur-base) var(--ease-out);\n}\n\n.blockTooltipHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding-bottom: var(--space-3);\n  border-bottom: var(--rule-hair) solid var(--color-rule);\n}\n\n.blockTooltipHeader strong {\n  font-size: var(--text-xs);\n  font-weight: 500;\n}\n\n.blockTooltipHeader span {\n  color: var(--color-muted);\n  font-family: var(--font-mono);\n  font-size: 0.6875rem;\n}\n\n.blockMetadata {\n  display: grid;\n  margin: 0;\n  padding-top: var(--space-3);\n  gap: var(--space-2);\n}\n\n.blockMetadata > div {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n\n.blockMetadata dt {\n  color: var(--color-muted);\n  font-size: 0.6875rem;\n}\n\n.blockMetadata dd {\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  font-family: var(--font-mono);\n  font-size: 0.6875rem;\n  text-align: right;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sampleInspector {\n  display: grid;\n  min-width: 0;\n  gap: var(--space-3);\n  padding-block: var(--space-3);\n  border-block: var(--rule-hair) solid var(--color-rule);\n}\n\n.sampleHeader {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  color: var(--color-muted);\n  font-size: 0.6875rem;\n}\n\n.sampleHeader small {\n  font: inherit;\n}\n\n.sampleLayout {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n\n.sampleButtons {\n  display: grid;\n  min-width: 0;\n  align-content: start;\n  gap: var(--space-2);\n}\n\n.sampleButtons button {\n  display: grid;\n  min-width: 0;\n  min-height: 2.75rem;\n  padding: var(--space-2) var(--space-3);\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-3);\n  border: var(--rule-hair) solid var(--color-rule);\n  border-radius: var(--radius-sm);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  color: var(--color-muted);\n  background: var(--color-surface);\n  font: inherit;\n  text-align: left;\n  transition:\n    color var(--dur-fast) var(--ease-out),\n    border-color var(--dur-fast) var(--ease-out),\n    background-color var(--dur-fast) var(--ease-out);\n}\n\n.sampleButtons button span {\n  font-size: 0.6875rem;\n  white-space: nowrap;\n}\n\n.sampleButtons button code {\n  min-width: 0;\n  overflow: hidden;\n  font-family: var(--font-mono);\n  font-size: 0.625rem;\n  text-align: right;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sampleButtons button:hover {\n  border-color: var(--color-rule-strong);\n  background: var(--color-surface-hover);\n}\n\n.sampleButtons button:focus-visible {\n  outline-color: var(--color-focus);\n}\n\n.sampleButtons button:active {\n  background: var(--color-surface-active);\n}\n\n.sampleButtons button:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.sampleButtons button[data-state=\"selected\"] {\n  color: var(--color-ink);\n  border-color: var(--color-ink);\n  background: var(--color-surface-hover);\n}\n\n.sampleMetadata {\n  display: grid;\n  min-width: 0;\n  padding: var(--space-3);\n  gap: var(--space-3);\n  border: var(--rule-hair) solid var(--color-rule-strong);\n  border-radius: var(--radius-sm);\n  background: var(--color-surface-raised);\n}\n\n.sampleMetadata header,\n.sampleMetadata dl > div {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n\n.sampleMetadata header {\n  padding-bottom: var(--space-2);\n  border-bottom: var(--rule-hair) solid var(--color-rule);\n}\n\n.sampleMetadata header strong,\n.sampleMetadata header span,\n.sampleMetadata dt,\n.sampleMetadata dd {\n  font-size: 0.6875rem;\n}\n\n.sampleMetadata header strong {\n  font-weight: 560;\n}\n\n.sampleMetadata header span,\n.sampleMetadata dt {\n  color: var(--color-muted);\n}\n\n.sampleMetadata header span,\n.sampleMetadata dd {\n  font-family: var(--font-mono);\n}\n\n.sampleMetadata dl {\n  display: grid;\n  min-width: 0;\n  margin: 0;\n  gap: var(--space-2);\n}\n\n.sampleMetadata dd {\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  text-align: right;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .mempoolPacket:hover {\n    z-index: var(--z-content);\n    color: var(--color-accent-ink);\n    border-color: var(--color-accent);\n    background: var(--color-accent);\n    outline-color: var(--color-focus);\n    animation-play-state: paused;\n  }\n\n  .mempoolPacket:hover i {\n    background: currentColor;\n  }\n\n  .mempoolPacket:hover .packetTooltip {\n    transform: translate(-50%, 0);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .blockAperture:hover {\n    border-color: var(--color-ink);\n    background: var(--color-surface-hover);\n  }\n\n  .blockSlots i:hover {\n    border-color: var(--color-ink);\n    background: var(--color-surface-active);\n    outline-color: var(--color-focus);\n  }\n\n  .blockSlots i[data-state=\"filled\"]:hover {\n    background: var(--color-muted);\n  }\n\n  .blockAperture:hover .blockTooltip {\n    animation: block-tooltip-reveal\n      var(--dur-base)\n      var(--ease-out)\n      calc(var(--dur-loader) * 0.75)\n      both;\n  }\n}\n\n.blockAperture:hover .blockTooltip,\n.blockAperture:focus-within .blockTooltip,\n.blockAperture[data-open=\"true\"] .blockTooltip {\n  transform: translateX(0);\n  opacity: 1;\n  pointer-events: auto;\n  visibility: visible;\n}\n\n.blockAperture:focus-within .blockTooltip,\n.blockAperture[data-open=\"true\"] .blockTooltip {\n  animation: none;\n  transition-delay: 0s;\n}\n\n.blockAperture[data-open=\"true\"] {\n  border-color: var(--color-ink);\n  background: var(--color-surface-hover);\n}\n\n.mempoolScale {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  color: var(--color-muted);\n  font-size: 0.6875rem;\n}\n\n@media (max-width: 48rem) {\n  .sampleLayout {\n    grid-template-columns: 1fr;\n  }\n}\n\n.spinner {\n  display: inline-flex;\n  min-height: 2.75rem;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-ink);\n}\n\n.spinnerVisual {\n  display: inline-grid;\n  width: 2rem;\n  height: 2rem;\n  flex: none;\n  place-items: center;\n}\n\n.spinner[data-size=\"sm\"] .spinnerVisual {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.spinner[data-size=\"lg\"] .spinnerVisual {\n  width: 3rem;\n  height: 3rem;\n}\n\n.spinner svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 1.5;\n}\n\n.spinner[data-variant=\"hash\"] svg {\n  animation: loader-rotate var(--dur-loader) linear infinite;\n}\n\n.spinner[data-variant=\"hash\"] svg circle:first-child {\n  stroke-dasharray: 18 10;\n}\n\n.spinner[data-variant=\"hash\"] svg circle:nth-child(2) {\n  opacity: 0.28;\n}\n\n.spinner[data-variant=\"sync\"] svg circle:first-child {\n  stroke-dasharray: 22 18;\n  transform-origin: center;\n  animation: loader-rotate var(--dur-loader) linear infinite;\n}\n\n.spinner[data-variant=\"sync\"] svg circle:nth-child(2) {\n  stroke-dasharray: 14 10;\n  transform-origin: center;\n  animation: loader-rotate-reverse var(--dur-loader) linear infinite;\n}\n\n.blockSpinner {\n  position: relative;\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n\n.blockSpinner i {\n  position: absolute;\n  display: block;\n  width: 68%;\n  height: 68%;\n  border: var(--rule-hair) solid currentColor;\n  border-radius: var(--radius-xs);\n  background: var(--color-paper);\n  animation: loader-blocks var(--dur-loader) var(--ease-in-out) infinite;\n}\n\n.blockSpinner i:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.blockSpinner i:nth-child(2) {\n  top: 16%;\n  left: 16%;\n  animation-delay: calc(var(--dur-loader) / -3);\n}\n\n.blockSpinner i:nth-child(3) {\n  top: 32%;\n  left: 32%;\n  animation-delay: calc(var(--dur-loader) / -1.5);\n}\n\n.spinnerLabel {\n  color: var(--color-muted-strong);\n  font-size: var(--text-sm);\n}\n\n.relationshipMap {\n  display: grid;\n  min-width: 0;\n  gap: 0;\n}\n\n.proofAxis,\n.stateAxis {\n  position: relative;\n  min-width: 0;\n}\n\n.proofAxis {\n  padding-bottom: var(--space-6);\n}\n\n.axisTitle {\n  display: block;\n  margin-bottom: var(--space-3);\n  color: var(--color-muted);\n  font-size: 0.6875rem;\n}\n\n.merkleTree {\n  position: relative;\n  display: grid;\n  min-height: 18rem;\n  grid-template-rows: auto 1fr auto;\n  justify-items: center;\n  gap: var(--space-5);\n}\n\n.merkleTree::before {\n  position: absolute;\n  top: var(--space-10);\n  bottom: var(--space-10);\n  left: 50%;\n  width: var(--rule-hair);\n  background: var(--color-rule-strong);\n  content: \"\";\n}\n\n.rootNode,\n.leafNode,\n.transactionNode {\n  position: relative;\n  z-index: var(--z-content);\n  display: grid;\n  min-width: 9.5rem;\n  padding: var(--space-3);\n  gap: var(--space-2);\n  border: var(--rule-hair) solid var(--color-rule-strong);\n  border-radius: var(--radius-md);\n  background: var(--color-paper);\n  text-align: center;\n}\n\n.rootNode > span,\n.leafNode > span,\n.transactionNode > span {\n  color: var(--color-muted);\n  font-size: 0.6875rem;\n}\n\n.rootNode code,\n.leafNode code,\n.transactionNode code {\n  font-family: var(--font-mono);\n  font-size: var(--text-xs);\n}\n\n.branchNodes {\n  position: relative;\n  z-index: var(--z-content);\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-around;\n  gap: var(--space-2);\n}\n\n.branchNodes span {\n  display: grid;\n  width: 2.75rem;\n  height: 2.75rem;\n  place-items: center;\n  border: var(--rule-hair) solid var(--color-rule);\n  border-radius: var(--radius-full);\n  color: var(--color-muted);\n  background: var(--color-paper);\n  font-family: var(--font-mono);\n  font-size: 0.6875rem;\n}\n\n.proofSignal {\n  position: absolute;\n  z-index: var(--z-content);\n  bottom: var(--space-12);\n  left: calc(50% - var(--space-1));\n  width: var(--space-2);\n  height: var(--space-2);\n  border-radius: var(--radius-full);\n  background: var(--color-ink);\n  opacity: 0;\n  animation: proof-propagate var(--dur-flow) var(--ease-in-out) 1 both;\n}\n\n.stateAxis {\n  display: grid;\n  padding-top: var(--space-6);\n  gap: var(--space-6);\n}\n\n.relationshipHinge {\n  position: relative;\n  display: grid;\n  min-height: 4.5rem;\n  place-content: center;\n  justify-items: center;\n  gap: var(--space-1);\n  text-align: center;\n}\n\n.relationshipHinge::before {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: var(--rule-hair);\n  background: var(--color-rule-strong);\n  content: \"\";\n}\n\n.relationshipHinge span,\n.relationshipHinge code {\n  position: relative;\n  z-index: var(--z-content);\n  padding-inline: var(--space-2);\n  background: var(--color-paper);\n}\n\n.relationshipHinge span {\n  color: var(--color-muted);\n  font-size: 0.6875rem;\n}\n\n.relationshipHinge code {\n  font-family: var(--font-mono);\n  font-size: var(--text-xs);\n}\n\n.utxoColumn {\n  min-width: 0;\n}\n\n.utxoColumn ul {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  gap: var(--space-2);\n  list-style: none;\n}\n\n.utxoColumn li {\n  display: grid;\n  min-width: 0;\n  padding: var(--space-3);\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: var(--space-1) var(--space-3);\n  border-block: var(--rule-hair) solid var(--color-rule-subtle);\n  background: var(--color-paper);\n  animation: utxo-arrive var(--dur-long) var(--ease-out) both;\n  animation-delay: calc(var(--motion-index) * var(--dur-stagger));\n}\n\n.utxoColumn li > span {\n  min-width: 0;\n  overflow: hidden;\n  font-size: var(--text-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.utxoColumn li code {\n  color: var(--color-muted);\n  font-family: var(--font-mono);\n  font-size: 0.6875rem;\n}\n\n.utxoColumn li strong {\n  grid-column: 2;\n  grid-row: 1 / span 2;\n  align-self: center;\n  font-family: var(--font-mono);\n  font-size: var(--text-xs);\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.utxoColumn li[data-state=\"spent\"] {\n  opacity: 0.62;\n}\n\n.transactionNode {\n  width: min(100%, 12rem);\n  margin-inline: auto;\n  align-self: center;\n  animation: transaction-commit var(--dur-flow) var(--ease-in-out) 1 both;\n}\n\n.transactionNode small {\n  color: var(--color-muted);\n  font-size: 0.6875rem;\n}\n\n.stateSignal {\n  display: none;\n}\n\n.relationshipNote {\n  display: grid;\n  padding-top: var(--space-5);\n  gap: var(--space-4);\n  border-top: var(--rule-hair) solid var(--color-rule);\n}\n\n.relationshipNote p {\n  display: grid;\n  margin: 0;\n  gap: var(--space-1);\n  color: var(--color-muted);\n  font-size: var(--text-xs);\n  line-height: 1.6;\n}\n\n.relationshipNote strong {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n[data-paused=\"true\"] .confirmationNode::before,\n[data-paused=\"true\"] .mempoolPacket,\n[data-paused=\"true\"] .spinnerVisual *,\n[data-paused=\"true\"] .proofSignal,\n[data-paused=\"true\"] .transactionNode,\n[data-paused=\"true\"] .stateSignal,\n[data-paused=\"true\"] .utxoColumn li {\n  animation-play-state: paused;\n}\n\n@keyframes confirmation-propagate {\n  from {\n    opacity: 0;\n    transform: translateX(-104%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes mempool-route {\n  0% {\n    opacity: 0;\n    transform: translateX(calc(var(--space-6) * -1));\n  }\n  18% {\n    opacity: 0.82;\n  }\n  78% {\n    opacity: 0.82;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(calc(var(--space-12) * 2));\n  }\n}\n\n@keyframes loader-rotate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n@keyframes loader-rotate-reverse {\n  to {\n    transform: rotate(-1turn);\n  }\n}\n\n@keyframes loader-blocks {\n  0%,\n  100% {\n    opacity: 0.28;\n    transform: translateY(0);\n  }\n  48% {\n    opacity: 1;\n    transform: translateY(calc(var(--space-1) * -1));\n  }\n}\n\n@keyframes proof-propagate {\n  0% {\n    opacity: 0;\n    transform: translateY(0);\n  }\n  18%,\n  72% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(calc(var(--space-24) * -2));\n  }\n}\n\n@keyframes transaction-commit {\n  0%,\n  28%,\n  100% {\n    opacity: 0.68;\n    transform: translateY(0);\n  }\n  42%,\n  72% {\n    opacity: 1;\n    transform: translateY(calc(var(--space-1) * -1));\n  }\n}\n\n@keyframes utxo-arrive {\n  from {\n    opacity: 0;\n    transform: translateX(calc(var(--space-3) * -1));\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@media (min-width: 48rem) {\n  .relationshipMap {\n    gap: 0;\n  }\n\n  .proofAxis {\n    width: min(100%, 36rem);\n    margin-inline: auto;\n  }\n\n  .stateAxis {\n    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.65fr) minmax(0, 1fr);\n    align-items: center;\n  }\n\n  .stateAxis::before,\n  .stateAxis::after {\n    position: absolute;\n    z-index: var(--z-canvas);\n    top: 52%;\n    height: var(--rule-hair);\n    background: var(--color-rule-strong);\n    content: \"\";\n  }\n\n  .stateAxis::before {\n    right: 67%;\n    left: 27%;\n  }\n\n  .stateAxis::after {\n    right: 27%;\n    left: 67%;\n  }\n\n  .stateSignal {\n    position: absolute;\n    z-index: var(--z-content);\n    top: calc(52% - var(--space-1));\n    left: 27%;\n    display: block;\n    width: 16%;\n    height: var(--space-2);\n    border-radius: var(--radius-full);\n    background: var(--color-ink);\n    opacity: 0;\n    animation: state-propagate var(--dur-flow) var(--ease-in-out) 1 both;\n  }\n\n  .relationshipNote {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 40rem) {\n  .blockTooltip {\n    top: auto;\n    right: 0;\n    bottom: calc(100% + var(--space-2));\n    translate: none;\n    transform: translateY(var(--space-2));\n  }\n\n  .blockAperture:hover .blockTooltip,\n  .blockAperture:focus-within .blockTooltip,\n  .blockAperture[data-open=\"true\"] .blockTooltip {\n    transform: translateY(0);\n  }\n\n}\n\n@keyframes state-propagate {\n  0% {\n    opacity: 0;\n    transform: translateX(0);\n  }\n  16%,\n  76% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(275%);\n  }\n}\n\n@keyframes block-tooltip-reveal {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .confirmationNode[data-state=\"confirmed\"]::before,\n  .mempoolPacket,\n  .proofSignal,\n  .stateSignal,\n  .transactionNode,\n  .utxoColumn li {\n    opacity: 1;\n    transform: none;\n    animation: none;\n  }\n\n  .spinnerVisual * {\n    animation-name: loader-reduced !important;\n    animation-duration: var(--dur-loading-reduced) !important;\n    animation-iteration-count: infinite !important;\n    transform: none;\n  }\n\n  .blockTooltip,\n  .packetTooltip {\n    animation: none;\n    transform: none;\n    transition: none;\n  }\n}\n\n@keyframes loader-reduced {\n  0%,\n  100% {\n    opacity: 0.42;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n",
      "type": "registry:file",
      "target": "components/bitcoin/bitcoin-motion.module.css"
    }
  ],
  "type": "registry:component"
}