.jup-swap {
  --jupiter-plugin-primary: 245, 74, 81;
  --jupiter-plugin-background: 18, 18, 18;
  --jupiter-plugin-primaryText: 250, 250, 250;
  --jupiter-plugin-warning: 251, 191, 36;
  --jupiter-plugin-interactive: 48, 48, 48;
  --jupiter-plugin-module: 30, 30, 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  align-items: start;
  gap: 36px;
  margin: 30px 0;
  padding: 30px;
  color: #fafafa;
  background: #121212;
}
.jup-swap-copy { min-width: 0; padding-top: 4px; }
.jup-swap-label { margin: 0 0 16px; color: #bdbdbd; font: 700 .68rem/1.5 var(--body, 'DM Sans', Arial, sans-serif); letter-spacing: .12em; }
.jup-swap-copy h3 { margin: 0 0 16px; max-width: 9ch; font: 800 clamp(2.5rem, 4vw, 4rem)/.96 var(--display, 'Barlow Condensed', Impact, sans-serif); letter-spacing: -.02em; text-wrap: balance; }
.jup-swap-copy > p:not(.jup-swap-label) { max-width: 32ch; margin: 0; color: #d0d0d0; font-size: .88rem; line-height: 1.6; }
.jup-swap-copy .jup-swap-detail { margin-top: 20px !important; padding-top: 18px; border-top: 1px solid #424242; color: #bdbdbd !important; font-size: .77rem !important; }
.jup-swap-panel { min-width: 0; }
.jup-swap-stage { position: relative; min-width: 0; background: #1e1e1e; }
.jup-swap-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 258px; padding: 28px 24px; text-align: center; }
.jup-swap-intro > svg { margin-bottom: 20px; color: #fafafa; }
.jup-swap-intro p { max-width: 27ch; margin: 0 0 20px; color: #d0d0d0; font-size: .84rem; line-height: 1.6; }
.jup-swap-open { display: inline-flex; justify-content: center; align-items: center; min-height: 49px; width: 100%; max-width: 260px; padding: 14px 24px; border: 0; background: var(--red, #ed1c24); color: #fff; font: 700 .88rem/1.4 var(--body, 'DM Sans', Arial, sans-serif); cursor: pointer; }
.jup-swap-open:disabled { cursor: progress; background: #414141; color: #e0e0e0; }
.jup-swap-open:focus-visible, .jup-swap-outbound:focus-visible { outline: 3px solid #fafafa; outline-offset: 5px; }
.jup-swap-mount { width: 100%; min-width: 0; height: 600px; background: #121212; }
.jup-swap-mount:focus { outline: none; }
.jup-swap [hidden] { display: none !important; }
.jup-swap[data-swap-state="loading"] .jup-swap-intro { position: absolute; z-index: 2; inset: 0; background: #1e1e1e; }
.jup-swap[data-swap-state="loading"] .jup-swap-stage { min-height: 258px; }
.jup-swap-status { min-height: 2.9em; margin: 13px 0 8px; color: #bdbdbd; font-size: .73rem; line-height: 1.5; }
.jup-swap[data-swap-state="error"] .jup-swap-status { color: #ffc7c9; }
.jup-swap-outbound { display: inline-flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 44px; width: 100%; color: #fafafa; font-size: .79rem; line-height: 1.4; font-weight: 600; text-decoration: none; }
.jup-swap-outbound svg { flex-shrink: 0; }
.jup-swap-outbound:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .jup-swap { grid-template-columns: minmax(0, 1fr); gap: 25px; padding: 25px; }
  .jup-swap-copy h3 { max-width: none; font-size: 2.7rem; }
  .jup-swap-copy > p:not(.jup-swap-label) { max-width: 45ch; }
  .jup-swap-copy .jup-swap-detail { margin-top: 13px !important; padding-top: 13px; }
  .jup-swap-panel { width: 100%; max-width: 430px; justify-self: center; }
}
@media (max-width: 420px) {
  .jup-swap { padding: 20px 10px 12px; gap: 21px; margin-left: -10px; margin-right: -10px; }
  .jup-swap-copy { padding: 0 10px; }
  .jup-swap-copy h3 { font-size: 2.45rem; }
  .jup-swap-label { font-size: .61rem; margin-bottom: 13px; }
  .jup-swap-copy > p:not(.jup-swap-label) { font-size: .8rem; }
  .jup-swap-intro { padding: 24px 17px; min-height: 250px; }
  .jup-swap-status, .jup-swap-outbound { padding-left: 6px; padding-right: 6px; }
}