/* Glossy desktop controls inspired by the supplied Heyclicky reference. */
:root {
  --clicky-silver: linear-gradient(180deg,#fff 0%,#f4f5f5 18%,#e0e3e8 48%,#cdd3dc 52%,#edf0f4 100%);
  --clicky-blue: linear-gradient(180deg,#f0f7ff 0%,#d7e9ff 18%,#a1c8ff 48%,#86b5ee 52%,#b1ddfb 100%);
  --clicky-lilac: linear-gradient(180deg,#faf4ff 0%,#eee1ff 18%,#d0b4f4 48%,#b99adc 52%,#e5d6fc 100%);
  --clicky-face: var(--clicky-silver);
  --clicky-edge: #737d8b;
  --clicky-shadow: 0 3px 2px #fff8,0 8px 18px #293c5923,inset 0 1px 1px #fff,inset 0 -2px 2px #fff9,inset 0 -5px 5px #243c5e26;
}

:is(.button,.pool-add,.filter,.amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro) {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#17253c;
  background:var(--clicky-face);
  border:1px solid var(--clicky-edge);
  border-radius:999px;
  box-shadow:var(--clicky-shadow);
  text-shadow:0 1px 1px #fffffff0;
  font-family:Neo,Arial,sans-serif;
  font-weight:400;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  -webkit-user-select:none;
  user-select:none;
}

:is(.button,.pool-add,.filter,.amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro)::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:3px;
  left:12px;
  right:12px;
  height:39%;
  border-radius:999px 999px 45% 45%;
  background:linear-gradient(#ffffffe8,#ffffff0a);
  pointer-events:none;
}

.button { min-height:50px;padding:12px 25px 14px;gap:30px;font-size:17px;line-height:1.3;letter-spacing:-.4px; }
.button-dark,.pool-add { --clicky-face:var(--clicky-blue);--clicky-edge:#48598e; }
.button-light { --clicky-face:var(--clicky-silver);--clicky-edge:#777c89; }
.hero-buttons { gap:18px; }
.hero-buttons .button { min-width:218px;justify-content:space-between; }
.header-actions .button.small { min-height:40px;padding:8px 18px 10px;font-size:15px;gap:22px; }
.button>span { font-size:21px;line-height:1; }
.routes .button-dark,.closing .button-light { --clicky-face:var(--clicky-lilac);--clicky-edge:#716184; }
.closing .closing-action .button { padding:13px 25px 15px; }
.pool-add { min-height:40px;padding:8px 15px 10px; }
.filter { min-height:40px;padding:9px 16px 11px;color:#414854; }
.filter.active,.withdraw-options button.selected { --clicky-face:var(--clicky-blue);--clicky-edge:#48598e;background:var(--clicky-face);border-color:var(--clicky-edge);color:#17253c; }
.filter.active::after { content:'';width:5px;height:5px;border-radius:50%;background:#244e8e;display:inline-block;margin:0 0 2px 8px;box-shadow:0 1px 1px #fff; }
.amount-presets button,.position-buttons button { min-height:36px; }
.withdraw-options button { min-height:42px; }

@media(hover:hover) {
  :is(.button,.pool-add,.filter,.amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro):hover:not(:disabled) {
    background:var(--clicky-face);
    color:#17253c;
    transform:translateY(-2px);
    filter:brightness(1.035) saturate(1.1);
    box-shadow:0 3px 2px #fff8,0 11px 22px #293c592c,inset 0 1px 1px #fff,inset 0 -2px 2px #fffc,inset 0 -5px 5px #243c5e26;
  }
}
:is(.button,.pool-add,.filter,.amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro):active:not(:disabled) {
  transform:translateY(1px) scale(.975);
  filter:brightness(.98);
  box-shadow:0 1px 2px #293c591a,inset 0 2px 5px #243c5e38,inset 0 -1px 1px #fff;
}
:is(.button,.pool-add,.filter,.amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro):focus-visible { outline:3px solid #477fea;outline-offset:4px; }
:is(.button,.pool-add,.filter):disabled { transform:none;filter:grayscale(.8);opacity:.45;box-shadow:inset 0 1px 1px #fff; }

/* A few small chrome details carry the same material through the interface. */
.demo-tag { background:var(--clicky-silver);border-color:#818996;color:#414854;box-shadow:inset 0 1px 1px #fff,0 2px 5px #243c5e1b;text-shadow:0 1px #fff; }
.demo-tag::before { content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:linear-gradient(#e1ffd1,#4a9f44);border:1px solid #608451;box-shadow:0 0 0 1px #fff8;vertical-align:1px; }
.market-toolbar { border:1px solid #a8adb780;background:linear-gradient(#f9fafb,#e6e8ed);box-shadow:inset 0 1px 0 white,0 4px 10px #26384709; }
.search { border:1px solid #9ba2ae;border-radius:999px;background:linear-gradient(#e9ecf1,#fff 45%);box-shadow:inset 0 2px 4px #273d591c,0 1px 0 #fff;padding:7px 13px; }
.search span { color:#768396;font-size:23px; }
.search:focus-within { outline:3px solid #88b6ef80;outline-offset:2px; }
.way-action { padding:9px 16px 11px;border:1px solid #85818d;border-radius:999px;background:var(--clicky-silver);box-shadow:var(--clicky-shadow);text-shadow:0 1px #fff;color:#283349; }
.way-action b { font-size:23px; }
.way-card:hover .way-action { background:var(--clicky-blue); }

dialog { border:1px solid #9aa0b1;box-shadow:0 30px 100px #152c3866,inset 0 1px 0 white; }
.dialog-header { background:linear-gradient(#fff,#e8ebef 48%,#d6dce5 52%,#eceff5);border-bottom:1px solid #afb5c1;padding:12px 20px;color:#5c6470;text-shadow:0 1px #fff;min-height:52px; }
.close-button { width:26px;height:26px;font-size:21px;background:linear-gradient(#fff6ed,#f6c7ce 45%,#d78893 50%,#eeb0ba);border:1px solid #986b79;box-shadow:inset 0 1px 1px white,inset 0 -2px 2px #fff8,0 1px 2px #49334233;color:#673f49; }
.close-button:active { transform:scale(.94); }
.dialog-body { padding-top:25px; }
.dialog-footnote { background:linear-gradient(#f3f4f6,#e5e8ef);border-color:#d0d4dc; }
.field input,.field select { border-color:#afb6c1;background:linear-gradient(#eef0f4,#fff 30%);box-shadow:inset 0 2px 4px #35456115,0 1px 0 #fff; }
.amount-field { border:1px solid #b5afc5;background:linear-gradient(#d9d5e3,#eeeaf7);box-shadow:inset 0 2px 5px #3b314c17,0 1px 0 #fff; }
.steps .current i { background:var(--clicky-blue);border-color:#6f81a1;color:#263e64;box-shadow:inset 0 1px 1px #fff,0 1px 2px #273d591c; }
.footer-links [data-replay],.footer-links [data-motion] { padding:6px 12px 8px;border:1px solid #8a929e;border-radius:999px;background:var(--clicky-silver);box-shadow:inset 0 1px 1px #fff,inset 0 -2px 2px #fff9,0 3px 7px #25354d1a;text-shadow:0 1px #fff;font-size:13px; }
.footer-links [data-replay]:hover,.footer-links [data-motion]:hover { text-decoration:none;filter:brightness(1.035); }
.footer-links [data-motion][aria-pressed="true"] { background:var(--clicky-blue); }

@media(min-width:1101px) {
  .site-header nav { gap:6px;padding:3px;background:linear-gradient(#ffffffc9,#dce5efb8);border:1px solid #7e94a780;border-radius:999px;box-shadow:inset 0 1px 0 white,0 4px 12px #324b6712; }
  .site-header nav a,.site-header nav button { padding:8px 13px;font-size:14px;border-radius:999px; }
  .site-header nav a:hover,.site-header nav button:hover { background:#fff9;box-shadow:inset 0 1px 1px white,0 1px 3px #30445626; }
  .site-header nav a::after,.site-header nav button::after { display:none; }
}
@media(max-width:760px) {
  .hero-buttons { gap:12px; }
  .hero-buttons .button { min-width:218px;min-height:46px;font-size:16px;padding:10px 21px 12px; }
  .pool-add { min-height:44px;padding:8px 11px 10px; }
  .filter { padding:8px 12px 10px;font-size:12px;min-height:44px; }
  .filter.active::after { width:4px;height:4px;margin-left:6px; }
  .market-toolbar { border:0;background:none;box-shadow:none; }
  .search { margin-top:0;width:100%;padding:8px 13px; }
  .demo-tag { font-size:10px;padding:5px 8px; }
  .dialog-header { padding:12px 17px; }
  .close-button { width:36px;height:36px; }
  .close-button::after { content:'';position:absolute;inset:-4px; }
  .close-button { position:relative; }
  .amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro { min-height:44px; }
  .menu-button { width:44px;height:44px;border:1px solid #929bab;background:var(--clicky-silver);box-shadow:var(--clicky-shadow); }
  .dialog-body { padding-top:21px; }
  .review-actions .button { min-height:44px; }
  .way-action { padding-top:9px; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.button,.pool-add,.filter,.amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro) { transition:none; }
}
.motion-paused :is(.button,.pool-add,.filter,.amount-presets button,.withdraw-options button,.position-buttons button,.skip-intro) { transition:none; }

/* Keep every heading, label, and dialog in the upright Pairbase typeface. */
em,i,.mini-pair i,.token-white,.way-card h3,.fan-card strong i,.loader-orbit,.quote-check h3,.empty-positions h3 {
  font-family:Neo,Arial,sans-serif;
  font-style:normal;
  font-weight:400;
}