@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Inter:wght@300;400;500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #0a0a0a;
  --text: #e8e8e8;
  --text-dim: #888;
  --text-subtle: #555;
  --accent: #10b981;
  --accent-dim: rgba(16, 185, 129, 0.2);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

canvas {
  max-width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Global Header */

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #222;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.header-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Section styles */

section {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 24px;
  position: relative;
}

section.flush {
  padding: 0;
}

section.compact {
  padding: 60px 24px;
}

h2 {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: clamp(18px, 2.5vw, 24px);
  margin-bottom: 40px;
  color: var(--text);
  letter-spacing: -0.5px;
}

h3 {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text-dim);
}

.label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 12px;
}

.mono {
  font-family: "JetBrains Mono", monospace;
}

/* Intro with Swap layout */

.intro-with-swap {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
}

.intro-with-swap .prose {
  flex: 1;
  max-width: 580px;
}

.intro-swap-card {
  flex: 0 0 auto;
  position: sticky;
  top: 80px;
}

@media (max-width: 1024px) {
  .intro-with-swap {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .intro-with-swap .prose {
    max-width: 680px;
  }

  .intro-swap-card {
    position: static;
    width: 100%;
    max-width: 420px;
  }
}

/* Prose styles */

.prose {
  max-width: 680px;
  width: 100%;
}

.prose p {
  margin-bottom: 1.5em;
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--text);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose p.dim {
  color: var(--text-dim);
}

.prose p.emphasis {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  color: var(--text);
}

.prose p.small {
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--text-dim);
}

.prose p.standout {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
}

.prose-wide {
  max-width: 900px;
}

.prose-center {
  text-align: center;
}

/* Hero section */

#hero {
  position: relative;
  background: #000;
  min-height: auto;
  padding-top: 56px; /* Account for fixed header */
}

#heroFrame {
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  aspect-ratio: 7 / 3;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border: none;
  background: #000;
}

.hero-stats {
  display: flex;
  gap: clamp(24px, 5vw, 48px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  background: var(--bg);
}

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-value {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(16px, 2.5vw, 24px);
}

.stat-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.color-pair {
  display: flex;
  gap: 6px;
  align-items: center;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.quiet-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.quiet-state.visible {
  opacity: 1;
}

/* Visual containers */

.visual-container {
  margin: 48px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.visual-container.inline {
  margin: 32px 0;
}

/* Side by side layouts */

.side-by-side {
  display: flex;
  gap: clamp(24px, 5vw, 80px);
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
  width: 100%;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 280px;
  max-width: 400px;
}

/* Diagram containers */

.diagram-canvas {
  border: 1px solid #222;
  border-radius: 4px;
  background: #000;
}

/* Pool boxes */

.pools-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  justify-content: center;
}

.pool-box {
  width: clamp(140px, 18vw, 180px);
  padding: 20px 16px;
  border: 1px solid #333;
  border-radius: 8px;
  text-align: center;
  transition: all 0.4s ease;
}

.pool-existing {
  background: #111;
  opacity: 0.8;
}

.pool-deployed {
  background: #1a1a1a;
  border-color: #444;
}

.pool-fee {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(18px, 2.5vw, 24px);
  margin-bottom: 6px;
}

.pool-token {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.pool-price {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(14px, 2vw, 18px);
  margin-bottom: 8px;
}

.pool-subtitle {
  font-size: 9px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.pool-label {
  font-size: 11px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.pool-color {
  width: 100%;
  height: 8px;
  border-radius: 4px;
}

.spread-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.spread-line {
  width: 40px;
  height: 1px;
  background: var(--text-subtle);
}

.spread-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  padding: 6px 12px;
  background: #222;
  border-radius: 4px;
}

.spread-indicator {
  text-align: center;
}

.spread-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  color: var(--accent);
}

/* Dithered outputs below pools */

.dithered-outputs {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.dither-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dither-output canvas {
  border: 1px solid #222;
  border-radius: 4px;
}

.pool-artwork-frame {
  width: 210px;
  height: 90px;
  border: 1px solid #222;
  border-radius: 4px;
  background: #000;
}

.disagreement-artwork-frame {
  width: 210px;
  height: 90px;
  border: 1px solid #222;
  border-radius: 4px;
  background: #000;
}

.combined-artwork-frame {
  width: 504px;
  height: 216px;
  border: 1px solid #222;
  border-radius: 4px;
  background: #000;
}

.panel-artwork-frame {
  width: 196px;
  height: 84px;
  border: 1px solid #222;
  border-radius: 4px;
  background: #000;
}

/* Three-panel row */

.three-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 700px;
  width: 100%;
}

.three-panel .panel {
  min-width: auto;
  flex: none;
  max-width: none;
}

@media (max-width: 768px) {
  .three-panel {
    grid-template-columns: 1fr;
  }
}

/* Color system */

.color-states {
  display: flex;
  gap: clamp(32px, 5vw, 64px);
  flex-wrap: wrap;
  justify-content: center;
}

.color-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.color-state-pair {
  display: flex;
  gap: 4px;
}

.color-state-swatch {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}

.color-state-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
}

/* NFT Grid Preview */

.nft-grid-preview {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 8 / 4;
  background: #0a0a0a;
  border-radius: 8px;
  padding: 8px;
  margin: 0 auto;
}

.nft-grid-cell {
  position: relative;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}

.nft-grid-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.nft-grid-number {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
}

.nft-grid-cell:hover .nft-grid-number {
  opacity: 1;
}

.nft-grid-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 16px;
  font-family: "JetBrains Mono", monospace;
}

/* Participate section - SHIFT THE SPREAD */

.shift-spread-wrapper {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 900px;
  width: 100%;
}

.shift-spread-container {
  max-width: 500px;
  width: 100%;
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 32px;
  flex: 1;
}

.swap-preview-art {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.swap-preview-art iframe {
  width: 280px;
  height: 120px;
  border-radius: 8px;
  background: #000;
  border: none;
}

.swap-preview-art .label {
  font-size: 10px;
  color: var(--text-subtle);
}

.shift-current {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #222;
}

.shift-current-spread {
  text-align: center;
}

.shift-spread-value {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--text);
}

.shift-spread-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

.shift-pool-prices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}

.shift-pool-prices span {
  color: var(--text-dim);
}

.shift-pool-prices strong {
  color: var(--text);
}

.shift-close-cost {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 24px;
  font-family: "JetBrains Mono", monospace;
}

.swap-input-group {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.swap-input {
  background: #1a1a1a;
  border: 1px solid #333;
  color: var(--text);
  padding: 12px 16px;
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  flex: 1;
}

.swap-input:focus {
  outline: none;
  border-color: var(--accent);
}

.swap-unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text-dim);
}

.swap-direction {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.swap-dir-btn {
  flex: 1;
  padding: 10px 16px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swap-dir-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.swap-dir-btn .swap-dir-label {
  display: block;
  font-weight: 500;
}

.swap-dir-btn .swap-dir-hint {
  display: block;
  font-size: 10px;
  opacity: 0.6;
  margin-top: 2px;
  font-style: italic;
}

.swap-preview {
  font-size: 13px;
  color: var(--text-dim);
  padding: 12px;
  background: #0a0a0a;
  border-radius: 4px;
  margin-bottom: 16px;
  font-family: "JetBrains Mono", monospace;
}

.btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  padding: 14px 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-primary {
  background: var(--accent);
  color: #000;
}

.btn-primary:hover {
  background: #0ea572;
}

.btn-primary:disabled {
  background: #333;
  color: #666;
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid #444;
}

.btn-secondary:hover {
  border-color: #666;
  background: #111;
}

.swap-status {
  padding: 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 16px;
  display: none;
  font-family: "JetBrains Mono", monospace;
}

.swap-status.pending {
  display: block;
  background: #f59e0b22;
  color: #f59e0b;
}

.swap-status.success {
  display: flex;
  align-items: center;
  background: #10b98122;
  color: var(--accent);
}

.swap-status.error {
  display: flex;
  align-items: center;
  background: #ef444422;
  color: #ef4444;
}

.swap-status.approving,
.swap-status.depositing,
.swap-status.swapping {
  display: block;
  background: #f59e0b22;
  color: #f59e0b;
}

.swap-status.idle {
  display: none;
}

.swap-status a {
  color: inherit;
  text-decoration: underline;
  margin-left: 8px;
}

.balance-display {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 16px;
  font-family: "JetBrains Mono", monospace;
}

.wallet-row {
  margin-bottom: 24px;
}

.connected-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 12px;
}

.connected-wallet span {
  color: var(--text-dim);
}

.connected-wallet .address {
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
}

.swap-info {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.swap-info strong {
  color: var(--text);
}

/* Shift Spread Card - new component */

.shift-spread-card {
  max-width: 480px;
  width: 100%;
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 28px;
  margin: 0 auto;
}

.shift-close-estimate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  margin-bottom: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}

.shift-close-label {
  color: var(--text-dim);
}

.shift-close-amount {
  color: var(--accent);
  font-weight: 500;
}

.shift-countdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 180, 50, 0.08);
  border: 1px solid rgba(255, 180, 50, 0.2);
  border-radius: 6px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}

.shift-countdown--ready {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

.shift-countdown-label {
  color: var(--text-dim);
}

.shift-countdown-value {
  color: #ffb432;
  font-weight: 500;
  font-size: 15px;
}

.shift-countdown--ready .shift-countdown-label {
  color: var(--accent);
}

.shift-quiet-message {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  padding: 24px 0;
  font-style: italic;
}

.shift-direction {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.shift-dir-btn {
  flex: 1;
  padding: 14px 16px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.shift-dir-btn:hover:not(:disabled) {
  border-color: #444;
  background: #222;
}

.shift-dir-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.shift-dir-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.shift-dir-btn .shift-dir-label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

.shift-dir-btn .shift-dir-hint {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  font-style: italic;
}

.shift-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 8px;
}

.shift-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 14px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
}

.shift-input:focus {
  outline: none;
}

.shift-input::placeholder {
  color: #444;
}

.shift-token {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
}

.shift-token-symbol {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.shift-max-btn {
  background: var(--accent-dim);
  color: var(--accent);
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.shift-max-btn:hover {
  background: var(--accent);
  color: #000;
}

.shift-balance {
  font-size: 12px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  margin-bottom: 16px;
  padding-left: 4px;
}

.shift-preview {
  font-size: 13px;
  color: var(--text-dim);
  padding: 14px 16px;
  background: #0a0a0a;
  border-radius: 6px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
  text-align: center;
}

.shift-preview-close {
  color: var(--accent);
}

.shift-output {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 12px 16px;
  background: #1a1a1a;
  border-radius: 6px;
  margin-bottom: 16px;
  font-family: "JetBrains Mono", monospace;
  color: var(--text-dim);
}

.shift-output strong {
  color: var(--text);
}

.shift-settings-row {
  margin-bottom: 16px;
}

.shift-settings-btn {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 11px;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  padding: 4px 0;
}

.shift-settings-btn:hover {
  color: var(--text-dim);
}

.shift-settings {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  background: #1a1a1a;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.shift-slippage-btn {
  background: #222;
  border: 1px solid #333;
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  cursor: pointer;
}

.shift-slippage-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.shift-btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
}

.shift-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  text-align: center;
}

.shift-status.approving_token,
.shift-status.approving_permit2,
.shift-status.swapping {
  background: #f59e0b22;
  color: #f59e0b;
}

.shift-status.success {
  background: #10b98122;
  color: var(--accent);
}

.shift-status.error {
  background: #ef444422;
  color: #ef4444;
}

.shift-status a {
  color: inherit;
  text-decoration: underline;
  margin-left: 4px;
}

.shift-status .error-text {
  color: #ef4444;
}

.shift-info {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.shift-info summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-subtle);
  list-style: none;
}

.shift-info summary::-webkit-details-marker {
  display: none;
}

.shift-info summary:hover {
  color: var(--text-dim);
}

.shift-info-content {
  padding: 0 16px 16px 16px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

.shift-info-content p {
  margin-bottom: 12px;
}

.shift-info-content p:last-child {
  margin-bottom: 0;
}

.shift-info-content strong {
  color: var(--text);
}

.collect-link {
  margin-top: 32px;
  text-align: center;
}

.collect-link p {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* Withdraw section */

.withdraw-section {
  display: none;
  margin-top: 16px;
  padding: 12px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 4px;
}

.withdraw-section.visible {
  display: block;
}

.withdraw-section h4 {
  font-size: 11px;
  color: #eab308;
  margin-bottom: 8px;
  font-weight: 500;
}

.deposit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
}

.deposit-row button {
  background: #eab308;
  color: #000;
  font-size: 11px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Expandable info section */

.pool-explainer {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.pool-explainer summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pool-explainer summary::-webkit-details-marker {
  display: none;
}

.pool-explainer summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.2s;
}

.pool-explainer[open] summary::before {
  transform: rotate(90deg);
}

.pool-explainer summary:hover {
  color: var(--text);
}

.pool-explainer-content {
  padding: 0 16px 16px 16px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

.pool-explainer-content h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0 8px 0;
}

.pool-explainer-content h4:first-child {
  margin-top: 0;
}

.pool-explainer-content p {
  margin-bottom: 12px;
}

.pool-explainer-content ul {
  margin: 0 0 12px 0;
  padding-left: 16px;
}

.pool-explainer-content li {
  margin-bottom: 6px;
}

.pool-explainer-content strong {
  color: var(--text);
}

.pool-explainer-content .highlight {
  color: var(--accent);
}

/* Statement text */

.statement {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  letter-spacing: -0.5px;
}

.statement-final {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.5;
  text-align: center;
  max-width: 900px;
  letter-spacing: -1px;
}

.breathing-text {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* About the Artist */

.about-artist {
  background: #000;
  padding: 80px 24px;
  border-top: 1px solid #222;
}

.about-artist-content {
  max-width: 680px;
  margin: 0 auto;
}

.about-artist h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 32px;
}

.about-artist-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-artist-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.about-artist-text a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text-dim);
  text-underline-offset: 2px;
  font-weight: 500;
  transition: text-decoration-color 0.2s;
}

