/* The supplied meadow stays unobstructed. Surfaces belong only to controls. */
:root, body[data-mode], body[data-scene-mode], .lx-swap-card, .lx-native-picker-modal {
  --lx-text: #f7f5f0; --lx-muted: #e2ded6; --lx-faint: #cbc7bf;
  --lx-linen: transparent; --lx-soft: rgba(22,22,24,.64);
  --lx-input-bg: rgba(22,22,24,.9); --lx-border: rgba(243,240,232,.38);
  --lx-line: rgba(243,240,232,.24); --lx-line-strong: rgba(243,240,232,.56);
  --lx-lime: #eae5dc; --lx-lime-soft: rgba(234,229,220,.14); --lx-lime-ink: #202022;
  --lx-good: #d2e6a5; --lx-error: #ffc0a7; --lx-shadow: none;
}
html, body { height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; }
body { overscroll-behavior-y: auto; }
#site { min-height: 100dvh; }
#site::before { content: none; }
.lx-header { position: relative; top: auto; left: auto; right: auto; width: min(1480px, calc(100% - 96px)); height: auto; min-height: 84px; margin: 0 auto; padding-top: env(safe-area-inset-top); gap: 20px; }
.lx-brand { color: var(--lx-text); text-align: left; font-size: 27px !important; font-weight: 650 !important; letter-spacing: -.055em; }
.lx-brand > span { display: block; margin-top: 7px; color: var(--lx-muted); font-size: 11px; font-weight: 450; letter-spacing: 0; }
.lx-brand, .lx-touch-grass, body[data-mode] .lx-top-nav button { text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.lx-header-actions { display: flex; align-items: center; gap: 24px; }
.lx-touch-grass, .lx-nature-exit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--lx-lime); font: 500 14px/1.3 var(--lx-sans); }
.lx-touch-grass svg, .lx-nature-exit svg, .lx-ui-icon { flex: none; width: 20px; height: 20px; }
.lx-wallet-btn { min-height: 44px; padding: 11px 19px; gap: 8px; border: 1px solid var(--lx-border); border-radius: 4px; background: var(--lx-soft); color: var(--lx-text); font-size: 14px !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lx-wallet-dot, .lx-wallet-btn .lx-ui-icon { display: none; }
body[data-mode] .lx-top-nav { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 43%; transform: translateX(-50%); gap: 28px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-mode] .lx-top-nav button { position: relative; min-height: 44px; padding: 10px 0; border-radius: 0; color: var(--lx-muted); font: 450 14px/1.4 var(--lx-sans); background: none; }
body[data-mode] .lx-top-nav button[aria-selected="true"] { color: var(--lx-lime); font-weight: 600; background: none; }
body[data-mode] .lx-top-nav button[aria-selected="true"]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--lx-lime); }
.lx-app-main, .lx-app-main:has(> .lx-swap-page:not([hidden])) { position: relative; top: auto; bottom: auto; left: auto; transform: none; height: auto; width: min(1480px, calc(100% - 96px)); overflow: visible; margin: 24px auto 0; padding: 0 0 48px; overscroll-behavior: auto; pointer-events: auto; }
.lx-page { color: var(--lx-text); text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.lx-page-head { align-items: center; margin-bottom: 24px; gap: 32px; }
.lx-title { color: var(--lx-text); font-size: clamp(40px, 3.5vw, 52px); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
.lx-subtitle { max-width: 780px; margin-top: 10px; color: var(--lx-text); font-size: 16px; line-height: 1.5; }
.lx-card, .lx-launch-card, .lx-empty { border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lx-card { padding: 0; }
.lx-primary, .lx-secondary { min-height: 46px; padding: 12px 20px; border-radius: 4px; font-size: 14px !important; font-weight: 550 !important; box-shadow: none; text-shadow: none; }
.lx-primary { background: var(--lx-lime); border-color: var(--lx-lime); color: var(--lx-lime-ink); }
.lx-primary:hover { background: #f6f2ea; border-color: #f6f2ea; }
.lx-secondary { background: var(--lx-input-bg); border-color: var(--lx-border); color: var(--lx-text); }
.lx-secondary:hover { background: rgba(32,32,34,.96); }
.lx-primary:disabled, .lx-secondary:disabled { opacity: .6; }
.lx-field > span { font-size: 14px; color: var(--lx-text); }
.lx-field small { color: var(--lx-muted); font-size: 12px; line-height: 1.5; }
.lx-field > span > i { color: var(--lx-lime); }
.lx-input, .lx-textarea, .lx-select, .lx-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .lx-field textarea, .lx-field select { min-height: 46px; padding: 11px 13px; border-color: var(--lx-border); border-radius: 4px; background: var(--lx-input-bg); color: var(--lx-text); font-size: 16px; text-shadow: none; }
.lx-field select, select.lx-select, body[data-mode="night"] :is(.lx-field select, select.lx-select) { color-scheme: dark; }
.lx-select option { background: #161618; color: var(--lx-text); }
.lx-input::placeholder, .lx-textarea::placeholder, .lx-field input::placeholder, .lx-field textarea::placeholder { color: var(--lx-muted); opacity: .8; }
.lx-input:focus, .lx-textarea:focus, .lx-select:focus, .lx-field :is(input, textarea, select):focus { border-color: var(--lx-line-strong); }
.lx-note, .lx-status { font-size: 13px; }
.lx-status { border: 0; border-left: 2px solid var(--lx-line-strong); border-radius: 0; padding: 10px 13px; background: var(--lx-input-bg); }
.lx-summary { margin: 20px 0; padding: 16px 0; }
.lx-summary > div, .lx-summary dt, .lx-summary dd { font-size: 13px; line-height: 1.5; }
.lx-badge { border: 1px solid var(--lx-line); border-radius: 2px; background: var(--lx-soft); font-size: 10px; }
.lx-app-main :is(button, a, input, textarea, select):focus-visible, .lx-header button:focus-visible, body[data-mode] .lx-top-nav button:focus-visible, .lx-modal :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--lx-lime); outline-offset: 3px; }
.lx-swap-page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr); column-gap: clamp(60px, 9vw, 144px); align-items: center; min-height: 540px; padding-top: 8px; }
.lx-swap-intro { grid-column: 1; grid-row: 1; text-align: left; margin: 0; padding: 0; }
.lx-swap-intro h1 { color: var(--lx-text); font-size: clamp(54px, 5.6vw, 82px); line-height: 1.02; font-weight: 650; letter-spacing: -.055em; }
.lx-swap-intro p { max-width: 470px; margin: 20px 0 0; color: var(--lx-text); font-size: 18px; line-height: 1.5; }
.lx-swap-card { grid-column: 2; grid-row: 1; justify-self: end; width: 100%; max-width: 540px; margin: 0; padding: 0; overflow: visible; }
.lx-swap-card-head { gap: 12px; padding: 0; margin: 0 0 18px; }
.lx-swap-card-head > span { color: var(--lx-text); font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
.lx-meadow-flower { display: none; }
.lx-icon-button { width: 40px; height: 40px; border: 0; border-radius: 0; color: var(--lx-text); background: transparent; }
.lx-icon-button:hover { background: transparent; }
.lx-swap-leg { padding: 0; border: 0; border-radius: 0; background: none; }
.lx-swap-leg-head { font-size: 12px; margin-bottom: 8px; gap: 14px; }
.lx-swap-leg-head > :first-child { font-size: 14px; font-weight: 500; }
.lx-swap-leg-head > :last-child { max-width: 64%; }
.lx-swap-amount-row { gap: 12px; min-height: 70px; padding: 6px 12px; background: var(--lx-input-bg); border: 1px solid var(--lx-border); border-radius: 4px; text-shadow: none; }
#swap-amount, .lx-swap-output { font: 400 40px/1.2 var(--lx-sans); letter-spacing: -.055em; }
#swap-amount::placeholder { color: var(--lx-faint); }
#swap-amount:focus-visible { outline: none; box-shadow: 0 2px var(--lx-lime); }
.lx-coin-picker { flex: 0 0 178px; min-width: 0; max-width: 66%; min-height: 52px; padding: 5px 0 5px 12px; gap: 10px; border: 0; border-left: 1px solid var(--lx-line); border-radius: 0; background: transparent; }
.lx-coin-picker:hover { background: transparent; border-color: var(--lx-border); }
.lx-coin-picker strong { font-size: 17px; }
.lx-coin-picker small { font-size: 12px; margin-top: 3px; }
.lx-picker-chevron svg { width: 16px; height: 16px; display: block; }
.lx-native-mark, .lx-native-row-icon { width: 32px; height: 32px; border: 0; border-radius: 0; background: transparent; color: var(--lx-text); font-size: 10px; }
:is(.lx-native-mark, .lx-native-row-icon)[data-native-symbol="ETH"] { background: url('assets/native-eth.svg') center / 85% 85% no-repeat; font-size: 0; }
:is(.lx-native-mark, .lx-native-row-icon)[data-native-symbol="SOL"] { background: url('assets/native-sol.svg') center / 80% 80% no-repeat; font-size: 0; }
.lx-swap-pay-foot { margin-top: 12px; color: var(--lx-text); font-size: 12px; }
#swap-max { padding: 5px 8px; border-radius: 2px; border: 1px solid var(--lx-line); background: var(--lx-soft); color: var(--lx-text); font-size: 12px; }
.lx-swap-divider { gap: 12px; margin: 12px 0; }
.lx-swap-divider > span { opacity: 1; background: var(--lx-line-strong); }
.lx-swap-divider > button { width: 38px; height: 38px; border: 1px solid var(--lx-line-strong); border-radius: 50%; background: var(--lx-input-bg); color: var(--lx-text); }
.lx-swap-divider > button:hover { transform: none; background: rgba(32,32,34,.96); }
.lx-swap-divider svg { width: 22px; height: 22px; }
.lx-swap-receive-note { font-size: 12px; margin-top: 16px; color: var(--lx-text); }
.lx-swap-submit { min-height: 48px; margin-top: 18px; border-radius: 4px; font-size: 15px !important; }
.lx-swap-submit > span { margin-left: 0; }
.lx-swap-footer { margin-top: 14px; font-size: 12px; color: var(--lx-text); }
.lx-swap-footer i { display: none; }
.lx-swap-recovery { grid-column: 2; justify-self: end; width: 100%; max-width: 540px; margin: 20px 0 0; }
.lx-swap-recovery h2 { font-size: 15px; }
#sound { display: none; }
body[data-lx-view="nature"] { height: 100dvh; overflow: hidden; }
body[data-lx-view="nature"] #sound { display: grid; }
body[data-lx-view="nature"] #lx-toast { display: none; }
body[data-lx-view="nature"] .lx-advanced > summary::after { content: none; }
.lx-nature-exit { position: fixed; z-index: 30; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); padding: 10px 16px; border: 1px solid var(--lx-border); border-radius: 4px; background: var(--lx-input-bg); color: var(--lx-text); }
.lx-scene-credits { position: fixed; z-index: 20; left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); color: var(--lx-text); font: 12px/1.4 var(--lx-sans); text-shadow: 0 1px 5px #161618; text-underline-offset: 3px; }
body[data-mode] .lx-scene-times { font-family: var(--lx-sans); background: var(--lx-input-bg); border-color: var(--lx-border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-mode] .lx-scene-times .tg-pill-ind { background: var(--lx-lime); box-shadow: none; }
body[data-mode] .lx-scene-times button { color: var(--lx-text); }
body[data-mode] .lx-scene-times button[aria-checked="true"] { color: var(--lx-lime-ink); }
body[data-mode] .sound { background: var(--lx-input-bg); color: var(--lx-text); border-color: var(--lx-border); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 1080px) {
  .lx-header, .lx-app-main, .lx-app-main:has(> .lx-swap-page:not([hidden])) { width: 90%; }
  .lx-header { padding-bottom: 54px; min-height: 128px; }
  body[data-mode] .lx-top-nav { top: 84px; left: 5%; transform: none; }
  .lx-app-main, .lx-app-main:has(> .lx-swap-page:not([hidden])) { margin-top: 22px; }
  .lx-swap-page { gap: 40px; }
  .lx-swap-intro h1 { font-size: 60px; }
  .lx-header-actions { gap: 18px; }
}
@media (max-width: 750px) {
  .lx-header, .lx-app-main, .lx-app-main:has(> .lx-swap-page:not([hidden])) { width: calc(100% - 40px); }
  .lx-header { min-height: calc(112px + env(safe-area-inset-top, 0px)); padding-bottom: 46px; gap: 12px; }
  .lx-app-main, .lx-app-main:has(> .lx-swap-page:not([hidden])) { margin-top: 18px; }
  .lx-brand { font-size: 23px !important; }
  .lx-header-actions { gap: 12px; }
  .lx-touch-grass { font-size: 12px; gap: 5px; }
  .lx-touch-grass svg { width: 17px; height: 17px; }
  .lx-wallet-btn { min-height: 40px; padding: 10px; font-size: 12px !important; }
  body[data-mode] .lx-top-nav { left: 20px; top: calc(70px + env(safe-area-inset-top, 0px)); gap: 28px; }
  body[data-mode] .lx-top-nav button { font-size: 14px; min-height: 38px; }
  .lx-page-head { flex-wrap: wrap; gap: 20px; margin-bottom: 22px; }
  .lx-title { font-size: 36px; }
  .lx-subtitle { font-size: 15px; }
  .lx-swap-page { display: block; min-height: 0; padding-top: 0; }
  .lx-swap-intro { margin-bottom: 30px; }
  .lx-swap-intro h1 { font-size: 48px; }
  .lx-swap-intro p { max-width: 380px; font-size: 15px; margin-top: 14px; }
  .lx-swap-card-head > span { font-size: 22px; }
  .lx-swap-card { margin-bottom: 30px; }
  .lx-swap-leg-head { font-size: 11px; }
  .lx-swap-leg-head > :last-child { font-size: 11px; }
  #swap-amount, .lx-swap-output { font-size: 36px; }
  .lx-swap-amount-row { min-height: 64px; padding: 5px 10px; gap: 10px; }
  .lx-coin-picker { flex-basis: 160px; min-height: 52px; padding: 5px 0 5px 10px; gap: 8px; }
  .lx-coin-picker strong { font-size: 16px; }
  .lx-swap-recovery { margin-top: 24px; }
  .lx-nature-exit { top: 14px; right: 14px; min-height: 40px; padding: 9px 11px; font-size: 12px; }
  .lx-scene-times { top: 68px; }
}
@media (max-width: 370px) {
  .lx-header, .lx-app-main, .lx-app-main:has(> .lx-swap-page:not([hidden])) { width: calc(100% - 32px); }
  .lx-brand { font-size: 21px !important; }
  .lx-header-actions { gap: 8px; }
  .lx-touch-grass { font-size: 11px; }
  .lx-touch-grass svg { display: none; }
  .lx-wallet-btn { font-size: 11px !important; padding-inline: 8px; }
  body[data-mode] .lx-top-nav { left: 16px; }
  .lx-coin-picker { flex-basis: 142px; }
  .lx-swap-intro h1 { font-size: 44px; }
}
@media(prefers-reduced-motion: reduce) { #scene, #hand, .tg-pill-ind { transition: none; } }

/* brand logo */
.lx-brand-logo{display:block;height:24px;width:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
@media(max-width:900px){.lx-brand-logo{height:21px}}
@media(max-width:560px){.lx-brand-logo{height:19px}}