.about-artist-text a:hover {
  text-decoration-color: var(--text);
}

@media (max-width: 768px) {
  .about-artist {
    padding: 48px 20px;
  }

  .about-artist-text p {
    font-size: 15px;
  }
}

/* Footer */

footer {
  padding: 60px 24px;
  border-top: 1px solid #222;
}

.footer-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 48px;
}

.footer-section h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.footer-section a {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  transition: color 0.2s ease;
  font-weight: 400;
}

.footer-section a:hover {
  color: var(--text);
}

.footer-credit {
  width: 100%;
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid #222;
  margin-top: 32px;
  color: var(--text-subtle);
  font-size: 13px;
}

/* Loading */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "JetBrains Mono", monospace;
  color: var(--text-dim);
}

/* Responsive */

@media (max-width: 768px) {
  section {
    padding: 60px 20px;
  }
  .hero-stats {
    gap: 16px;
  }
  .shift-spread-container {
    padding: 24px;
  }
  .shift-spread-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .swap-preview-art {
    display: none;
  }
  .pools-row {
    flex-direction: column;
    gap: 16px;
  }
  .spread-connector {
    flex-direction: row;
    order: -1;
    margin-bottom: 8px;
  }
  .spread-line {
    width: 30px;
  }
  .pool-box {
    width: 100%;
    max-width: 280px;
  }
  .visual-container canvas {
    max-width: 100%;
    height: auto !important;
  }
  .dithered-outputs {
    flex-direction: column;
    gap: 24px;
  }
  .shift-current {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

}

/* RainbowKit overrides */

[data-rk] {
  --rk-colors-accentColor: #10b981;
}

/* Swap Card Styles */

.swap-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
}

.swap-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.swap-card-header h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.swap-pool-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--accent-dim);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.swap-pool-info .pool-name {
  color: var(--accent);
  font-weight: 500;
}

.swap-pool-info .pool-fee {
  color: var(--text-dim);
}

.swap-settings-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s;
}

.swap-settings-btn:hover {
  color: var(--text);
}

.swap-settings {
  background: #0a0a0a;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.slippage-setting label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-family: "JetBrains Mono", monospace;
}

.slippage-options {
  display: flex;
  gap: 8px;
  align-items: center;
}

.slippage-btn {
  background: #1a1a1a;
  border: 1px solid #333;
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.slippage-btn:hover {
  border-color: #444;
  color: var(--text);
}

.slippage-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.slippage-custom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.slippage-custom input {
  width: 50px;
  background: #1a1a1a;
  border: 1px solid #333;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-align: right;
}

.slippage-custom input:focus {
  outline: none;
  border-color: var(--accent);
}

.slippage-custom span {
  color: var(--text-dim);
  font-size: 12px;
}

.swap-token-box {
  background: #0a0a0a;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 4px;
}

.swap-token-box.output {
  background: #0d0d0d;
}

.swap-token-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.swap-amount-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  font-weight: 400;
  padding: 0;
  outline: none;
  min-width: 0;
}

.swap-amount-input::placeholder {
  color: var(--text-subtle);
}

.swap-amount-input:disabled {
  color: var(--text);
  opacity: 1;
}

.swap-token-select {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1a1a1a;
  border: 1px solid #333;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.swap-token-select:hover {
  background: #222;
  border-color: #444;
}

.swap-token-display {
  background: #1a1a1a;
  border: 1px solid #333;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.swap-token-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.swap-balance {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-subtle);
}

.swap-max-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}

.swap-max-btn:hover {
  background: var(--accent-dim);
}

.swap-direction-wrapper {
  display: flex;
  justify-content: center;
  margin: -8px 0;
  position: relative;
  z-index: 1;
}

.swap-flip-btn {
  background: #1a1a1a;
  border: 3px solid #111;
  color: var(--text-dim);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.swap-flip-btn:hover {
  color: var(--text);
  background: #222;
}

.swap-details {
  background: #0a0a0a;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.swap-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0;
}

.swap-detail-row .mono {
  color: var(--text);
}

.swap-detail-row.warning .mono {
  color: #f59e0b;
}

.swap-connect {
  margin-top: 16px;
}

.swap-card .btn {
  width: 100%;
  margin-top: 16px;
}

.swap-card .btn-success {
  background: var(--accent);
  color: #000;
}

.swap-card .btn-error {
  background: #ef4444;
  color: #fff;
}

.swap-status-message {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-align: center;
}

.swap-status-message.approving_token,
.swap-status-message.approving_permit2,
.swap-status-message.swapping {
  background: #f59e0b22;
  color: #f59e0b;
}

.swap-status-message.success {
  background: #10b98122;
  color: var(--accent);
}

.swap-status-message.error {
  background: #ef444422;
  color: #ef4444;
}

.swap-status-message a {
  color: inherit;
  text-decoration: underline;
  margin-left: 4px;
}

.swap-status-message .error-text {
  word-break: break-word;
}

.swap-footer {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-subtle);
  font-family: "JetBrains Mono", monospace;
}

.swap-detail-row .route-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

/* Header Navigation */

.header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
}

.header-title:hover {
  text-decoration: none;
  color: var(--text);
}

.header-spread {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 6px;
}

.header-spread-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}

.header-spread-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.header-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
}

.header-countdown.ready {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  animation: pulse-ready 2s ease-in-out infinite;
}

@keyframes pulse-ready {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.header-countdown-icon {
  color: var(--accent);
  font-size: 8px;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.header-countdown-time {
  font-size: 14px;
  font-weight: 500;
  color: #f59e0b;
}

.header-countdown-label {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.header-countdown-text {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-link {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--text);
  text-decoration: none;
}

.nav-link.active {
  color: var(--text);
}

.nav-link--cta {
  color: var(--accent);
}

.nav-link--cta:hover {
  color: var(--accent);
  opacity: 0.8;
}

/* Header Connect Button */

.header-connect-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-connect-btn:hover {
  background: #222;
  border-color: #444;
}

.header-connect-btn--error {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
}

.header-connect-btn--error:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}

.header-wallet {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-chain-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid #333;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-chain-btn:hover {
  color: var(--text);
  border-color: #444;
  background: rgba(255, 255, 255, 0.03);
}

.header-account-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-account-btn:hover {
  background: #222;
  border-color: #444;
}

/* Header mobile overrides - must come after base styles */

@media (max-width: 768px) {
  .header-center {
    display: none !important;
  }
  .header-content {
    justify-content: space-between;
  }
  .header-right {
    flex: 1;
    justify-content: flex-end;
    gap: 8px;
  }
  .header-nav {
    gap: 12px;
  }
  .nav-link {
    font-size: 12px;
    padding: 4px 0;
  }
  .header-connect-btn,
  .header-account-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .header-nav {
    gap: 8px;
  }
  .nav-link {
    font-size: 11px;
  }
  .header-title {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .hide-mobile {
    display: none;
  }
}

/* Swap Page */

.swap-page {
  min-height: 100vh;
  padding: 100px 24px 60px;
  max-width: 800px;
  margin: 0 auto;
}

.swap-page-header {
  text-align: center;
  margin-bottom: 48px;
}

.swap-page-header h1 {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.swap-page-header p {
  color: var(--text-dim);
  font-size: clamp(14px, 1.8vw, 16px);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.swap-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.swap-page-info {
  max-width: 420px;
  width: 100%;
  padding: 24px;
  background: #0a0a0a;
  border: 1px solid #222;
  border-radius: 12px;
}

.swap-page-info h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.swap-page-info ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.swap-page-info li {
  font-size: 13px;
  color: var(--text-dim);
  padding: 8px 0;
  border-bottom: 1px solid #1a1a1a;
  line-height: 1.5;
}

.swap-page-info li:last-child {
  border-bottom: none;
}

.swap-page-info li strong {
  color: var(--text);
}

.swap-page-links {
  display: flex;
  gap: 12px;
}

.swap-external-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid #333;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.swap-external-link:hover {
  color: var(--text);
  border-color: #444;
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}

/* NFTs Page */

.nfts-page {
  min-height: 100vh;
  padding: 80px 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.nfts-header {
  text-align: center;
  margin-bottom: 48px;
}

.nfts-header h1 {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.nfts-header p {
  color: var(--text-dim);
  font-size: clamp(14px, 1.8vw, 16px);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.nfts-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-dim);
}

.nfts-empty p {
  margin-bottom: 12px;
}

.nfts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* NFT Card */

.nft-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nft-card:hover {
  border-color: #333;
  transform: translateY(-2px);
  text-decoration: none;
}

.nft-card-image {
  position: relative;
  aspect-ratio: 7 / 3;
  background: #0a0a0a;
  overflow: hidden;
}

.nft-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nft-card-placeholder {
  width: 100%;
  height: 100%;
}

.nft-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nft-card-badge.auction-live {
  background: var(--accent);
  color: #000;
}

.nft-card-info {
  padding: 16px;
}

.nft-card-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 12px;
}

.nft-card-colors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.color-swatch-small {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nft-card-colors .spread-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
  margin-left: auto;
}

.nft-card-auction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #0a0a0a;
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.nft-card-auction .auction-label {
  color: var(--text-dim);
}

.nft-card-auction .auction-amount {
  color: var(--text);
  font-weight: 500;
}

.nft-card-auction .auction-winner {
  color: var(--text-dim);
  font-size: 11px;
}

.nft-card-auction.active {
  background: var(--accent-dim);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.nft-card-auction.active .auction-label {
  color: var(--accent);
}

.nft-card-auction.pending {
  background: #1a1a1a;
}

/* Holders Page */

.holders-page {
  min-height: 100vh;
  padding: 80px 24px 60px;
  max-width: 1000px;
  margin: 0 auto;
}

.holders-header {
  text-align: center;
  margin-bottom: 32px;
}

.holders-header h1 {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.holders-header p {
  color: var(--text-dim);
  font-size: clamp(14px, 1.8vw, 16px);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.holders-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 48px;
  padding: 24px;
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
}

.stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.holders-loading,
.holders-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
}

.holders-error {
  margin-top: 12px;
  font-size: 12px;
  color: #f87171;
}

.holders-table-container {
  overflow-x: auto;
}

.holders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "JetBrains Mono", monospace;
}

.holders-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #222;
}

.holders-table td {
  padding: 16px;
  border-bottom: 1px solid #1a1a1a;
  font-size: 14px;
}

.holders-row:hover {
  background: #111;
}

.holders-rank {
  color: var(--text-dim);
  font-size: 13px;
  width: 60px;
}

.holders-address a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.holders-address a:hover {
  color: var(--accent);
}

.holders-count,
.holders-balance {
  font-weight: 500;
  color: var(--text);
}

.holders-closed {
  width: 100px;
}

.closed-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.closed-badge.none {
  background: transparent;
  color: var(--text-dim);
}

.holders-tokens {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.token-chip {
  display: inline-block;
  padding: 4px 8px;
  background: #1a1a1a;
  color: var(--text-dim);
  border-radius: 4px;
  font-size: 11px;
  text-decoration: none;
  transition: all 0.2s;
}

.token-chip:hover {
  background: #222;
  color: var(--text);
  text-decoration: none;
}

.token-chip.more {
  background: transparent;
  color: var(--text-dim);
}

@media (max-width: 768px) {
  .holders-stats {
    gap: 24px;
    padding: 16px;
  }

  .stat-value {
    font-size: 22px;
  }

  .holders-table th,
  .holders-table td {
    padding: 12px 8px;
  }

  .holders-tokens {
    max-width: 150px;
  }
}

/* NFT Detail Page */

.nft-detail-page {
  min-height: 100vh;
  padding: 80px 32px 60px;
  max-width: 1600px;
  margin: 0 auto;
}

.nft-detail-back {
  margin-bottom: 24px;
}

.nft-detail-back a {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.nft-detail-back a:hover {
  color: var(--text);
}

.nft-detail-content {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 1200px) {
  .nft-detail-content {
    grid-template-columns: 1fr 360px;
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  .nft-detail-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nft-detail-page {
    padding: 70px 16px 40px;
  }
}

.nft-detail-artwork {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 7 / 5;
  position: sticky;
  top: 80px;
  align-self: start;
  min-height: 400px;
  max-height: calc(100vh - 120px);
}

@media (max-width: 1024px) {
  .nft-detail-artwork {
    position: static;
    min-height: auto;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .nft-detail-artwork {
    margin: 0 -16px;
    width: calc(100% + 32px);
    border-radius: 0;
    aspect-ratio: auto;
  }

  .nft-detail-iframe {
    min-height: 280px;
    aspect-ratio: 7 / 5;
  }

  .nft-detail-image {
    aspect-ratio: auto;
    height: auto;
  }
}

.nft-detail-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.nft-detail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nft-detail-placeholder {
  width: 100%;
  height: 100%;
}

.nft-detail-panel {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 24px;
}

@media (max-width: 768px) {
  .nft-detail-panel {
    padding: 16px;
    border-radius: 8px;
  }

  .nft-detail-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
}

.nft-detail-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.nft-detail-colors {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #222;
}

.color-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.color-swatch-large {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-display span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}

.nft-detail-stats {
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.nft-detail-stats h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #1a1a1a;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row .stat-label {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}

.stat-row .stat-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
}

.stat-row .stat-value.urgent {
  color: #ef4444;
}

.stat-row a.stat-value {
  text-decoration: none;
}

.stat-row a.stat-value:hover {
  text-decoration: underline;
}

/* Auction Sections */

.nft-detail-auction {
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .nft-detail-auction {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
  }

  .auction-current-bid .value {
    font-size: 26px;
  }

  .nft-detail-stats {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
  }
}

.nft-detail-auction h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.auction-pending {
  text-align: center;
  padding: 20px 0;
}

.auction-pending p {
  color: var(--text-dim);
  font-size: 14px;
}

/* Settled Auction */

.auction-settled .auction-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.auction-winning-bid,
.auction-winner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auction-winning-bid .label,
.auction-winner .label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auction-winning-bid .value {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
}

.auction-winner .value {
  font-size: 14px;
  color: var(--text);
}

/* Live Auction */

.auction-live {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auction-timer {
  text-align: center;
  padding: 16px;
  background: #1a1a1a;
  border-radius: 8px;
}

.auction-timer.urgent {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.auction-timer .timer-label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.auction-timer .timer-value {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
}

.auction-timer.urgent .timer-value {
  color: #ef4444;
}

.auction-timer .timer-note {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

.auction-timer.urgent .timer-note {
  color: #ef4444;
}

.auction-current-bid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auction-current-bid .label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auction-current-bid .value {
  font-family: "JetBrains Mono", monospace;
  font-size: 32px;
  font-weight: 500;
  color: var(--text);
}

.auction-current-bid .bidder {
  font-size: 13px;
  color: var(--text-dim);
}

.auction-current-bid .bidder:hover {
  color: var(--text);
}

/* Bid Form */

.auction-bid-form {
  padding-top: 20px;
  border-top: 1px solid #222;
}

.connect-prompt {
  text-align: center;
  padding: 12px 0;
}

.connect-prompt p {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.connect-prompt .btn.btn-primary {
  width: auto;
  display: inline-block;
  padding: 12px 24px;
  font-size: 13px;
  color: #000;
  background: var(--accent);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
}

.wrong-network-prompt {
  text-align: center;
  padding: 16px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 8px;
}

.wrong-network-prompt p {
  font-size: 13px;
  color: #eab308;
  margin-bottom: 12px;
}

.bid-input-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bid-input-group {
  flex: 1;
  display: flex;
  align-items: center;
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding-right: 16px;
  gap: 8px;
}

.bid-input-group:focus-within {
  border-color: var(--accent);
}

.bid-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 14px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
}

.bid-input:focus {
  outline: none;
}

.bid-unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text-dim);
}

.btn-bid {
  padding: 14px 28px;
  width: 100%;
}

.min-bid-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.bid-error {
  margin-top: 12px;
  padding: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 8px;
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
}

.auction-settle {
  padding-top: 20px;
  border-top: 1px solid #222;
  text-align: center;
}

.auction-settle p {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* Provenance */

.nft-detail-provenance {
  background: #0a0a0a;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 20px;
}

.nft-detail-provenance h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
}

.provenance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #1a1a1a;
  font-size: 13px;
}

.provenance-item:last-child {
  border-bottom: none;
}

.provenance-event {
  color: var(--text-dim);
}

.provenance-detail {
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
}

/* Bid History */

.bid-history {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #222;
}

.bid-history h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bid-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.bid-list .bid-item {
  width: 100%;
}

.bid-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 12px;
  background: #111;
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.bid-info {
  display: contents;
}

.bid-bidder {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bid-bidder:hover {
  color: var(--text);
  text-decoration: underline;
}

.bid-amount {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}

.bid-time {
  font-size: 11px;
  color: var(--text-subtle);
  text-decoration: none;
  transition: color 0.2s;
  grid-column: 1;
}

.bid-time:hover {
  color: var(--text);
}

/* Demo Controls (Mock Mode) */

.demo-controls {
  margin-top: 20px;
  padding: 16px;
  background: #1a1a0a;
  border: 1px dashed #4a4a00;
  border-radius: 8px;
}

.demo-controls h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: #eab308;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.demo-controls-note {
  font-size: 11px;
  color: #a3a300;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
}

.demo-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.demo-buttons .btn {
  flex: 1;
  min-width: 120px;
  font-size: 11px;
  padding: 10px 12px;
  background: #2a2a10;
  border-color: #4a4a00;
  color: #eab308;
}

.demo-buttons .btn:hover {
  background: #3a3a15;
  border-color: #6a6a00;
}

.demo-buttons .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================
   NEW HOMEPAGE STYLES
   ========================================== */

.home {
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
}

/* Hero Section */

.hero {
  padding-top: 56px;
  background: #000;
}

.hero-artwork {
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 7 / 3;
  overflow: hidden;
}

.hero-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #000;
}

/* Live State Bar */

.live-state {
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
  padding: 20px 24px;
}

.live-state-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}

.live-state-spread {
  text-align: center;
}

.live-state-value {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}

.live-state-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

.live-state-status {
  text-align: center;
  min-width: 140px;
}

.live-state-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}

.live-state-desc {
  font-size: 11px;
  color: var(--text-dim);
}

.live-state-colors {
  display: flex;
  gap: 6px;
}

.live-color {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.live-state-prices {
  display: flex;
  gap: 24px;
}

.live-price {
  text-align: center;
}

.live-price-value {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--text);
}

.live-price-label {
  display: block;
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

.live-state-cap {
  text-align: center;
}

.live-cap-value {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--text);
}

.live-cap-label {
  display: block;
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

.live-state-window {
  text-align: center;
}

.live-window-value {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--text);
}

.live-window-label {
  display: block;
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Tagline Section */

.tagline {
  padding: 64px 24px;
  text-align: center;
  background: var(--bg);
}

.tagline-main {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--text);
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
}

.tagline-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-dim);
  font-style: italic;
}

/* Interact Section */

.interact {
  padding: 80px 24px;
  background: #050505;
}

.interact-content {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 1024px) {
  .interact-content {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

.interact-explain {
  padding-right: 24px;
}

.interact-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 32px;
}

/* Loop Diagram */

.loop-diagram {
  margin-bottom: 48px;
}

.loop-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
}

.loop-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.loop-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  padding-top: 4px;
}

.loop-arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text-subtle);
  padding-left: 10px;
}

/* Pool Explanation */

.pool-explain {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.pool-box-home {
  flex: 1;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

.pool-box-home.pool-a {
  background: #111;
  border: 1px solid #222;
}

.pool-box-home.pool-b {
  background: #1a1a1a;
  border: 1px solid #333;
}

.pool-box-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.pool-box-pair {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.pool-box-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 6px;
}

.pool-box-fee {
  font-size: 10px;
  color: var(--text-subtle);
  letter-spacing: 1px;
}

.pool-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
}

.pool-vs span:first-child {
  font-size: 16px;
  color: var(--accent);
  font-weight: 500;
}

.pool-vs-label {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Action Card */

.action-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 28px;
}

.action-card-header {
  margin-bottom: 24px;
  text-align: center;
}

.action-card-header h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.action-card-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

.action-quiet {
  text-align: center;
  padding: 32px 0;
}

.action-quiet p {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.action-quiet-hint {
  font-size: 12px;
  color: var(--text-subtle);
}

.action-direction {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.action-dir-btn {
  flex: 1;
  padding: 16px 12px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.action-dir-btn:hover:not(:disabled) {
  background: #222;
  border-color: #444;
}

.action-dir-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
}

.action-dir-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-dir-icon {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.action-dir-btn.active .action-dir-icon {
  color: var(--accent);
}

.action-dir-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.action-dir-effect {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

.action-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
}

.action-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 14px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
}

.action-input:focus {
  outline: none;
}

.action-input::placeholder {
  color: #444;
}

.action-token {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
}

.action-token-symbol {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.action-max-btn {
  background: var(--accent-dim);
  color: var(--accent);
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-max-btn:hover {
  background: var(--accent);
  color: #000;
}

.action-balance {
  font-size: 12px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  margin-bottom: 16px;
  padding-left: 4px;
}

.action-balance-usd {
  color: var(--text-subtle);
}

.action-input-usd {
  position: absolute;
  right: 16px;
  bottom: -20px;
  font-size: 12px;
  color: var(--text-subtle);
  font-family: "JetBrains Mono", monospace;
}

.action-output-usd {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 13px;
}

/* Action Preview */

.action-preview {
  background: #0a0a0a;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.action-preview--empty {
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
  padding: 20px 16px;
}

.action-preview--close {
  border-color: var(--accent);
  background: rgba(16, 185, 129, 0.05);
}

.action-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.action-preview-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.action-preview-direction {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
}

.action-preview-direction.converge {
  color: var(--accent);
}

.action-preview-direction.diverge {
  color: #f59e0b;
}

.action-preview-spread {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.action-preview-current {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  color: var(--text-dim);
}

.action-preview-arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text-subtle);
}

.action-preview-new {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  color: var(--text);
  font-weight: 500;
}

.action-preview-close {
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 8px;
}

.action-preview-effect {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}

.action-output {
  padding: 12px 16px;
  background: #1a1a1a;
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text-dim);
}

.action-output-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.action-output strong {
  color: var(--text);
}

.action-output-details {
  border-top: 1px solid #333;
  padding-top: 10px;
}

.action-output-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

.action-output-row:last-child {
  margin-bottom: 0;
}

.action-output-row .warning {
  color: #f59e0b;
}

.action-btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
}

.action-status {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  text-align: center;
}

.action-status.approving_token,
.action-status.approving_permit2,
.action-status.swapping {
  background: #f59e0b22;
  color: #f59e0b;
}

.action-status.success {
  background: #10b98122;
  color: var(--accent);
}

.action-status.error {
  background: #ef444422;
  color: #ef4444;
}

.action-status a {
  color: inherit;
  text-decoration: underline;
  margin-left: 4px;
}

.action-advanced {
  margin-top: 16px;
  text-align: center;
}

.action-advanced a {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
}

.action-advanced a:hover {
  color: var(--text);
}

/* Learn More Section */

.learn-more {
  padding: 64px 24px;
  background: var(--bg);
  border-top: 1px solid #1a1a1a;
}

.learn-more-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.learn-more-content p {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 32px;
}

.learn-more-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.learn-more-links .btn {
  min-width: 180px;
}

/* Home Footer */

.home-footer {
  padding: 32px 24px;
  border-top: 1px solid #1a1a1a;
}

.home-footer-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.home-footer-credit {
  font-size: 13px;
  color: var(--text-dim);
}

.home-footer-credit a {
  color: var(--text);
  text-decoration: none;
}

.home-footer-credit a:hover {
  text-decoration: underline;
}

.home-footer-links {
  display: flex;
  gap: 24px;
}

.home-footer-links a {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 400;
}

.home-footer-links a:hover {
  color: var(--text);
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .live-state-content {
    gap: 16px;
  }

  .live-state-spread {
    flex: 0 0 100%;
    margin-bottom: 8px;
  }

  .live-state-status {
    display: none;
  }

  .tagline {
    padding: 48px 20px;
  }

  .interact {
    padding: 48px 20px;
  }

  .interact-explain {
    padding-right: 0;
  }

  .pool-explain {
    flex-direction: column;
    gap: 12px;
  }

  .pool-vs {
    flex-direction: row;
    gap: 8px;
    padding: 8px 16px;
  }

  .home-footer-content {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================
   ABOUT PAGE STYLES
   ========================================== */

.about-page {
  min-height: 100vh;
  padding-top: 56px;
}

.about-hero {
  padding: 80px 24px 60px;
  text-align: center;
  background: #000;
}

.about-hero h1 {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.about-subtitle {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--text-dim);
}

.about-subtitle a {
  color: var(--text);
}

.about-section {
  padding: 80px 24px;
}

.about-section--wide {
  padding: 40px 24px;
}

.about-section--alt {
  background: #050505;
}

.about-section--dark {
  background: #000;
  padding: 64px 24px;
}

.about-section--artist {
  background: #000;
  border-top: 1px solid #222;
}

.about-section--links {
  padding: 48px 24px;
  border-top: 1px solid #222;
}

.about-section-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 32px;
  text-align: center;
}

.about-prose {
  max-width: 680px;
  margin: 0 auto;
}

.about-prose--center {
  text-align: center;
}

.about-prose p {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 1.5em;
}

.about-prose p:last-child {
  margin-bottom: 0;
}

.about-lead {
  font-size: clamp(18px, 2.2vw, 22px) !important;
  line-height: 1.6 !important;
}

.about-emphasis {
  font-family: "JetBrains Mono", monospace !important;
  font-size: clamp(16px, 2vw, 20px) !important;
  line-height: 1.5 !important;
}

.about-quote {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--text);
  text-align: center;
  padding: 48px 24px;
  margin: 48px 0;
  border-left: 3px solid var(--accent);
  background: rgba(16, 185, 129, 0.03);
}

/* About Artwork */

.about-artwork-container {
  max-width: 900px;
  margin: 0 auto;
}

.about-artwork-frame {
  width: 100%;
  aspect-ratio: 7 / 3;
  border: 1px solid #222;
  border-radius: 8px;
  background: #000;
}

/* About Pools Diagram */

.about-pools-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.about-pool-item {
  padding: 24px 32px;
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  text-align: center;
  min-width: 140px;
}

.about-pool-item--artist {
  background: #1a1a1a;
  border-color: #333;
}

.about-pool-fee {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 8px;
}

.about-pool-pair {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.about-pool-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.about-pool-connector {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-pool-vs {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text-dim);
  padding: 12px 20px;
  background: #1a1a1a;
  border-radius: 20px;
}

/* About Color States */

.about-color-states {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px 0;
}

.about-color-state {
  text-align: center;
}

.about-color-pair {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}

.about-color-swatch {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-color-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 4px;
}

.about-color-desc {
  font-size: 11px;
  color: var(--text-dim);
  max-width: 120px;
}

/* About Breath */

.about-breath {
  font-family: "JetBrains Mono", monospace !important;
  font-size: clamp(15px, 2vw, 18px) !important;
  animation: breathe 4s ease-in-out infinite;
}

.about-breath--dim {
  color: var(--text-dim) !important;
  margin-top: 24px !important;
}

/* About Final Statement */

.about-final-statement {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.5;
  text-align: center;
  max-width: 900px;
  margin: 64px auto 0;
  letter-spacing: -1px;
  color: var(--text);
}

/* About Links */

.about-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.about-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid #333;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.about-link:hover {
  border-color: #555;
  background: #111;
  text-decoration: none;
}

.about-credit {
  text-align: center;
  font-size: 13px;
  color: var(--text-subtle);
}

/* Header spread link style */

.header-spread {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.header-spread:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
  text-decoration: none;
}

/* ==========================================
   SPREAD SIMULATOR STYLES
   ========================================== */

.simulator {
  padding: 64px 24px;
  background: #050505;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}

.simulator-content {
  max-width: 900px;
  margin: 0 auto;
}

.simulator-header {
  text-align: center;
  margin-bottom: 40px;
}

.simulator-label {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222;
  border-radius: 4px;
  margin-bottom: 16px;
}

.simulator-intro {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--text-dim);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
  text-wrap: balance;
}

.simulator-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: center;
}

@media (max-width: 800px) {
  .simulator-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.simulator-artwork {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.simulator-canvas {
  width: 100%;
  max-width: 672px;
  height: auto;
  aspect-ratio: 7 / 3;
  border: 1px solid #222;
  border-radius: 8px;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.simulator-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-subtle);
  pointer-events: none;
}

.simulator-artwork-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 12px;
}

.simulator-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.simulator-state {
  text-align: center;
}

.simulator-state-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 36px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

.simulator-state-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.simulator-slider-container {
  padding: 0 4px;
}

.simulator-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: #1a1a1a;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.simulator-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--accent);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid #0a0a0a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.simulator-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.4);
}

.simulator-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.simulator-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--accent);
  border-radius: 50%;
  cursor: grab;
  border: 3px solid #0a0a0a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.simulator-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-subtle);
}

.simulator-colors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.simulator-color {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.simulator-color-gap {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: width 0.2s ease;
}

.simulator-microcopy {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  min-height: 21px;
  transition: color 0.2s ease;
}

.simulator-microcopy.active {
  color: var(--text);
}

.simulator-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 32px;
}

/* Mobile adjustments */

@media (max-width: 800px) {
  .simulator {
    padding: 48px 20px;
  }

  .simulator-controls {
    max-width: 320px;
    margin: 0 auto;
  }

  .simulator-state-value {
    font-size: 28px;
  }
}

/* ==========================================
   UPDATED SWAP PAGE STYLES
   ========================================== */

.swap-page {
  min-height: 100vh;
  padding: 100px 24px 60px;
  max-width: 900px;
  margin: 0 auto;
}

.swap-page-header {
  text-align: center;
  margin-bottom: 32px;
}

.swap-page-header h1 {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.swap-page-header p {
  color: var(--text-dim);
  font-size: clamp(14px, 1.8vw, 16px);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.swap-page-state {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 40px;
  padding: 20px;
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.swap-state-item {
  text-align: center;
}

.swap-state-value {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 4px;
}

.swap-state-value.accent {
  color: var(--accent);
  font-size: 22px;
}

.swap-state-label {
  display: block;
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.swap-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.swap-page-info {
  max-width: 420px;
  width: 100%;
  padding: 24px;
  background: #0a0a0a;
  border: 1px solid #222;
  border-radius: 12px;
}

.swap-page-info h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.swap-page-info ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.swap-page-info li {
  font-size: 13px;
  color: var(--text-dim);
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
  line-height: 1.5;
}

.swap-page-info li:last-child {
  border-bottom: none;
}

.swap-page-info li strong {
  color: var(--text);
}

.swap-page-pools {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.swap-pool {
  flex: 1;
  padding: 16px;
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  text-align: center;
}

.swap-pool-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.swap-pool-pair {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.swap-pool-detail {
  font-size: 11px;
  color: var(--text-subtle);
}

.swap-page-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.swap-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid #333;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.swap-link:hover {
  color: var(--text);
  border-color: #444;
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}

@media (max-width: 768px) {
  .swap-page-state {
    flex-wrap: wrap;
    gap: 20px;
  }

  .swap-page-pools {
    flex-direction: column;
  }
}
/* vanilla-extract-css-ns:src/css/reset.css.ts.vanilla.css?source=Lmlla2JjYzAgewogIGJvcmRlcjogMDsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGZvbnQtc2l6ZTogMTAwJTsKICBsaW5lLWhlaWdodDogbm9ybWFsOwogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwogIHRleHQtYWxpZ246IGxlZnQ7CiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmlla2JjYzEgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KLmlla2JjYzIgewogIHF1b3Rlczogbm9uZTsKfQouaWVrYmNjMjpiZWZvcmUsIC5pZWtiY2MyOmFmdGVyIHsKICBjb250ZW50OiAnJzsKfQouaWVrYmNjMyB7CiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTsKICBib3JkZXItc3BhY2luZzogMDsKfQouaWVrYmNjNCB7CiAgYXBwZWFyYW5jZTogbm9uZTsKfQouaWVrYmNjNSB7CiAgb3V0bGluZTogbm9uZTsKfQouaWVrYmNjNTo6cGxhY2Vob2xkZXIgewogIG9wYWNpdHk6IDE7Cn0KLmlla2JjYzYgewogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OwogIGNvbG9yOiBpbmhlcml0Owp9Ci5pZWtiY2M3OmRpc2FibGVkIHsKICBvcGFjaXR5OiAxOwp9Ci5pZWtiY2M3OjotbXMtZXhwYW5kIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pZWtiY2M4OjotbXMtY2xlYXIgewogIGRpc3BsYXk6IG5vbmU7Cn0KLmlla2JjYzg6Oi13ZWJraXQtc2VhcmNoLWNhbmNlbC1idXR0b24gewogIC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZTsKfQouaWVrYmNjOSB7CiAgYmFja2dyb3VuZDogbm9uZTsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdGV4dC1hbGlnbjogbGVmdDsKfQouaWVrYmNjYSB7CiAgY29sb3I6IGluaGVyaXQ7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9 */
[data-rk] .iekbcc0 {
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  line-height: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
}
[data-rk] .iekbcc1 {
  list-style: none;
}
[data-rk] .iekbcc2 {
  quotes: none;
}
[data-rk] .iekbcc2:before,
[data-rk] .iekbcc2:after {
  content: "";
}
[data-rk] .iekbcc3 {
  border-collapse: collapse;
  border-spacing: 0;
}
[data-rk] .iekbcc4 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
[data-rk] .iekbcc5 {
  outline: none;
}
[data-rk] .iekbcc5::-moz-placeholder {
  opacity: 1;
}
[data-rk] .iekbcc5::placeholder {
  opacity: 1;
}
[data-rk] .iekbcc6 {
  background-color: transparent;
  color: inherit;
}
[data-rk] .iekbcc7:disabled {
  opacity: 1;
}
[data-rk] .iekbcc7::-ms-expand {
  display: none;
}
[data-rk] .iekbcc8::-ms-clear {
  display: none;
}
[data-rk] .iekbcc8::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
[data-rk] .iekbcc9 {
  background: none;
  cursor: pointer;
  text-align: left;
}
[data-rk] .iekbcca {
  color: inherit;
  text-decoration: none;
}

/* vanilla-extract-css-ns:src/css/sprinkles.css.ts.vanilla.css?source=#H4sIAAAAAAAAE6Vdy67rxhHc+yu0CWAvZOhJPbJJrp0gBhJkEQNZU+SQ4hFF6pDU6wT+90DiebCre2aavDtbXV3TNdMcFTm8Rz+/nOfB6jIZ/e+H0SjMs7QYZ4051ttRkpvbuG7CqvnzD3/88HOLm1lwpog7qAVHRaZoTNXBBE9MnNWnPLxvR0VZmE50TaO7vIwOnXBIw48SOtGIRrMizwi56ZRXmzyxaE1kGJWaMhBTun9CdmF0SKvyXMTjOnsz21FUXggsa2FlFZtqXIVxdq63o+mpK+xFggQEchBZJgSTi5g5wRwlzCWsfhyPq8Pzg2wcRk1WFt/OTVMWP3VyC0VuVBaFiRqeXCqSj6Y488yTJrOMw7yb9KpN+le5y3LTTa2k1NnyTx1ILUE2m82GzHXTRdXNPTfbUV3mWbfPzl3MNYub/XZEV/UiIGj7XAXEjCBuAmJBEPcnIjpXdVltR6cyg2Z/I3G4qqftNvOeNTYXUzQ1R01FVJjnXVC7Ex2zYrw3WbpvtqM1KXQ6Z4AFlTJtt6nnRR1nlXl283ZUldcuaCmCojI/H4surt3PkrJoxkl4zPJ7p40en9bjXRnfu/0zXX2ltFvC9Lkao9Fjv/qsegq61ixrrsjasKyFIitkWYGQNaONON2xrLWUBasRYVZL68mKWZY0GzN6wU3NV9b1ozkmky4i4YglRaQcEVDEniNWFJFxxJoi2i0/DU/bEfn88PU5vcin+VeEXtzT41eEbvbT4isC81t+RZY0cvqK0K+g6etXBPqp6lQNTVN3QlB30wlBeedOCKq4dEJQxrUzRVDGrROCse6dEBC+dWaWFj+bdEK0wtm0M+t0rNmsM7kQmn+FxnTpZ+2G9nkx0+CSBKHKgARhxBUJUumzNR0TeDd0UDrZs5BGYdgdjcK4EYnOgTmmUajK0CiMm9AoLFpKZwrG3dMoMGc0CopeSHQJuQcSDWDcHOYZwke6SJNJ16TMChI9hreHO2tMQYx/uxG8nOsmS+4fANtdwskBpv559ipDmYueVTKwPoWRGe9MczWm+4U8q1348OnEu/B2k2nMrRk/3fx2lJuEiDozBC/ywjBZsTdVRoja7ecYVmlWjHdl05RHurvPbhICrue7hIFGf5MwdO+fTyQMbb75VMLQ74P5TMLQi2c+lzD0MpgvRO20oedLEUTVzwMRBNJWIgjqXosgKHwjLggUHoogqGkngmC4SFxbmIJYBIE6I3YA1JSIywugVALBt9R83wU9LjLa/POMx4HhhSNA94EjoO1zjgAxR46Ali84Aqa25AhYxpOgFnrmVYCA3kqAgJxagEC1jQCBcs/C1EO5FwECtVwFCAx0E1YQRN8FCCh6E1aZ1rKYCIsIkCmHQFMvyO5Xtd+k3a5ezAUAcCwECJW8WAoQ2tiLQICAnpUAoa29WAsQOreLjQChi7gIJdG0XRY7CQOyIwkDomIJAyUbCQM1J9IqQM2phIF69hIGxsqk5QTtLxIGdB2kNYd6cmlFAXMUMNjpZNNrSrgxXZQsDPknBgDBrwwAHV4xAMioGQC6u2EAmNAzA8DKXbhM6JErR4DQG0eAkDtHQKFvHEErXU74fNNKl1OOoHUsZxwBo8z5olG1ywVHUC3LJV9XqCPg6waIFUNA/y4/drab/JB0ucE46AgxDhXsMA4zFbHxYYCYFQDrZRgASkgYAGpIEQD3z8s9A0CRGQNADS8MAKt9YPMINeQMAEMcGQBkFgiAm+pliQC4r16e+FoA4pUtJ727XlYIkG+wl++bVlZY+rLBOKzIGeOg9YJxmKwrGx8GuLECYCruDAAlvDEArSGYIAD6MpgyAC0ymDEArSGYMwDty2DB5hFqWDIADBEwAMhcIQD6MlgjAPoy2PC1AETIlpP2ZbBDgNyXQbtfPQ4rk7y8bkf7LI7Jk5ag3bBOYRxnRSo+0AiMCKEdHiQiCBY4FUHUIQR7EQSTnIkg6hSCFxEELXMQQbDouTwFsGxHGQWTUMgoEFjKKCj+JKOg+ld5baD6SkZBXbWMghEbeaFhJs4yCjRe5H6Auq7yWgPqJqLAZQR3guJPOYI3AUA5VhMBQuWvpgKEXgurmQChklZzAUKvg9VCgNBJXi0FCF3TVSCJpj20WkkYkL2WMCBqI2Gg5FDCQM07aRWg5kjCQD2xhIGxjLScoD2RMKArldYc6tlLKwqYTMBAp6/oDik8+lgdJASw5BIGlB8lDHR7IWFAVSlhoN9PEgZm+VXCwIpWonZon1oEgfpGBIG0swiCui8iCAq/igsChd9EENR0F0Ew3Ju4tnQK1hMRRNWtp2IH0JrWM3F5ATSXQND+a7oxsuch6yWPA0PAEaB7xRG07ddrjgAxG46gLb8OOQKmdscRdBnXkaCW9sw6FiCg1wgQkJMIEKg2FSBQ7l6Yeig3EyBQy4sAgYEOwgqC6FyAgKKjsMpQSyEsIkBKDsGmft/9yjprX3cKd3WZnxvyhuYrYJLsZronqusKAJXJwya7EJJ25xtfze6QNeNz/XgBzuQmavgboe3+J3y/rN8PZquw+Bhq8vN0tqxHJqwJxYUBn/+dlNXRltJug87C2k1QvGlf37sxWPC3boyu0WbSjdFe2kzJeJR0MyMD0l7ezEkQhlyQIIy57AbhpnwTkCAUtCJBGHNNgrTbNxsyPzBmSIJAuyNBkBJ1g3DjvYm7Qbjp3hg6txBNyLLQm+1N2g3KN9qbr/eE46o8jZMsb0zVeYtwl5+run0Z9d8XU+UheZtwk32mt68ZdzKjMi+rehxGjxcWfnn8D8l82e4ft/eD8w/bx5vA769VDyHI+2T+vaxMCyMcx/4iLEzFADkWqlLB8fUO9bfne7eE4KRW5aR51Uty8gwphL84vakHqxLImuHaBLZzL5r/mKgs4rC6f/tMIGyXAUJ9nNchen2kNy9blJe14S/db+5Kibb8N60cC0E46ZMpyw+n/UVYmGYD5Fio5n6O7j+isLAstNIUXEu1OAVZMJTlb1VFvz/C1fdp5ITr7xTKGTf9qH4rClNZJi4cotZFuBuk1sUY9aP63dwakh8PkchYzCBdjCbpn8/XPx2qiFPtB8viXH7T+E6SPRY8zqKwAQatefTxqE2kj8hvJuPyWuRlGH97Prv/JaxiSxtrPaWaUG0t1Yx+h/lB9Xt5cvBojaaOTe03dXT+sgzrbK3H5JlqQ8lT/e4xNYWpwpx761DrFe0Mamdop/D7QJL7a3Yk6Voz6CRRO0IXy85vCx//ivS3xhzlpttpPaGHRm0IPTx+N/h8MvDt/fEBydV6QDuD2vnZKfx+7zNXkK+1eC4OtatzkfiNXJvNrq2d1rfZ8tU2zUbgd2XPTDRAO60bk7PVLkxO97uvzzzcArSey0qgdlpWBr+/+kz9vEUnBFp75aFRuysPj99cnaoyyXLz16dDI7laN2VnUNsnO4XfL5HcfzwqJgRao+ShUTskD4+6EPkJ5U5rk9wsasvkpvHbp/YMxsT/Pj2fbfE9TuuivERqM+Vl8nuqugmLeEevNK2VknLVDkpIjt6NU/s3IJ449YP8iHimQQzULg2imPfLlXsxWgyRYuFaDhJlIQtULK7H+NGqhzYn0bqPMCfTZhAFf4Afhd+hTaDbfY9CgS/qSeR5cB/Fg+T6WM0w1T7aRMFnecwfpWqhNoa9XpSNIuuXa5mGlyFSLFyHQaIsZLmGxf9oPzrqBSrYih4SFXTlcB72/DQ6fa9STvn63XI5Z+8CHQ/3o3qYZhdlM1Czi/PclwxvPaPLMKGM5zpQHSO6DWHg3XAfrouTvX2HOMYWa8yn5wAg1ptQH1MPM+qj0phS7UP/WO9N1ZQ9LKqaU+NUVQcAsd6w6vh6+FYdoca+suOCWO9VeW4PY8qTNS7UekgQ6z2nnaOHw7STaPyk65Ag1ptKJ00PZ+nk0dhL9zFBrPeWHqIextLDpHGV1mODWO8l7Rw9HKSdROMbHQcHsd4qulh6uEMXjb4MftXp/Z+NoYfds1Fo3J14oBDrXZ2c38PNyQQaF2c7UIj13s1K0cOx2TiMxqe5jxKM3qZ5iHq4NA+TxqRZjxaM3pXZOXrYMDuJxne5jxWM3nB5iHo4LQ+TxmI5jxeM3m65eXpYLzeRxob5jheM3o15qXqYMi+XxpsJxw9Gb8mk7B5OTEr/MGC3cb0P48dfO/jMaj+Am1iSTK3XIAowXYM4cn9ynIV5mZKso7Z4IbdQVy0kl/6s94voV9OEWV4LG95JW7yX6VUtxUulKIdeRCS71kpycDRqMQ6Ssz77v2GeG+J1zKWvDIHj2luGQHLzZ1+fWf8s05Jk3rUSLPlv6vJlgqT1WpZdzHIImnTdVc9U4qd65s6VSfIXYrLoVbWFZNmvfgtL4E53HWYmK40MJ8NapcFJsemXy88qk3CIDIFnN0iMQBRpGTwHkUncT5mPzvQU6ONLXESWs8kk9Wuype4V9dtyM2WSRepLr6otJId+9VtYcme6/2QxOSq0KGgKjRoFTzmAgJ3IJKfBojjX63BlnExfkuOUMKl7ynNxNX3lucjOahZ8wJRcempiBNe+QhjDrVcqX9z7AAmc5W2IDkaTOg2Y5+AvVRgxH4XGkPk4nMZMe6KXKvyZmktj09RkTremOsJLFaZNR6Txbjomp4Vjp3qpwq/xJI0541lOJ2Y9sEsVvsuerHFZ9mynp3KdyqUKY+XM17grJ4HTYrkP31KFv/IwaMyVh8LprKwnbqnCT9mTNS7Knu30To6DtVRhl1zpGofkylcMzC8NhQeypWosjy3X6XDEo7NU4WzkRI2jkTOdTsZ2PpYq/Is1V+NabMl7p1dxH3/tFVbFw6BxKh4Kp1GxnnntFc7EnqyxIvZsp/dwH2rtFabDw6BxGx4Kp81wnmDtFZbDTaCxH24GpxXxHVPtFY7Ey6ExJl4Spz8Rzqr2ClsipWncSDfvL0cTZ+GojipjilFYxKMfO38zfBWsT7efnlzvA7R/nc7xW9Kj0R9f6LkV/fyZOIJdStiPn2AjyNU7En5dmmA2iHn/jWkC2iGo/aVpgokR8/F70w/UH/8HNiLX2mB7AAA= */
[data-rk] .ju367v0 {
  align-items: flex-start;
}
[data-rk] .ju367v2 {
  align-items: flex-end;
}
[data-rk] .ju367v4 {
  align-items: center;
}
[data-rk] .ju367v6 {
  display: none;
}
[data-rk] .ju367v8 {
  display: block;
}
[data-rk] .ju367va {
  display: flex;
}
[data-rk] .ju367vc {
  display: inline;
}
[data-rk] .ju367ve {
  align-self: flex-start;
}
[data-rk] .ju367vf {
  align-self: flex-end;
}
[data-rk] .ju367vg {
  align-self: center;
}
[data-rk] .ju367vh {
  background-size: cover;
}
[data-rk] .ju367vi {
  border-radius: 1px;
}
[data-rk] .ju367vj {
  border-radius: 6px;
}
[data-rk] .ju367vk {
  border-radius: 10px;
}
[data-rk] .ju367vl {
  border-radius: 13px;
}
[data-rk] .ju367vm {
  border-radius: var(--rk-radii-actionButton);
}
[data-rk] .ju367vn {
  border-radius: var(--rk-radii-connectButton);
}
[data-rk] .ju367vo {
  border-radius: var(--rk-radii-menuButton);
}
[data-rk] .ju367vp {
  border-radius: var(--rk-radii-modal);
}
[data-rk] .ju367vq {
  border-radius: var(--rk-radii-modalMobile);
}
[data-rk] .ju367vr {
  border-radius: 25%;
}
[data-rk] .ju367vs {
  border-radius: 9999px;
}
[data-rk] .ju367vt {
  border-style: solid;
}
[data-rk] .ju367vu {
  border-width: 0px;
}
[data-rk] .ju367vv {
  border-width: 1px;
}
[data-rk] .ju367vw {
  border-width: 2px;
}
[data-rk] .ju367vx {
  border-width: 4px;
}
[data-rk] .ju367vy {
  cursor: pointer;
}
[data-rk] .ju367vz {
  cursor: none;
}
[data-rk] .ju367v10 {
  pointer-events: none;
}
[data-rk] .ju367v11 {
  pointer-events: all;
}
[data-rk] .ju367v12 {
  min-height: 8px;
}
[data-rk] .ju367v13 {
  min-height: 44px;
}
[data-rk] .ju367v14 {
  flex-direction: row;
}
[data-rk] .ju367v15 {
  flex-direction: column;
}
[data-rk] .ju367v16 {
  font-family: var(--rk-fonts-body);
}
[data-rk] .ju367v17 {
  font-size: 12px;
  line-height: 18px;
}
[data-rk] .ju367v18 {
  font-size: 13px;
  line-height: 18px;
}
[data-rk] .ju367v19 {
  font-size: 14px;
  line-height: 18px;
}
[data-rk] .ju367v1a {
  font-size: 16px;
  line-height: 20px;
}
[data-rk] .ju367v1b {
  font-size: 18px;
  line-height: 24px;
}
[data-rk] .ju367v1c {
  font-size: 20px;
  line-height: 24px;
}
[data-rk] .ju367v1d {
  font-size: 23px;
  line-height: 29px;
}
[data-rk] .ju367v1e {
  font-weight: 400;
}
[data-rk] .ju367v1f {
  font-weight: 500;
}
[data-rk] .ju367v1g {
  font-weight: 600;
}
[data-rk] .ju367v1h {
  font-weight: 700;
}
[data-rk] .ju367v1i {
  font-weight: 800;
}
[data-rk] .ju367v1j {
  gap: 0;
}
[data-rk] .ju367v1k {
  gap: 1px;
}
[data-rk] .ju367v1l {
  gap: 2px;
}
[data-rk] .ju367v1m {
  gap: 3px;
}
[data-rk] .ju367v1n {
  gap: 4px;
}
[data-rk] .ju367v1o {
  gap: 5px;
}
[data-rk] .ju367v1p {
  gap: 6px;
}
[data-rk] .ju367v1q {
  gap: 8px;
}
[data-rk] .ju367v1r {
  gap: 10px;
}
[data-rk] .ju367v1s {
  gap: 12px;
}
[data-rk] .ju367v1t {
  gap: 14px;
}
[data-rk] .ju367v1u {
  gap: 16px;
}
[data-rk] .ju367v1v {
  gap: 18px;
}
[data-rk] .ju367v1w {
  gap: 20px;
}
[data-rk] .ju367v1x {
  gap: 24px;
}
[data-rk] .ju367v1y {
  gap: 28px;
}
[data-rk] .ju367v1z {
  gap: 32px;
}
[data-rk] .ju367v20 {
  gap: 36px;
}
[data-rk] .ju367v21 {
  gap: 44px;
}
[data-rk] .ju367v22 {
  gap: 64px;
}
[data-rk] .ju367v23 {
  gap: -1px;
}
[data-rk] .ju367v24 {
  height: 1px;
}
[data-rk] .ju367v25 {
  height: 2px;
}
[data-rk] .ju367v26 {
  height: 4px;
}
[data-rk] .ju367v27 {
  height: 8px;
}
[data-rk] .ju367v28 {
  height: 12px;
}
[data-rk] .ju367v29 {
  height: 20px;
}
[data-rk] .ju367v2a {
  height: 24px;
}
[data-rk] .ju367v2b {
  height: 28px;
}
[data-rk] .ju367v2c {
  height: 30px;
}
[data-rk] .ju367v2d {
  height: 32px;
}
[data-rk] .ju367v2e {
  height: 34px;
}
[data-rk] .ju367v2f {
  height: 36px;
}
[data-rk] .ju367v2g {
  height: 40px;
}
[data-rk] .ju367v2h {
  height: 44px;
}
[data-rk] .ju367v2i {
  height: 48px;
}
[data-rk] .ju367v2j {
  height: 54px;
}
[data-rk] .ju367v2k {
  height: 60px;
}
[data-rk] .ju367v2l {
  height: 200px;
}
[data-rk] .ju367v2m {
  height: 100%;
}
[data-rk] .ju367v2n {
  height: -moz-max-content;
  height: max-content;
}
[data-rk] .ju367v2o {
  justify-content: flex-start;
}
[data-rk] .ju367v2p {
  justify-content: flex-end;
}
[data-rk] .ju367v2q {
  justify-content: center;
}
[data-rk] .ju367v2r {
  justify-content: space-between;
}
[data-rk] .ju367v2s {
  justify-content: space-around;
}
[data-rk] .ju367v2t {
  text-align: left;
}
[data-rk] .ju367v2u {
  text-align: center;
}
[data-rk] .ju367v2v {
  text-align: inherit;
}
[data-rk] .ju367v2w {
  margin-bottom: 0;
}
[data-rk] .ju367v2x {
  margin-bottom: 1px;
}
[data-rk] .ju367v2y {
  margin-bottom: 2px;
}
[data-rk] .ju367v2z {
  margin-bottom: 3px;
}
[data-rk] .ju367v30 {
  margin-bottom: 4px;
}
[data-rk] .ju367v31 {
  margin-bottom: 5px;
}
[data-rk] .ju367v32 {
  margin-bottom: 6px;
}
[data-rk] .ju367v33 {
  margin-bottom: 8px;
}
[data-rk] .ju367v34 {
  margin-bottom: 10px;
}
[data-rk] .ju367v35 {
  margin-bottom: 12px;
}
[data-rk] .ju367v36 {
  margin-bottom: 14px;
}
[data-rk] .ju367v37 {
  margin-bottom: 16px;
}
[data-rk] .ju367v38 {
  margin-bottom: 18px;
}
[data-rk] .ju367v39 {
  margin-bottom: 20px;
}
[data-rk] .ju367v3a {
  margin-bottom: 24px;
}
[data-rk] .ju367v3b {
  margin-bottom: 28px;
}
[data-rk] .ju367v3c {
  margin-bottom: 32px;
}
[data-rk] .ju367v3d {
  margin-bottom: 36px;
}
[data-rk] .ju367v3e {
  margin-bottom: 44px;
}
[data-rk] .ju367v3f {
  margin-bottom: 64px;
}
[data-rk] .ju367v3g {
  margin-bottom: -1px;
}
[data-rk] .ju367v3h {
  margin-left: 0;
}
[data-rk] .ju367v3i {
  margin-left: 1px;
}
[data-rk] .ju367v3j {
  margin-left: 2px;
}
[data-rk] .ju367v3k {
  margin-left: 3px;
}
[data-rk] .ju367v3l {
  margin-left: 4px;
}
[data-rk] .ju367v3m {
  margin-left: 5px;
}
[data-rk] .ju367v3n {
  margin-left: 6px;
}
[data-rk] .ju367v3o {
  margin-left: 8px;
}
[data-rk] .ju367v3p {
  margin-left: 10px;
}
[data-rk] .ju367v3q {
  margin-left: 12px;
}
[data-rk] .ju367v3r {
  margin-left: 14px;
}
[data-rk] .ju367v3s {
  margin-left: 16px;
}
[data-rk] .ju367v3t {
  margin-left: 18px;
}
[data-rk] .ju367v3u {
  margin-left: 20px;
}
[data-rk] .ju367v3v {
  margin-left: 24px;
}
[data-rk] .ju367v3w {
  margin-left: 28px;
}
[data-rk] .ju367v3x {
  margin-left: 32px;
}
[data-rk] .ju367v3y {
  margin-left: 36px;
}
[data-rk] .ju367v3z {
  margin-left: 44px;
}
[data-rk] .ju367v40 {
  margin-left: 64px;
}
[data-rk] .ju367v41 {
  margin-left: -1px;
}
[data-rk] .ju367v42 {
  margin-right: 0;
}
[data-rk] .ju367v43 {
  margin-right: 1px;
}
[data-rk] .ju367v44 {
  margin-right: 2px;
}
[data-rk] .ju367v45 {
  margin-right: 3px;
}
[data-rk] .ju367v46 {
  margin-right: 4px;
}
[data-rk] .ju367v47 {
  margin-right: 5px;
}
[data-rk] .ju367v48 {
  margin-right: 6px;
}
[data-rk] .ju367v49 {
  margin-right: 8px;
}
[data-rk] .ju367v4a {
  margin-right: 10px;
}
[data-rk] .ju367v4b {
  margin-right: 12px;
}
[data-rk] .ju367v4c {
  margin-right: 14px;
}
[data-rk] .ju367v4d {
  margin-right: 16px;
}
[data-rk] .ju367v4e {
  margin-right: 18px;
}
[data-rk] .ju367v4f {
  margin-right: 20px;
}
[data-rk] .ju367v4g {
  margin-right: 24px;
}
[data-rk] .ju367v4h {
  margin-right: 28px;
}
[data-rk] .ju367v4i {
  margin-right: 32px;
}
[data-rk] .ju367v4j {
  margin-right: 36px;
}
[data-rk] .ju367v4k {
  margin-right: 44px;
}
[data-rk] .ju367v4l {
  margin-right: 64px;
}
[data-rk] .ju367v4m {
  margin-right: -1px;
}
[data-rk] .ju367v4n {
  margin-top: 0;
}
[data-rk] .ju367v4o {
  margin-top: 1px;
}
[data-rk] .ju367v4p {
  margin-top: 2px;
}
[data-rk] .ju367v4q {
  margin-top: 3px;
}
[data-rk] .ju367v4r {
  margin-top: 4px;
}
[data-rk] .ju367v4s {
  margin-top: 5px;
}
[data-rk] .ju367v4t {
  margin-top: 6px;
}
[data-rk] .ju367v4u {
  margin-top: 8px;
}
[data-rk] .ju367v4v {
  margin-top: 10px;
}
[data-rk] .ju367v4w {
  margin-top: 12px;
}
[data-rk] .ju367v4x {
  margin-top: 14px;
}
[data-rk] .ju367v4y {
  margin-top: 16px;
}
[data-rk] .ju367v4z {
  margin-top: 18px;
}
[data-rk] .ju367v50 {
  margin-top: 20px;
}
[data-rk] .ju367v51 {
  margin-top: 24px;
}
[data-rk] .ju367v52 {
  margin-top: 28px;
}
[data-rk] .ju367v53 {
  margin-top: 32px;
}
[data-rk] .ju367v54 {
  margin-top: 36px;
}
[data-rk] .ju367v55 {
  margin-top: 44px;
}
[data-rk] .ju367v56 {
  margin-top: 64px;
}
[data-rk] .ju367v57 {
  margin-top: -1px;
}
[data-rk] .ju367v58 {
  max-width: 1px;
}
[data-rk] .ju367v59 {
  max-width: 2px;
}
[data-rk] .ju367v5a {
  max-width: 4px;
}
[data-rk] .ju367v5b {
  max-width: 8px;
}
[data-rk] .ju367v5c {
  max-width: 12px;
}
[data-rk] .ju367v5d {
  max-width: 20px;
}
[data-rk] .ju367v5e {
  max-width: 24px;
}
[data-rk] .ju367v5f {
  max-width: 28px;
}
[data-rk] .ju367v5g {
  max-width: 30px;
}
[data-rk] .ju367v5h {
  max-width: 32px;
}
[data-rk] .ju367v5i {
  max-width: 34px;
}
[data-rk] .ju367v5j {
  max-width: 36px;
}
[data-rk] .ju367v5k {
  max-width: 40px;
}
[data-rk] .ju367v5l {
  max-width: 44px;
}
[data-rk] .ju367v5m {
  max-width: 48px;
}
[data-rk] .ju367v5n {
  max-width: 54px;
}
[data-rk] .ju367v5o {
  max-width: 60px;
}
[data-rk] .ju367v5p {
  max-width: 200px;
}
[data-rk] .ju367v5q {
  max-width: 100%;
}
[data-rk] .ju367v5r {
  max-width: -moz-max-content;
  max-width: max-content;
}
[data-rk] .ju367v5s {
  min-width: 1px;
}
[data-rk] .ju367v5t {
  min-width: 2px;
}
[data-rk] .ju367v5u {
  min-width: 4px;
}
[data-rk] .ju367v5v {
  min-width: 8px;
}
[data-rk] .ju367v5w {
  min-width: 12px;
}
[data-rk] .ju367v5x {
  min-width: 20px;
}
[data-rk] .ju367v5y {
  min-width: 24px;
}
[data-rk] .ju367v5z {
  min-width: 28px;
}
[data-rk] .ju367v60 {
  min-width: 30px;
}
[data-rk] .ju367v61 {
  min-width: 32px;
}
[data-rk] .ju367v62 {
  min-width: 34px;
}
[data-rk] .ju367v63 {
  min-width: 36px;
}
[data-rk] .ju367v64 {
  min-width: 40px;
}
[data-rk] .ju367v65 {
  min-width: 44px;
}
[data-rk] .ju367v66 {
  min-width: 48px;
}
[data-rk] .ju367v67 {
  min-width: 54px;
}
[data-rk] .ju367v68 {
  min-width: 60px;
}
[data-rk] .ju367v69 {
  min-width: 200px;
}
[data-rk] .ju367v6a {
  min-width: 100%;
}
[data-rk] .ju367v6b {
  min-width: -moz-max-content;
  min-width: max-content;
}
[data-rk] .ju367v6c {
  overflow: hidden;
}
[data-rk] .ju367v6d {
  padding-bottom: 0;
}
[data-rk] .ju367v6e {
  padding-bottom: 1px;
}
[data-rk] .ju367v6f {
  padding-bottom: 2px;
}
[data-rk] .ju367v6g {
  padding-bottom: 3px;
}
[data-rk] .ju367v6h {
  padding-bottom: 4px;
}
[data-rk] .ju367v6i {
  padding-bottom: 5px;
}
[data-rk] .ju367v6j {
  padding-bottom: 6px;
}
[data-rk] .ju367v6k {
  padding-bottom: 8px;
}
[data-rk] .ju367v6l {
  padding-bottom: 10px;
}
[data-rk] .ju367v6m {
  padding-bottom: 12px;
}
[data-rk] .ju367v6n {
  padding-bottom: 14px;
}
[data-rk] .ju367v6o {
  padding-bottom: 16px;
}
[data-rk] .ju367v6p {
  padding-bottom: 18px;
}
[data-rk] .ju367v6q {
  padding-bottom: 20px;
}
[data-rk] .ju367v6r {
  padding-bottom: 24px;
}
[data-rk] .ju367v6s {
  padding-bottom: 28px;
}
[data-rk] .ju367v6t {
  padding-bottom: 32px;
}
[data-rk] .ju367v6u {
  padding-bottom: 36px;
}
[data-rk] .ju367v6v {
  padding-bottom: 44px;
}
[data-rk] .ju367v6w {
  padding-bottom: 64px;
}
[data-rk] .ju367v6x {
  padding-bottom: -1px;
}
[data-rk] .ju367v6y {
  padding-left: 0;
}
[data-rk] .ju367v6z {
  padding-left: 1px;
}
[data-rk] .ju367v70 {
  padding-left: 2px;
}
[data-rk] .ju367v71 {
  padding-left: 3px;
}
[data-rk] .ju367v72 {
  padding-left: 4px;
}
[data-rk] .ju367v73 {
  padding-left: 5px;
}
[data-rk] .ju367v74 {
  padding-left: 6px;
}
[data-rk] .ju367v75 {
  padding-left: 8px;
}
[data-rk] .ju367v76 {
  padding-left: 10px;
}
[data-rk] .ju367v77 {
  padding-left: 12px;
}
[data-rk] .ju367v78 {
  padding-left: 14px;
}
[data-rk] .ju367v79 {
  padding-left: 16px;
}
[data-rk] .ju367v7a {
  padding-left: 18px;
}
[data-rk] .ju367v7b {
  padding-left: 20px;
}
[data-rk] .ju367v7c {
  padding-left: 24px;
}
[data-rk] .ju367v7d {
  padding-left: 28px;
}
[data-rk] .ju367v7e {
  padding-left: 32px;
}
[data-rk] .ju367v7f {
  padding-left: 36px;
}
[data-rk] .ju367v7g {
  padding-left: 44px;
}
[data-rk] .ju367v7h {
  padding-left: 64px;
}
[data-rk] .ju367v7i {
  padding-left: -1px;
}
[data-rk] .ju367v7j {
  padding-right: 0;
}
[data-rk] .ju367v7k {
  padding-right: 1px;
}
[data-rk] .ju367v7l {
  padding-right: 2px;
}
[data-rk] .ju367v7m {
  padding-right: 3px;
}
[data-rk] .ju367v7n {
  padding-right: 4px;
}
[data-rk] .ju367v7o {
  padding-right: 5px;
}
[data-rk] .ju367v7p {
  padding-right: 6px;
}
[data-rk] .ju367v7q {
  padding-right: 8px;
}
[data-rk] .ju367v7r {
  padding-right: 10px;
}
[data-rk] .ju367v7s {
  padding-right: 12px;
}
[data-rk] .ju367v7t {
  padding-right: 14px;
}
[data-rk] .ju367v7u {
  padding-right: 16px;
}
[data-rk] .ju367v7v {
  padding-right: 18px;
}
[data-rk] .ju367v7w {
  padding-right: 20px;
}
[data-rk] .ju367v7x {
  padding-right: 24px;
}
[data-rk] .ju367v7y {
  padding-right: 28px;
}
[data-rk] .ju367v7z {
  padding-right: 32px;
}
[data-rk] .ju367v80 {
  padding-right: 36px;
}
[data-rk] .ju367v81 {
  padding-right: 44px;
}
[data-rk] .ju367v82 {
  padding-right: 64px;
}
[data-rk] .ju367v83 {
  padding-right: -1px;
}
[data-rk] .ju367v84 {
  padding-top: 0;
}
[data-rk] .ju367v85 {
  padding-top: 1px;
}
[data-rk] .ju367v86 {
  padding-top: 2px;
}
[data-rk] .ju367v87 {
  padding-top: 3px;
}
[data-rk] .ju367v88 {
  padding-top: 4px;
}
[data-rk] .ju367v89 {
  padding-top: 5px;
}
[data-rk] .ju367v8a {
  padding-top: 6px;
}
[data-rk] .ju367v8b {
  padding-top: 8px;
}
[data-rk] .ju367v8c {
  padding-top: 10px;
}
[data-rk] .ju367v8d {
  padding-top: 12px;
}
[data-rk] .ju367v8e {
  padding-top: 14px;
}
[data-rk] .ju367v8f {
  padding-top: 16px;
}
[data-rk] .ju367v8g {
  padding-top: 18px;
}
[data-rk] .ju367v8h {
  padding-top: 20px;
}
[data-rk] .ju367v8i {
  padding-top: 24px;
}
[data-rk] .ju367v8j {
  padding-top: 28px;
}
[data-rk] .ju367v8k {
  padding-top: 32px;
}
[data-rk] .ju367v8l {
  padding-top: 36px;
}
[data-rk] .ju367v8m {
  padding-top: 44px;
}
[data-rk] .ju367v8n {
  padding-top: 64px;
}
[data-rk] .ju367v8o {
  padding-top: -1px;
}
[data-rk] .ju367v8p {
  position: absolute;
}
[data-rk] .ju367v8q {
  position: fixed;
}
[data-rk] .ju367v8r {
  position: relative;
}
[data-rk] .ju367v8s {
  -webkit-user-select: none;
}
[data-rk] .ju367v8t {
  right: 0;
}
[data-rk] .ju367v8u {
  transition: 0.125s ease;
}
[data-rk] .ju367v8v {
  transition: transform 0.125s ease;
}
[data-rk] .ju367v8w {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
[data-rk] .ju367v8x {
  width: 1px;
}
[data-rk] .ju367v8y {
  width: 2px;
}
[data-rk] .ju367v8z {
  width: 4px;
}
[data-rk] .ju367v90 {
  width: 8px;
}
[data-rk] .ju367v91 {
  width: 12px;
}
[data-rk] .ju367v92 {
  width: 20px;
}
[data-rk] .ju367v93 {
  width: 24px;
}
[data-rk] .ju367v94 {
  width: 28px;
}
[data-rk] .ju367v95 {
  width: 30px;
}
[data-rk] .ju367v96 {
  width: 32px;
}
[data-rk] .ju367v97 {
  width: 34px;
}
[data-rk] .ju367v98 {
  width: 36px;
}
[data-rk] .ju367v99 {
  width: 40px;
}
[data-rk] .ju367v9a {
  width: 44px;
}
[data-rk] .ju367v9b {
  width: 48px;
}
[data-rk] .ju367v9c {
  width: 54px;
}
[data-rk] .ju367v9d {
  width: 60px;
}
[data-rk] .ju367v9e {
  width: 200px;
}
[data-rk] .ju367v9f {
  width: 100%;
}
[data-rk] .ju367v9g {
  width: -moz-max-content;
  width: max-content;
}
[data-rk] .ju367v9h {
  -webkit-backdrop-filter: var(--rk-blurs-modalOverlay);
  backdrop-filter: var(--rk-blurs-modalOverlay);
}
[data-rk] .ju367v9i {
  background: var(--rk-colors-accentColor);
}
[data-rk] .ju367v9j:hover {
  background: var(--rk-colors-accentColor);
}
[data-rk] .ju367v9k:active {
  background: var(--rk-colors-accentColor);
}
[data-rk] .ju367v9l {
  background: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367v9m:hover {
  background: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367v9n:active {
  background: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367v9o {
  background: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367v9p:hover {
  background: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367v9q:active {
  background: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367v9r {
  background: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367v9s:hover {
  background: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367v9t:active {
  background: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367v9u {
  background: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367v9v:hover {
  background: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367v9w:active {
  background: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367v9x {
  background: var(--rk-colors-closeButton);
}
[data-rk] .ju367v9y:hover {
  background: var(--rk-colors-closeButton);
}
[data-rk] .ju367v9z:active {
  background: var(--rk-colors-closeButton);
}
[data-rk] .ju367va0 {
  background: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367va1:hover {
  background: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367va2:active {
  background: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367va3 {
  background: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367va4:hover {
  background: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367va5:active {
  background: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367va6 {
  background: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367va7:hover {
  background: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367va8:active {
  background: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367va9 {
  background: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vaa:hover {
  background: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vab:active {
  background: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vac {
  background: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vad:hover {
  background: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vae:active {
  background: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vaf {
  background: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vag:hover {
  background: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vah:active {
  background: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vai {
  background: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vaj:hover {
  background: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vak:active {
  background: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367val {
  background: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vam:hover {
  background: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367van:active {
  background: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vao {
  background: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vap:hover {
  background: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vaq:active {
  background: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367var {
  background: var(--rk-colors-error);
}
[data-rk] .ju367vas:hover {
  background: var(--rk-colors-error);
}
[data-rk] .ju367vat:active {
  background: var(--rk-colors-error);
}
[data-rk] .ju367vau {
  background: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vav:hover {
  background: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vaw:active {
  background: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vax {
  background: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vay:hover {
  background: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vaz:active {
  background: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vb0 {
  background: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vb1:hover {
  background: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vb2:active {
  background: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vb3 {
  background: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vb4:hover {
  background: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vb5:active {
  background: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vb6 {
  background: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vb7:hover {
  background: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vb8:active {
  background: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vb9 {
  background: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vba:hover {
  background: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vbb:active {
  background: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vbc {
  background: var(--rk-colors-modalText);
}
[data-rk] .ju367vbd:hover {
  background: var(--rk-colors-modalText);
}
[data-rk] .ju367vbe:active {
  background: var(--rk-colors-modalText);
}
[data-rk] .ju367vbf {
  background: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vbg:hover {
  background: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vbh:active {
  background: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vbi {
  background: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vbj:hover {
  background: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vbk:active {
  background: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vbl {
  background: var(--rk-colors-profileAction);
}
[data-rk] .ju367vbm:hover {
  background: var(--rk-colors-profileAction);
}
[data-rk] .ju367vbn:active {
  background: var(--rk-colors-profileAction);
}
[data-rk] .ju367vbo {
  background: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vbp:hover {
  background: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vbq:active {
  background: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vbr {
  background: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vbs:hover {
  background: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vbt:active {
  background: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vbu {
  background: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vbv:hover {
  background: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vbw:active {
  background: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vbx {
  background: var(--rk-colors-standby);
}
[data-rk] .ju367vby:hover {
  background: var(--rk-colors-standby);
}
[data-rk] .ju367vbz:active {
  background: var(--rk-colors-standby);
}
[data-rk] .ju367vc0 {
  border-color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vc1:hover {
  border-color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vc2:active {
  border-color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vc3 {
  border-color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vc4:hover {
  border-color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vc5:active {
  border-color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vc6 {
  border-color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vc7:hover {
  border-color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vc8:active {
  border-color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vc9 {
  border-color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vca:hover {
  border-color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vcb:active {
  border-color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vcc {
  border-color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vcd:hover {
  border-color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vce:active {
  border-color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vcf {
  border-color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vcg:hover {
  border-color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vch:active {
  border-color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vci {
  border-color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vcj:hover {
  border-color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vck:active {
  border-color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vcl {
  border-color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vcm:hover {
  border-color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vcn:active {
  border-color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vco {
  border-color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vcp:hover {
  border-color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vcq:active {
  border-color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vcr {
  border-color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vcs:hover {
  border-color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vct:active {
  border-color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vcu {
  border-color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vcv:hover {
  border-color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vcw:active {
  border-color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vcx {
  border-color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vcy:hover {
  border-color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vcz:active {
  border-color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vd0 {
  border-color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vd1:hover {
  border-color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vd2:active {
  border-color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vd3 {
  border-color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vd4:hover {
  border-color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vd5:active {
  border-color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vd6 {
  border-color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vd7:hover {
  border-color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vd8:active {
  border-color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vd9 {
  border-color: var(--rk-colors-error);
}
[data-rk] .ju367vda:hover {
  border-color: var(--rk-colors-error);
}
[data-rk] .ju367vdb:active {
  border-color: var(--rk-colors-error);
}
[data-rk] .ju367vdc {
  border-color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vdd:hover {
  border-color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vde:active {
  border-color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vdf {
  border-color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vdg:hover {
  border-color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vdh:active {
  border-color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vdi {
  border-color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vdj:hover {
  border-color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vdk:active {
  border-color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vdl {
  border-color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vdm:hover {
  border-color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vdn:active {
  border-color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vdo {
  border-color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vdp:hover {
  border-color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vdq:active {
  border-color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vdr {
  border-color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vds:hover {
  border-color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vdt:active {
  border-color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vdu {
  border-color: var(--rk-colors-modalText);
}
[data-rk] .ju367vdv:hover {
  border-color: var(--rk-colors-modalText);
}
[data-rk] .ju367vdw:active {
  border-color: var(--rk-colors-modalText);
}
[data-rk] .ju367vdx {
  border-color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vdy:hover {
  border-color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vdz:active {
  border-color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367ve0 {
  border-color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367ve1:hover {
  border-color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367ve2:active {
  border-color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367ve3 {
  border-color: var(--rk-colors-profileAction);
}
[data-rk] .ju367ve4:hover {
  border-color: var(--rk-colors-profileAction);
}
[data-rk] .ju367ve5:active {
  border-color: var(--rk-colors-profileAction);
}
[data-rk] .ju367ve6 {
  border-color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367ve7:hover {
  border-color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367ve8:active {
  border-color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367ve9 {
  border-color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vea:hover {
  border-color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367veb:active {
  border-color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vec {
  border-color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367ved:hover {
  border-color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vee:active {
  border-color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vef {
  border-color: var(--rk-colors-standby);
}
[data-rk] .ju367veg:hover {
  border-color: var(--rk-colors-standby);
}
[data-rk] .ju367veh:active {
  border-color: var(--rk-colors-standby);
}
[data-rk] .ju367vei {
  box-shadow: var(--rk-shadows-connectButton);
}
[data-rk] .ju367vej:hover {
  box-shadow: var(--rk-shadows-connectButton);
}
[data-rk] .ju367vek:active {
  box-shadow: var(--rk-shadows-connectButton);
}
[data-rk] .ju367vel {
  box-shadow: var(--rk-shadows-dialog);
}
[data-rk] .ju367vem:hover {
  box-shadow: var(--rk-shadows-dialog);
}
[data-rk] .ju367ven:active {
  box-shadow: var(--rk-shadows-dialog);
}
[data-rk] .ju367veo {
  box-shadow: var(--rk-shadows-profileDetailsAction);
}
[data-rk] .ju367vep:hover {
  box-shadow: var(--rk-shadows-profileDetailsAction);
}
[data-rk] .ju367veq:active {
  box-shadow: var(--rk-shadows-profileDetailsAction);
}
[data-rk] .ju367ver {
  box-shadow: var(--rk-shadows-selectedOption);
}
[data-rk] .ju367ves:hover {
  box-shadow: var(--rk-shadows-selectedOption);
}
[data-rk] .ju367vet:active {
  box-shadow: var(--rk-shadows-selectedOption);
}
[data-rk] .ju367veu {
  box-shadow: var(--rk-shadows-selectedWallet);
}
[data-rk] .ju367vev:hover {
  box-shadow: var(--rk-shadows-selectedWallet);
}
[data-rk] .ju367vew:active {
  box-shadow: var(--rk-shadows-selectedWallet);
}
[data-rk] .ju367vex {
  box-shadow: var(--rk-shadows-walletLogo);
}
[data-rk] .ju367vey:hover {
  box-shadow: var(--rk-shadows-walletLogo);
}
[data-rk] .ju367vez:active {
  box-shadow: var(--rk-shadows-walletLogo);
}
[data-rk] .ju367vf0 {
  color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vf1:hover {
  color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vf2:active {
  color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vf3 {
  color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vf4:hover {
  color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vf5:active {
  color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vf6 {
  color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vf7:hover {
  color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vf8:active {
  color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vf9 {
  color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vfa:hover {
  color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vfb:active {
  color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vfc {
  color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vfd:hover {
  color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vfe:active {
  color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vff {
  color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vfg:hover {
  color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vfh:active {
  color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vfi {
  color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vfj:hover {
  color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vfk:active {
  color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vfl {
  color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vfm:hover {
  color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vfn:active {
  color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vfo {
  color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vfp:hover {
  color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vfq:active {
  color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vfr {
  color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vfs:hover {
  color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vft:active {
  color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vfu {
  color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vfv:hover {
  color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vfw:active {
  color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vfx {
  color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vfy:hover {
  color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vfz:active {
  color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vg0 {
  color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vg1:hover {
  color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vg2:active {
  color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vg3 {
  color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vg4:hover {
  color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vg5:active {
  color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vg6 {
  color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vg7:hover {
  color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vg8:active {
  color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vg9 {
  color: var(--rk-colors-error);
}
[data-rk] .ju367vga:hover {
  color: var(--rk-colors-error);
}
[data-rk] .ju367vgb:active {
  color: var(--rk-colors-error);
}
[data-rk] .ju367vgc {
  color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vgd:hover {
  color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vge:active {
  color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vgf {
  color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vgg:hover {
  color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vgh:active {
  color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vgi {
  color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vgj:hover {
  color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vgk:active {
  color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vgl {
  color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vgm:hover {
  color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vgn:active {
  color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vgo {
  color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vgp:hover {
  color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vgq:active {
  color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vgr {
  color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vgs:hover {
  color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vgt:active {
  color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vgu {
  color: var(--rk-colors-modalText);
}
[data-rk] .ju367vgv:hover {
  color: var(--rk-colors-modalText);
}
[data-rk] .ju367vgw:active {
  color: var(--rk-colors-modalText);
}
[data-rk] .ju367vgx {
  color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vgy:hover {
  color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vgz:active {
  color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vh0 {
  color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vh1:hover {
  color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vh2:active {
  color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vh3 {
  color: var(--rk-colors-profileAction);
}
[data-rk] .ju367vh4:hover {
  color: var(--rk-colors-profileAction);
}
[data-rk] .ju367vh5:active {
  color: var(--rk-colors-profileAction);
}
[data-rk] .ju367vh6 {
  color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vh7:hover {
  color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vh8:active {
  color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vh9 {
  color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vha:hover {
  color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vhb:active {
  color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vhc {
  color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vhd:hover {
  color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vhe:active {
  color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vhf {
  color: var(--rk-colors-standby);
}
[data-rk] .ju367vhg:hover {
  color: var(--rk-colors-standby);
}
[data-rk] .ju367vhh:active {
  color: var(--rk-colors-standby);
}
@media screen and (min-width: 768px) {
  [data-rk] .ju367v1 {
    align-items: flex-start;
  }
  [data-rk] .ju367v3 {
    align-items: flex-end;
  }
  [data-rk] .ju367v5 {
    align-items: center;
  }
  [data-rk] .ju367v7 {
    display: none;
  }
  [data-rk] .ju367v9 {
    display: block;
  }
  [data-rk] .ju367vb {
    display: flex;
  }
  [data-rk] .ju367vd {
    display: inline;
  }
}

/* vanilla-extract-css-ns:src/css/touchableStyles.css.ts.vanilla.css?source=Ll8xMmNibzhpMywuXzEyY2JvOGkzOjphZnRlciB7CiAgLS1fMTJjYm84aTA6IDE7CiAgLS1fMTJjYm84aTE6IDE7Cn0KLl8xMmNibzhpMzpob3ZlciB7CiAgdHJhbnNmb3JtOiBzY2FsZSh2YXIoLS1fMTJjYm84aTApKTsKfQouXzEyY2JvOGkzOmFjdGl2ZSB7CiAgdHJhbnNmb3JtOiBzY2FsZSh2YXIoLS1fMTJjYm84aTEpKTsKfQouXzEyY2JvOGkzOmFjdGl2ZTo6YWZ0ZXIgewogIGNvbnRlbnQ6ICIiOwogIGJvdHRvbTogLTFweDsKICBkaXNwbGF5OiBibG9jazsKICBsZWZ0OiAtMXB4OwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICByaWdodDogLTFweDsKICB0b3A6IC0xcHg7CiAgdHJhbnNmb3JtOiBzY2FsZShjYWxjKCgxIC8gdmFyKC0tXzEyY2JvOGkxKSkgKiB2YXIoLS1fMTJjYm84aTApKSk7Cn0KLl8xMmNibzhpNCwuXzEyY2JvOGk0OjphZnRlciB7CiAgLS1fMTJjYm84aTA6IDEuMDI1Owp9Ci5fMTJjYm84aTUsLl8xMmNibzhpNTo6YWZ0ZXIgewogIC0tXzEyY2JvOGkwOiAxLjE7Cn0KLl8xMmNibzhpNiwuXzEyY2JvOGk2OjphZnRlciB7CiAgLS1fMTJjYm84aTE6IDAuOTU7Cn0KLl8xMmNibzhpNywuXzEyY2JvOGk3OjphZnRlciB7CiAgLS1fMTJjYm84aTE6IDAuOTsKfQ== */
[data-rk] ._12cbo8i3,
[data-rk] ._12cbo8i3::after {
  --_12cbo8i0: 1;
  --_12cbo8i1: 1;
}
[data-rk] ._12cbo8i3:hover {
  transform: scale(var(--_12cbo8i0));
}
[data-rk] ._12cbo8i3:active {
  transform: scale(var(--_12cbo8i1));
}
[data-rk] ._12cbo8i3:active::after {
  content: "";
  bottom: -1px;
  display: block;
  left: -1px;
  position: absolute;
  right: -1px;
  top: -1px;
  transform: scale(calc((1 / var(--_12cbo8i1)) * var(--_12cbo8i0)));
}
[data-rk] ._12cbo8i4,
[data-rk] ._12cbo8i4::after {
  --_12cbo8i0: 1.025;
}
[data-rk] ._12cbo8i5,
[data-rk] ._12cbo8i5::after {
  --_12cbo8i0: 1.1;
}
[data-rk] ._12cbo8i6,
[data-rk] ._12cbo8i6::after {
  --_12cbo8i1: 0.95;
}
[data-rk] ._12cbo8i7,
[data-rk] ._12cbo8i7::after {
  --_12cbo8i1: 0.9;
}

/* vanilla-extract-css-ns:src/components/Icons/Icons.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMWx1dWxlNDEgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7CiAgfQp9Ci5fMWx1dWxlNDIgewogIGFuaW1hdGlvbjogXzFsdXVsZTQxIDNzIGluZmluaXRlIGxpbmVhcjsKfQouXzFsdXVsZTQzIHsKICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChmcm9tIDE4MGRlZyBhdCA1MCUgNTAlLCByZ2JhKDcyLCAxNDYsIDI1NCwgMCkgMGRlZywgY3VycmVudENvbG9yIDI4Mi4wNGRlZywgcmdiYSg3MiwgMTQ2LCAyNTQsIDApIDMxOS44NmRlZywgcmdiYSg3MiwgMTQ2LCAyNTQsIDApIDM2MGRlZyk7CiAgaGVpZ2h0OiAyMXB4OwogIHdpZHRoOiAyMXB4Owp9 */
@keyframes _1luule41 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
[data-rk] ._1luule42 {
  animation: _1luule41 3s infinite linear;
}
[data-rk] ._1luule43 {
  background:
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(72, 146, 254, 0) 0deg,
      currentColor 282.04deg,
      rgba(72, 146, 254, 0) 319.86deg,
      rgba(72, 146, 254, 0) 360deg);
  height: 21px;
  width: 21px;
}

/* vanilla-extract-css-ns:src/components/Dialog/Dialog.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfOXBtNGtpMCB7CiAgMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMCUpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTsKICB9Cn0KQGtleWZyYW1lcyBfOXBtNGtpMSB7CiAgMCUgewogICAgb3BhY2l0eTogMDsKICB9CiAgMTAwJSB7CiAgICBvcGFjaXR5OiAxOwogIH0KfQouXzlwbTRraTMgewogIGFuaW1hdGlvbjogXzlwbTRraTEgMTUwbXMgZWFzZTsKICBib3R0b206IC0yMDBweDsKICBsZWZ0OiAtMjAwcHg7CiAgcGFkZGluZzogMjAwcHg7CiAgcmlnaHQ6IC0yMDBweDsKICB0b3A6IC0yMDBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVooMCk7CiAgei1pbmRleDogMjE0NzQ4MzY0NjsKfQouXzlwbTRraTUgewogIGFuaW1hdGlvbjogXzlwbTRraTAgMzUwbXMgY3ViaWMtYmV6aWVyKC4xNSwxLjE1LDAuNiwxLjAwKSwgXzlwbTRraTEgMTUwbXMgZWFzZTsKICBtYXgtd2lkdGg6IDEwMHZ3Owp9 */
@keyframes _9pm4ki0 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes _9pm4ki1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
[data-rk] ._9pm4ki3 {
  animation: _9pm4ki1 150ms ease;
  bottom: -200px;
  left: -200px;
  padding: 200px;
  right: -200px;
  top: -200px;
  transform: translateZ(0);
  z-index: 2147483646;
}
[data-rk] ._9pm4ki5 {
  animation: _9pm4ki0 350ms cubic-bezier(.15, 1.15, 0.6, 1.00), _9pm4ki1 150ms ease;
  max-width: 100vw;
}

/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=Ll8xY2tqcG9rMSB7CiAgYm94LXNpemluZzogY29udGVudC1ib3g7CiAgbWF4LXdpZHRoOiAxMDB2dzsKICB3aWR0aDogMzYwcHg7Cn0KLl8xY2tqcG9rMiB7CiAgd2lkdGg6IDEwMHZ3Owp9Ci5fMWNranBvazMgewogIG1pbi13aWR0aDogNzIwcHg7CiAgd2lkdGg6IDcyMHB4Owp9Ci5fMWNranBvazQgewogIG1pbi13aWR0aDogMzY4cHg7CiAgd2lkdGg6IDM2OHB4Owp9Ci5fMWNranBvazYgewogIGJvcmRlci13aWR0aDogMHB4OwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgd2lkdGg6IDEwMHZ3Owp9CkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDc2OHB4KSB7CiAgLl8xY2tqcG9rMSB7CiAgICB3aWR0aDogMzYwcHg7CiAgfQogIC5fMWNranBvazIgewogICAgd2lkdGg6IDQ4MHB4OwogIH0KICAuXzFja2pwb2s0IHsKICAgIG1pbi13aWR0aDogMzY4cHg7CiAgICB3aWR0aDogMzY4cHg7CiAgfQp9CkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7CiAgLl8xY2tqcG9rNyB7CiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwOwogICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDA7CiAgICBtYXJnaW4tdG9wOiAtMjAwcHg7CiAgICBwYWRkaW5nLWJvdHRvbTogMjAwcHg7CiAgICB0b3A6IDIwMHB4OwogIH0KfQ== */
[data-rk] ._1ckjpok1 {
  box-sizing: content-box;
  max-width: 100vw;
  width: 360px;
}
[data-rk] ._1ckjpok2 {
  width: 100vw;
}
[data-rk] ._1ckjpok3 {
  min-width: 720px;
  width: 720px;
}
[data-rk] ._1ckjpok4 {
  min-width: 368px;
  width: 368px;
}
[data-rk] ._1ckjpok6 {
  border-width: 0px;
  box-sizing: border-box;
  width: 100vw;
}
@media screen and (min-width: 768px) {
  [data-rk] ._1ckjpok1 {
    width: 360px;
  }
  [data-rk] ._1ckjpok2 {
    width: 480px;
  }
  [data-rk] ._1ckjpok4 {
    min-width: 368px;
    width: 368px;
  }
}
@media screen and (max-width: 767px) {
  [data-rk] ._1ckjpok7 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: -200px;
    padding-bottom: 200px;
    top: 200px;
  }
}

/* vanilla-extract-css-ns:src/components/MenuButton/MenuButton.css.ts.vanilla.css?source=LnY5aG9yYjA6aG92ZXIgewogIGJhY2tncm91bmQ6IHVuc2V0Owp9 */
[data-rk] .v9horb0:hover {
  background: unset;
}

/* vanilla-extract-css-ns:src/components/ChainModal/ChainModal.css.ts.vanilla.css?source=Ll8xOGRxdzl4MCB7CiAgbWF4LWhlaWdodDogNDU2cHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47Cn0KLl8xOGRxdzl4MSB7CiAgbWF4LWhlaWdodDogNDU2cHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47CiAgc2Nyb2xsYmFyLXdpZHRoOiBub25lOwp9Ci5fMThkcXc5eDE6Oi13ZWJraXQtc2Nyb2xsYmFyIHsKICBkaXNwbGF5OiBub25lOwp9 */
[data-rk] ._18dqw9x0 {
  max-height: 456px;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-rk] ._18dqw9x1 {
  max-height: 456px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
[data-rk] ._18dqw9x1::-webkit-scrollbar {
  display: none;
}

/* vanilla-extract-css-ns:src/components/ModalSelection/ModalSelection.css.ts.vanilla.css?source=Lmc1a2wwbDAgewogIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0= */
[data-rk] .g5kl0l0 {
  border-color: transparent;
}

/* vanilla-extract-css-ns:src/components/ConnectOptions/DesktopOptions.css.ts.vanilla.css?source=Ll8xdnd0MGNnMCB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgY29sb3I6IGJsYWNrOwp9Ci5fMXZ3dDBjZzIgewogIG1heC1oZWlnaHQ6IDQ1NHB4OwogIG92ZXJmbG93LXk6IGF1dG87Cn0KLl8xdnd0MGNnMyB7CiAgbWluLXdpZHRoOiAyODdweDsKfQouXzF2d3QwY2c0IHsKICBtaW4td2lkdGg6IDEwMCU7Cn0= */
[data-rk] ._1vwt0cg0 {
  background: white;
  color: black;
}
[data-rk] ._1vwt0cg2 {
  max-height: 454px;
  overflow-y: auto;
}
[data-rk] ._1vwt0cg3 {
  min-width: 287px;
}
[data-rk] ._1vwt0cg4 {
  min-width: 100%;
}

/* vanilla-extract-css-ns:src/components/ConnectOptions/MobileOptions.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMWFtMTQ0MTEgewogIDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAtMjgzOwogIH0KfQouXzFhbTE0NDEwIHsKICBvdmVyZmxvdzogYXV0bzsKICBzY3JvbGxiYXItd2lkdGg6IG5vbmU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDApOwp9Ci5fMWFtMTQ0MTA6Oi13ZWJraXQtc2Nyb2xsYmFyIHsKICBkaXNwbGF5OiBub25lOwp9Ci5fMWFtMTQ0MTIgewogIGFuaW1hdGlvbjogXzFhbTE0NDExIDFzIGxpbmVhciBpbmZpbml0ZTsKICBzdHJva2UtZGFzaGFycmF5OiA5OCAxOTY7CiAgZmlsbDogbm9uZTsKICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgc3Ryb2tlLXdpZHRoOiA0Owp9Ci5fMWFtMTQ0MTMgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKfQ== */
@keyframes _1am14411 {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -283;
  }
}
[data-rk] ._1am14410 {
  overflow: auto;
  scrollbar-width: none;
  transform: translateZ(0);
}
[data-rk] ._1am14410::-webkit-scrollbar {
  display: none;
}
[data-rk] ._1am14412 {
  animation: _1am14411 1s linear infinite;
  stroke-dasharray: 98 196;
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}
[data-rk] ._1am14413 {
  position: absolute;
}

/* vanilla-extract-css-ns:src/components/WalletButton/WalletButton.css.ts.vanilla.css?source=Ll8xeTJsbmZpMCB7CiAgYm9yZGVyOiAxcHggc29saWQgcmdiYSgxNiwgMjEsIDMxLCAwLjA2KTsKfQouXzF5MmxuZmkxIHsKICBtYXgtd2lkdGg6IGZpdC1jb250ZW50Owp9 */
[data-rk] ._1y2lnfi0 {
  border: 1px solid rgba(16, 21, 31, 0.06);
}
[data-rk] ._1y2lnfi1 {
  max-width: -moz-fit-content;
  max-width: fit-content;
}