@font-face{font-family:Interface;src:local("Inter"),local("Arial");font-display:swap}
:root{color-scheme:dark;font-family:Interface,Arial,Helvetica,sans-serif;color:#f8f8f6;background:#070706;font-synthesis:none;--orange:#ffad00;--muted:#b1b0ae;--line:#38332a}
*{box-sizing:border-box}body{margin:0;min-height:100svh;height:100dvh;display:flex;flex-direction:column;background:#080807 url("assets/background.webp") center/cover no-repeat}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffcc55;outline-offset:5px}svg{display:block;width:20px;height:20px}button[hidden],[hidden]{display:none!important}.wordmark{font-weight:850;letter-spacing:-1.2px;font-size:clamp(21px,2.3vw,34px);line-height:1}.wordmark span{color:var(--orange)}.wordmark .dotcom{color:#f8f8f6;font-weight:450}.header-note{font-size:14px;color:#b1b0ae;letter-spacing:.04em}.stage{width:min(1536px,100%);margin:auto;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,4vw,76px);align-items:center;padding:clamp(20px,4vh,42px) clamp(24px,4vw,76px)}.visual{position:relative;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center}.coin-wrap{position:relative;width:min(100%,60vh,630px);aspect-ratio:1;flex-shrink:1;min-height:0;filter:drop-shadow(0 24px 36px #0008)}.coin{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#coin-video{opacity:0}#coin-video.ready{opacity:1}.visual-caption{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:6px;text-align:center;text-shadow:0 2px 14px #000}.eyebrow{font-size:12px;letter-spacing:.42em;color:#ffc359;font-weight:700;padding-left:.42em}.visual-title{font-size:clamp(16px,1.45vw,23px);letter-spacing:-.03em;color:#ece8e0}.visual-tools{position:absolute;bottom:0;left:0;right:0;min-height:30px;display:flex;justify-content:center;align-items:center}.loading{font-size:12px;color:#b7a487;letter-spacing:.03em}.loading span{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.2}}.trade-card{width:100%;max-width:650px;justify-self:end;padding:clamp(23px,3.3vw,48px);border:1px solid #e6a300c7;border-radius:23px;background:linear-gradient(125deg,#11100fe8,#060605ee 60%,#171007e8);box-shadow:0 22px 65px #0009,inset 0 1px #ffce6030;position:relative}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:20px}.token-label{color:#ffb500;font-size:20px;font-weight:750}.operation-switch{display:flex;border:1px solid #36312a;padding:4px;gap:3px;background:#070707;border-radius:10px}.operation-switch button{background:transparent;color:#aba9a5;border:0;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:650}.operation-switch button[aria-pressed="true"]{background:#ffc048;color:#171006;box-shadow:0 1px 10px #ffb6001a}.operation-switch button:hover:not([aria-pressed="true"]){color:#fff;background:#25221b}h1{font-size:clamp(40px,4.6vw,72px);line-height:1.06;letter-spacing:-.055em;margin:0 0 15px;font-weight:850}h1 span{color:var(--orange)}.description{color:#bfbebb;font-size:clamp(16px,1.65vw,23px);line-height:1.3;margin:0 0 30px;letter-spacing:-.025em}.quantity-block label{font-size:18px;font-weight:650;display:block;margin-bottom:13px}.quantity-control{border:1px solid #ffa800c7;border-radius:16px;padding:12px;display:flex;align-items:center;gap:8px;background:linear-gradient(130deg,#080808,#0a0907);box-shadow:0 4px 30px #0005}.step{height:76px;flex:0 0 76px;border-radius:12px;font-size:48px;line-height:1;font-weight:450;display:grid;place-items:center;padding:0 0 4px;transition:transform .15s,filter .15s}.step:active:not(:disabled){transform:scale(.95)}.minus{color:#e7e4dc;border:1px solid #5a5448;background:linear-gradient(140deg,#292a28,#171717)}.minus:disabled{opacity:.42}.plus{border:1px solid #ffdc5f;color:#080704;background:linear-gradient(145deg,#ffc824,#ff9a00);box-shadow:0 0 22px #ffa6001a}.plus:hover{filter:brightness(1.12)}.amount{display:flex;gap:10px;min-width:0;justify-content:center;align-items:center;flex:1}.amount input{width:3ch;min-width:2.6ch;max-width:calc(100% - 48px);border:0;border-radius:4px;padding:0;background:transparent;color:#fafaf8;font-size:clamp(34px,4.25vw,64px);line-height:1.15;text-align:center;font-weight:760;letter-spacing:-.06em;outline-offset:2px;caret-color:var(--orange)}.amount>span{color:#b0ada8;font-size:clamp(16px,1.6vw,23px);font-weight:650}.quantity-help{font-size:13px;text-align:center;color:#aaa59d;margin:10px 0 0;line-height:1.4}.error{font-size:13px;color:#ffb2a5;margin:8px 0 0}.quantity-control:has(input[aria-invalid="true"]){border-color:#ff927a}.order-summary{border:1px solid #34322e;background:#ffffff03;border-radius:13px;padding:14px 18px;margin:24px 0 18px}.summary-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.summary-label{font-size:13px;color:#aaa69f;display:flex;align-items:center;gap:8px}.summary-label svg{width:16px;height:16px}.copy-button{display:flex;align-items:center;gap:7px;background:transparent;border:0;padding:3px;color:#bdb7ac;font-size:12px}.copy-button:hover{color:#ffc359}.copy-button svg{width:16px;height:16px}.order-summary p{font-size:clamp(16px,1.55vw,21px);line-height:1.4;font-weight:500;margin:9px 0 0;overflow-wrap:anywhere}.confirm{display:flex;align-items:center;justify-content:center;gap:16px;border-radius:13px;border:1px solid #ffdb59;background:linear-gradient(115deg,#ffc71d,#ffac00 60%,#ff9900);padding:16px 18px;color:#0c0800;font-weight:780;font-size:clamp(19px,2.05vw,28px);box-shadow:0 7px 32px #ff920020;transition:transform .16s,box-shadow .16s,filter .16s}.confirm:hover{transform:translateY(-2px);box-shadow:0 9px 40px #ff9c0035;filter:brightness(1.05)}.confirm:active{transform:translateY(0)}.confirm[aria-disabled="true"]{opacity:.4;pointer-events:none}.telegram-icon{background:#09a9e5;color:#fff;display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:50%;box-shadow:inset 0 1px #fff5}.telegram-icon svg{width:25px;height:25px}.confirm-arrow{width:20px;height:20px;margin-left:auto}.confirm-label{flex:1}.telegram-note{color:#b7b3ac;font-size:15px;text-align:center;margin:11px 0 0}.card-footer{display:flex;justify-content:space-between;gap:12px;margin-top:23px;padding-top:16px;border-top:1px solid #2b2823;color:#8f8980;font-size:12px;line-height:1.4}.card-footer>span:first-child{color:#c6bda9}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#222017;color:#fff4d9;border:1px solid #fbb80080;border-radius:10px;font-size:14px;box-shadow:0 8px 25px #000;z-index:5;max-width:90vw;text-align:center}
@media(min-width:761px) and (max-height:790px){.stage{padding-top:18px;padding-bottom:18px}.trade-card{padding:24px 32px}.card-top{margin-bottom:12px}h1{font-size:clamp(40px,4.5vw,64px);margin-bottom:10px}.description{margin-bottom:20px}.quantity-block label{margin-bottom:10px}.step{height:60px;flex-basis:60px;font-size:42px}.amount input{font-size:48px}.quantity-control{padding:9px}.order-summary{margin:18px 0 14px;padding:11px 15px}.confirm{padding:12px 16px}.card-footer{margin-top:15px;padding-top:12px}.coin-wrap{width:min(100%,66vh,600px)}}
@media(max-width:760px){.wordmark{font-size:24px}.header-note{display:none}.stage{display:flex;flex-direction:column;gap:0;justify-content:center;padding:8px 18px 18px;min-height:0}.visual{align-self:center;flex:1;min-height:126px;max-height:28vh;width:100%;justify-content:center}.coin-wrap{height:100%;width:auto;max-width:100%;aspect-ratio:1}.visual-caption{display:none}.visual-tools{left:auto;right:12%;bottom:10px}.trade-card{max-width:470px;flex:0 0 auto;border-radius:18px;padding:22px}.card-top{margin-bottom:14px}.token-label{font-size:17px}.operation-switch button{padding:7px 13px;font-size:13px}h1{font-size:43px;margin-bottom:9px}.description{font-size:16px;margin-bottom:21px}.quantity-block label{font-size:16px;margin-bottom:10px}.quantity-control{padding:9px;border-radius:12px}.step{height:58px;flex-basis:58px;font-size:39px;border-radius:9px}.amount input{font-size:43px}.amount>span{font-size:18px}.quantity-help{font-size:12px;margin-top:8px}.order-summary{margin:18px 0 14px;padding:12px 14px}.order-summary p{font-size:16px}.confirm{font-size:21px;gap:12px;padding:12px 14px}.telegram-icon{flex-basis:33px;height:33px}.telegram-icon svg{width:21px;height:21px}.telegram-note{font-size:13px;margin-top:9px}.card-footer{margin-top:16px;padding-top:12px;flex-wrap:wrap;gap:4px 12px}.summary-label{font-size:12px}.copy-button{font-size:12px}}
@media(max-width:760px) and (max-height:740px){.stage{padding:2px 13px 12px}.visual{min-height:90px;max-height:19vh}.trade-card{padding:16px 19px}.card-top{margin-bottom:8px}h1{font-size:36px;margin-bottom:7px}.description{margin-bottom:14px;font-size:15px}.quantity-block label{font-size:15px;margin-bottom:8px}.step{height:48px;flex-basis:48px}.amount input{font-size:37px}.quantity-control{padding:7px}.quantity-help{margin-top:6px}.order-summary{margin:13px 0 12px;padding:9px 12px}.order-summary p{margin-top:5px;font-size:15px}.confirm{padding:10px 12px;font-size:20px}.telegram-note{font-size:12px;margin-top:8px}.card-footer{margin-top:12px;padding-top:10px;font-size:12px}.visual-tools{bottom:5px;right:20%}}
@media(max-height:560px){body{height:auto;min-height:100svh}.stage{min-height:0}.visual{min-height:100px}.visual-tools{display:none}.trade-card{margin:10px auto}.coin-wrap{width:min(80%,260px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.loading{display:none}}
/* Keep the complete order on a compact phone viewport. */
@media(max-width:760px) and (max-height:740px){.description{display:none}.trade-card{padding:14px 18px}.card-top{margin-bottom:7px}h1{margin-bottom:14px}.quantity-control{padding:6px}.quantity-help{font-size:12px}.order-summary{margin:12px 0;padding:8px 11px}.confirm{padding:9px 12px}.card-footer{margin-top:10px;padding-top:8px;display:block;text-align:center}.card-footer>span:first-child{display:none}.telegram-note{margin-top:7px}}
@media(max-width:760px) and (max-height:640px){.visual{min-height:64px;max-height:84px}.stage{padding-top:0;padding-bottom:9px}.trade-card{padding:12px 16px}h1{font-size:32px;margin-bottom:11px}.card-top{margin-bottom:5px}.operation-switch button{padding:5px 12px}.step{height:42px;flex-basis:42px;font-size:34px}.amount input{font-size:34px}.quantity-block label{margin-bottom:6px}.order-summary{margin:10px 0}.order-summary p{font-size:14px}.telegram-icon{height:28px;flex-basis:28px}.confirm{font-size:18px;padding:8px 12px}.card-footer{margin-top:8px;padding-top:6px}.visual-tools{bottom:5px;right:28%}}

/* Liquid glass: a translucent graphite lens with warm refracted highlights. */
.trade-card {
  --glass-x: 23%;
  --glass-y: 8%;
  --glass-radius: 30px;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: var(--glass-radius);
  background:
    linear-gradient(145deg, rgba(255, 249, 230, .095), transparent 38%, rgba(255, 172, 60, .035) 75%, rgba(255, 246, 220, .075)),
    rgba(17, 16, 14, .38);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(.94);
  backdrop-filter: blur(24px) saturate(170%) brightness(.94);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .42),
    0 6px 18px rgba(0, 0, 0, .2),
    inset 0 1px 1px rgba(255, 253, 235, .38),
    inset 0 -1px 1px rgba(255, 184, 70, .14),
    inset 1px 0 1px rgba(255, 238, 197, .11),
    inset -1px 0 1px rgba(255, 246, 224, .08);
}
.trade-card::before,
.trade-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.trade-card::before {
  z-index: 2;
  padding: 1px;
  background:
    radial-gradient(380px circle at var(--glass-x) var(--glass-y), rgba(255, 247, 220, .88), transparent 74%),
    linear-gradient(133deg, rgba(255, 251, 235, .48), rgba(255, 208, 128, .08) 28%, transparent 44%, rgba(255, 242, 209, .09) 71%, rgba(255, 179, 48, .48));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.trade-card::after {
  z-index: 0;
  background:
    radial-gradient(ellipse 72% 47% at var(--glass-x) var(--glass-y), rgba(255, 248, 223, .105), transparent 76%),
    linear-gradient(123deg, rgba(255, 255, 248, .045), transparent 30% 66%, rgba(255, 196, 91, .025) 88%, transparent),
    radial-gradient(ellipse 65% 22% at 102% 103%, rgba(255, 164, 39, .09), transparent 75%);
}
.trade-card > * { position: relative; z-index: 1; }
.trade-card .description { color: #d0cbc3; }
.trade-card .operation-switch {
  background: rgba(7, 7, 7, .28);
  border-color: rgba(255, 243, 214, .13);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), 0 1px rgba(255, 243, 214, .035);
}
.trade-card .operation-switch button { border-radius: 8px; color: #c2bcb3; }
.trade-card .operation-switch button[aria-pressed="true"] {
  color: #201303;
  background: linear-gradient(155deg, #ffe2a4 0%, #ffc455 45%, #f8ae2d 100%);
  box-shadow: inset 0 1px 1px #fff3cbbf, inset 0 -1px 1px #8b50004d, 0 2px 9px #0003;
}
.trade-card .quantity-control {
  border-color: rgba(255, 231, 178, .23);
  background: linear-gradient(145deg, rgba(255, 246, 223, .05), rgba(255, 202, 100, .025)), rgba(6, 6, 5, .31);
  box-shadow: inset 0 1px 1px rgba(255, 249, 231, .1), 0 5px 20px rgba(0, 0, 0, .08);
}
.trade-card .quantity-control:has(input[aria-invalid="true"]) { border-color: #ff927a; }
.trade-card .minus {
  background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 238, 213, .035));
  border-color: rgba(255, 244, 222, .18);
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 3px 9px #0002;
}
.trade-card .minus:disabled { opacity: .45; }
.trade-card .plus {
  background: linear-gradient(145deg, #ffdc79, #ffb315 54%, #ef980b);
  border-color: #ffe5a080;
  box-shadow: inset 0 1px 1px #fff2c9cc, inset 0 -1px 1px #9d5e004d, 0 4px 13px #0003;
}
.trade-card .order-summary {
  background: linear-gradient(145deg, rgba(255, 248, 223, .045), rgba(255, 207, 125, .015)), rgba(7, 7, 6, .24);
  border-color: rgba(255, 242, 214, .13);
  box-shadow: inset 0 1px rgba(255, 255, 240, .055);
}
.trade-card .summary-label,
.trade-card .quantity-help { color: #bfb6a8; }
.trade-card .confirm {
  border-color: rgba(255, 227, 160, .58);
  background: linear-gradient(170deg, #ffdc75 0%, #ffc132 34%, #ffb00c 60%, #f49b06 100%);
  box-shadow: inset 0 1px 1px #fff2cdbf, inset 0 -1px 1px #bc720059, 0 7px 24px #ff9e001f, 0 2px 7px #0002;
}
.trade-card .confirm:hover { box-shadow: inset 0 1px 1px #fff7dc, 0 9px 32px #ffae0033; }
.trade-card .telegram-note { color: #c4bdb2; }
.trade-card .card-footer { border-color: rgba(255, 236, 196, .12); color: #b3a896; }
.trade-card .card-footer > span:first-child { color: #d2c5af; }
@media(max-width:760px) { .trade-card { --glass-radius: 25px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .trade-card { background: linear-gradient(145deg, rgba(42, 39, 32, .96), rgba(15, 14, 12, .95)); }
}
@media(prefers-reduced-transparency:reduce) {
  .trade-card { background: #1b1915; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .trade-card::after { opacity: .35; }
}

/* Keep the order in a single fixed viewport. */
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { height: 100dvh; min-height: 0; }



.stage-frame { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
.stage { flex: none; margin: 0; padding-top: 12px; padding-bottom: 12px; transform: scale(var(--stage-scale, 1)); transform-origin: top center; }
.trade-card .card-footer { display: block; text-align: center; }
.token-label {
  display: inline-block; font-weight: 900; font-size: 24px; letter-spacing: .015em;
  color: #ffd65a;
  background: linear-gradient(175deg, #fffbe0 0%, #ffe89b 16%, #c58b18 31%, #fff6b5 43%, #fffde1 48%, #ffdb51 52%, #bd7a08 71%, #ffe68a 85%, #fff4c1 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .35px #fce69a;
  filter: drop-shadow(0 1px 0 #926008) drop-shadow(0 2px 0 #714304) drop-shadow(0 3px 1px #1b1000) drop-shadow(0 0 7px #ffc43a66);
}
@media (max-width: 760px) {
  
  .stage { padding: 0 16px 10px; justify-content: flex-start; }
  .visual { flex: 0 0 auto; height: clamp(76px, 17dvh, 145px); min-height: 0; max-height: none; }
  .coin-wrap { height: 100%; width: auto; }
  .visual-tools { bottom: 8px; right: 22%; }
  .token-label { font-size: 23px; }
  .trade-card { margin: 0; }
}
@media (max-width: 760px) and (max-height: 740px) {
  
  .visual { height: clamp(60px, 13dvh, 90px); }
}
@media (max-height: 500px) and (min-width: 600px) {
  
  .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 22px 10px; }
  .visual { height: auto; align-self: stretch; max-height: none; }
  .coin-wrap { width: min(100%, 250px); height: auto; }
}

/* More room for the coin and controls after removing the banner. */
.stage { width: min(1640px, 100%); gap: clamp(20px, 3vw, 48px); padding: 20px clamp(20px, 2.5vw, 44px); }
.coin-wrap { width: min(100%, 82dvh, 760px); }
.trade-card { max-width: 740px; padding: clamp(26px, 2.6vw, 44px); --glass-radius: 36px; }
h1 { font-size: clamp(48px, 5.5vw, 80px); }
.description { font-size: clamp(17px, 1.8vw, 25px); }
.step { height: 74px; flex-basis: 74px; font-size: 48px; }
.amount input { font-size: clamp(44px, 4.8vw, 68px); }
.token-label { font-size: 28px; }
.operation-switch button { padding: 10px 18px; font-size: 15px; }
.quantity-block label { font-size: 19px; }
.confirm { font-size: clamp(22px, 2.3vw, 30px); padding: 17px 18px; }

/* Clear glass, bright curved edges and highlights that follow the pointer. */
.trade-card {
  background:
    linear-gradient(135deg, #ffffff24 0%, #ffffff08 24%, transparent 47%, #ffdb9210 76%, #ffffff22 100%),
    rgba(12, 15, 18, .22);
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.12);
  backdrop-filter: blur(18px) saturate(190%) brightness(1.12);
  box-shadow: 0 24px 70px #0007, 0 7px 20px #0003,
    inset 0 2px 2px #ffffffe0, inset 2px 0 3px #ffffff55,
    inset -2px -2px 4px #ffe9b570, inset 0 0 18px #ffffff12;
}
.trade-card::before {
  padding: 1.5px;
  background: radial-gradient(420px circle at var(--glass-x) var(--glass-y), #ffffff, transparent 75%),
    linear-gradient(135deg, #ffffffd9, #ffffff25 27%, #ffffff10 44%, #ffdfa055 74%, #fff5dccc);
}
.trade-card::after {
  background:
    radial-gradient(ellipse 65% 37% at var(--glass-x) var(--glass-y), #ffffff30, transparent 80%),
    linear-gradient(125deg, #ffffff12, transparent 27% 67%, #fff1c910 90%, transparent),
    radial-gradient(ellipse 66% 15% at 84% 103%, #fff3d533, transparent 78%);
  box-shadow: inset 0 12px 16px -15px #fff, inset 0 -10px 18px -16px #ffe8b3;
}
.trade-card .operation-switch,
.trade-card .quantity-control,
.trade-card .order-summary {
  background: linear-gradient(150deg, #ffffff14, #ffffff03 55%, #fff0c80c), #080b0f35;
  border-color: #fff4da42;
  box-shadow: inset 0 1px 1px #ffffff55, inset 0 -1px 1px #fff0c51c, 0 3px 10px #0002;
}
.trade-card .operation-switch { border-radius: 16px; }
.trade-card .operation-switch button { border-radius: 11px; }
.trade-card .minus { background: linear-gradient(150deg, #ffffff3d, #ffffff08); border-color: #ffffff4a; box-shadow: inset 0 2px 2px #ffffff66, inset 0 -1px 2px #fff1c922, 0 5px 12px #0003; }
.trade-card .plus,
.trade-card .confirm,
.trade-card .operation-switch button[aria-pressed="true"] {
  background: linear-gradient(170deg, #fff4cde8 0%, #ffdd84dd 10%, #ffc445c9 44%, #ffaa17d9 66%, #ffe8a8ed 100%);
  border-color: #fff3cdaa;
  box-shadow: inset 0 2px 2px #ffffffdd, inset 0 -2px 3px #ffeebc80, 0 6px 20px #0003, 0 0 15px #ffc44b1a;
}
.trade-card .description, .trade-card .telegram-note { color: #eee7da; }
.trade-card .quantity-help, .trade-card .summary-label { color: #d7cfc0; }
.trade-card .card-footer { color: #cec3ae; }
@media (max-width: 760px) {
  .stage { gap: 0; padding: 6px 12px 12px; }
  .visual { height: clamp(110px, 24dvh, 210px); }
  .coin-wrap { width: auto; height: 100%; }
  .trade-card { max-width: 510px; padding: 22px; --glass-radius: 30px; }
  h1 { font-size: 47px; }
  .description { font-size: 17px; margin-bottom: 20px; }
  .step { height: 64px; flex-basis: 64px; font-size: 44px; }
  .amount input { font-size: 48px; }
  .token-label { font-size: 26px; }
  .operation-switch button { padding: 8px 14px; font-size: 14px; }
  .quantity-block label { font-size: 17px; }
  .confirm { font-size: 22px; padding: 14px; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .visual { height: clamp(92px, 20dvh, 148px); }
  .trade-card { padding: 17px 20px; }
  h1 { font-size: 39px; }
  .step { height: 54px; flex-basis: 54px; font-size: 39px; }
  .amount input { font-size: 40px; }
  .confirm { font-size: 21px; padding: 12px; }
}
@media (max-width: 360px) {
  .trade-card { padding-left: 16px; padding-right: 16px; }
  .step { flex-basis: 48px; }
  .operation-switch button { padding: 8px 11px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .stage { padding: 12px 22px; }
  .visual { height: auto; }
  .coin-wrap { width: min(100%, 390px); height: auto; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .trade-card { background: linear-gradient(145deg, #343129, #11100f); }
}
@media (prefers-reduced-transparency: reduce) {
  .trade-card { background: #211e18; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .trade-card::after { opacity: .2; }
}

/* Switch between the two trading currencies. */
.currency-switch{display:flex;gap:5px;padding:5px;margin:0 0 20px;border:1px solid #ffffff30;border-radius:16px;background:#080b0f50;box-shadow:inset 0 1px 1px #ffffff30}
.currency-switch button{flex:1;border:0;border-radius:11px;padding:10px 16px;background:transparent;color:#d7d7d7;font-size:16px;font-weight:750;letter-spacing:.04em}
.currency-switch button[aria-pressed="true"]{background:linear-gradient(170deg,#fff4cd,#ffc445 55%,#ffaa17);color:#171006;box-shadow:inset 0 1px 1px #fff,0 3px 10px #0003}
.currency-switch button:hover:not([aria-pressed="true"]){background:#ffffff12;color:#fff}
.coin-layer{position:absolute;inset:0}
.usdt-coin-layer{perspective:1100px}
.usdt-coin{animation:usdt-turn 8s linear infinite;transform-origin:center;filter:drop-shadow(0 10px 18px #003f2a66)}
@keyframes usdt-turn{0%{transform:rotateY(0deg)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}
body[data-currency="USDT"]{--orange:#50d8ad;background:#070e0c;isolation:isolate}
body[data-currency="USDT"]::before{content:"";position:fixed;inset:0;z-index:-1;background:url('assets/background.webp') center/cover no-repeat;filter:hue-rotate(115deg) saturate(.85)}
body[data-currency="USDT"] .token-label{background:linear-gradient(175deg,#e8fff5,#85e7c5 24%,#219673 35%,#dcfff0 48%,#50d8ad 60%,#167557 76%,#bdffe9);background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:.35px #b7ffe3;filter:drop-shadow(0 2px 0 #135c45) drop-shadow(0 0 7px #28b89166)}
body[data-currency="USDT"] .currency-switch button[aria-pressed="true"],body[data-currency="USDT"] .trade-card .plus,body[data-currency="USDT"] .trade-card .confirm,body[data-currency="USDT"] .trade-card .operation-switch button[aria-pressed="true"]{background:linear-gradient(170deg,#e0fff0eb 0%,#8ceccddd 14%,#45c6a1d9 48%,#269f80e8 75%,#a1f5d9ed);border-color:#c2ffdfaa;color:#052a20;box-shadow:inset 0 2px 2px #ffffffdd,inset 0 -2px 3px #baffdf80,0 6px 20px #0003,0 0 15px #34bd991a}
body[data-currency="USDT"] .trade-card{background:linear-gradient(135deg,#ffffff24,transparent 47%,#6ce8b910 76%,#ffffff22),#0c181638;box-shadow:0 24px 70px #0007,inset 0 2px 2px #ffffffe0,inset 2px 0 3px #ffffff55,inset -2px -2px 4px #b5ffe270}
body[data-currency="USDT"] .trade-card::before{background:radial-gradient(420px circle at var(--glass-x) var(--glass-y),#fff,transparent 75%),linear-gradient(135deg,#ffffffd9,#ffffff25 27%,#ffffff10 44%,#a0ffda55 74%,#dcfff0cc)}
body[data-currency="USDT"] .trade-card::after{background:radial-gradient(ellipse 65% 37% at var(--glass-x) var(--glass-y),#ffffff30,transparent 80%),linear-gradient(125deg,#ffffff12,transparent 27% 67%,#c9ffe410 90%,transparent),radial-gradient(ellipse 66% 15% at 84% 103%,#d5ffed33,transparent 78%);box-shadow:inset 0 12px 16px -15px #fff,inset 0 -10px 18px -16px #b3ffdb}
body[data-currency="USDT"] .trade-card .operation-switch,body[data-currency="USDT"] .trade-card .quantity-control,body[data-currency="USDT"] .trade-card .order-summary{background:linear-gradient(150deg,#ffffff14,#ffffff03 55%,#c8ffe80c),#080f0c35;border-color:#daffed42;box-shadow:inset 0 1px 1px #ffffff55,inset 0 -1px 1px #c5ffe01c,0 3px 10px #0002}
body[data-currency="USDT"] .trade-card .description,body[data-currency="USDT"] .trade-card .telegram-note{color:#e1eee8}
body[data-currency="USDT"] .trade-card .quantity-help,body[data-currency="USDT"] .trade-card .summary-label,body[data-currency="USDT"] .trade-card .card-footer{color:#c0d7cc}
body[data-currency="USDT"] .copy-button:hover{color:#83eac1}
body[data-currency="USDT"] button:focus-visible,body[data-currency="USDT"] a:focus-visible,body[data-currency="USDT"] input:focus-visible{outline-color:#9df4d2}
@media(max-width:760px){.currency-switch{margin-bottom:14px}.currency-switch button{padding:8px 14px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.usdt-coin{animation:none}}
/* Tether green and white on the same background and glass surfaces. */
body[data-currency="USDT"]{--orange:#26a17b}
body[data-currency="USDT"]::before{filter:hue-rotate(115deg) saturate(.78)}
body[data-currency="USDT"] .currency-switch button[aria-pressed="true"],body[data-currency="USDT"] .trade-card .plus,body[data-currency="USDT"] .trade-card .confirm,body[data-currency="USDT"] .trade-card .operation-switch button[aria-pressed="true"]{background:linear-gradient(170deg,#ffffff 0%,#b5ead9 12%,#26a17b 62%,#219371 78%,#e2fff4 100%);color:#062a20}

.usdt-volume{filter:drop-shadow(0 20px 24px #002d2066)}

/* Refractive rims: the highlights stay at the edges, leaving text clear. */
.trade-card { --rim-tint: #ffe0a5; border-color: #ffffff70; box-shadow: 0 28px 75px #0008, 0 0 0 1px #ffffff14, inset 0 3px 3px #ffffffef, inset 3px 0 5px #ffffff55, inset -3px -3px 5px #ffe0a578, inset 0 0 24px #ffffff12; }
body[data-currency="USDT"] .trade-card { --rim-tint: #bbffe5; box-shadow: 0 28px 75px #0008, 0 0 0 1px #ffffff14, inset 0 3px 3px #ffffffef, inset 3px 0 5px #ffffff55, inset -3px -3px 5px #bbffe578, inset 0 0 24px #ffffff12; }
.trade-card::before { padding: 2.5px; }
.trade-card :is(.quantity-control,.order-summary,.operation-switch,.currency-switch,.price-panel) { position: relative; isolation: isolate; border: 1px solid #ffffff42; box-shadow: inset 0 2px 2px #ffffff70, inset 2px 0 4px #ffffff20, inset 0 -2px 3px #ffffff30, 0 5px 16px #0003; }
.trade-card :is(.quantity-control,.order-summary,.operation-switch,.currency-switch,.price-panel)::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1.5px; background: linear-gradient(140deg,#ffffffde,#ffffff15 30%,transparent 55%,var(--rim-tint) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; }
.price-panel { margin: 16px 0; padding: 13px 16px; border-radius: 20px; background: linear-gradient(140deg,#ffffff13,#ffffff03 65%,#ffe8bd0c),#080b0f40; font-size: 13px; }
.price-heading,.price-options,.price-values { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-heading a { color: #e6ddcd; text-decoration: none; }
.price-heading a:hover { text-decoration: underline; }
.price-heading span { color: #fff7e6; font-variant-numeric: tabular-nums; }
.price-options { margin-top: 12px; color: #d7cfc0; }
.price-options [role="group"] { display: flex; gap: 3px; border-radius: 10px; padding: 3px; background: #0003; border: 1px solid #ffffff30; }
.price-options button { background: transparent; color: #e7dfd4; border: 0; border-radius: 7px; padding: 5px 9px; cursor: pointer; font: inherit; font-size: 12px; }
.price-options button[aria-pressed="true"] { background: #ffde9bd9; color: #251705; box-shadow: inset 0 1px 1px #fff9; }
.price-values { margin-top: 9px; font-variant-numeric: tabular-nums; flex-wrap: wrap; color: #f4e9d8; }
.price-values strong { font-size: 19px; font-weight: 600; color: #ffe0a5; }
#quote-formula,#quote-status { margin: 8px 0 0; color: #cfc5b5; font-size: 11px; line-height: 1.5; }
.price-panel[hidden],#buy-pricing[hidden] { display: none; }
@media(max-width:760px) { .price-panel { margin: 12px 0; padding: 11px 13px; } .price-heading { gap: 8px; font-size: 12px; } .price-values strong { font-size: 17px; } }

.quote-source { margin: 8px 0 0; color: #cfc5b5; font-size: 12px; line-height: 1.5; }
.quote-source a { color: inherit; text-underline-offset: 3px; }
#quote-status { font-size: 12px; }

.price-options { justify-content: flex-end; }

/* Choose a currency before opening the operation panel. */
#trade-screen[hidden],#currency-menu[hidden] { display: none !important; }
.currency-menu { position: fixed; inset: 0; overflow: auto; z-index: 3; }
.menu-inner { min-height: 100%; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.menu-brand { color: #d9d6ce; font-size: 14px; font-weight: 650; letter-spacing: .2em; margin: 0 0 20px; }
#menu-title { font-size: clamp(30px,5vw,58px); letter-spacing: -.045em; margin: 0 0 34px; text-align: center; }
.menu-choices { width: min(100%,700px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.menu-choice { --choice-color: #ffb92e; display: flex; flex-direction: column; align-items: center; padding: 26px 22px 30px; border: 1px solid #ffffff65; border-radius: 30px; background: linear-gradient(135deg,#ffffff20,#ffffff03 55%,#ffc14912),#15120d60; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 22px 55px #0006,inset 0 2px 3px #ffffffba,inset 0 -2px 3px #ffdc8855; color: #f7f5ee; transition: transform .2s,border-color .2s,background .2s; }
.menu-usdt { --choice-color: #7be7bc; background: linear-gradient(135deg,#ffffff20,#ffffff03 55%,#26a17b24),#0c181660; box-shadow: 0 22px 55px #0006,inset 0 2px 3px #ffffffba,inset 0 -2px 3px #baffde55; }
.menu-choice:hover { transform: translateY(-5px); border-color: var(--choice-color); }
.menu-choice:focus-visible { outline: 3px solid var(--choice-color); outline-offset: 5px; }
.menu-choice:active { transform: translateY(0); }
.menu-choice img { width: 100%; height: clamp(110px,26vh,230px); object-fit: contain; filter: drop-shadow(0 14px 20px #0006); margin-bottom: 14px; }
.menu-token { color: var(--choice-color); font-size: clamp(27px,4vw,38px); font-weight: 800; letter-spacing: -.03em; }
.menu-name { font-size: 16px; color: #d9d9d3; margin-top: 6px; }
.back-to-menu { display: block; margin: 0 0 16px; padding: 5px 0; font: inherit; font-size: 14px; color: #e6e1d7; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.back-to-menu:hover { color: var(--orange); }
@media(max-width:760px) { .menu-inner { padding-left: 18px; padding-right: 18px; } .menu-choices { gap: 14px; } .menu-choice { padding: 18px 10px 22px; border-radius: 24px; } #menu-title { margin-bottom: 26px; } .back-to-menu { margin-bottom: 10px; } }
@media(prefers-reduced-motion:reduce) { .menu-choice:hover { transform: none; } }


/* The two currencies share the wallpaper, split by a luminous lightning seam. */
.currency-menu { isolation: isolate; background: #080807; }
.menu-wallpaper { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: url('assets/background.webp') center / cover no-repeat; }
.menu-wallpaper-eva { clip-path: polygon(0 0,53% 0,48% 24%,52% 24%,47% 53%,51% 53%,46% 82%,50% 82%,47% 100%,0 100%); background-image: radial-gradient(ellipse at 24% 55%,#ff8a001c,transparent 65%),url('assets/background.webp'); }
.menu-wallpaper-usdt { clip-path: polygon(53% 0,100% 0,100% 100%,47% 100%,50% 82%,46% 82%,51% 53%,47% 53%,52% 24%,48% 24%); filter: hue-rotate(115deg) saturate(.9); }
.menu-divider { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; filter: drop-shadow(0 0 4px #ffffffa0) drop-shadow(-3px 0 12px #ff9d00a0) drop-shadow(3px 0 12px #26dca4a0); }
.menu-inner { position: relative; z-index: 1; }
.menu-brand { font-size: clamp(18px,2.4vw,26px); letter-spacing: .025em; color: #fff; text-shadow: 0 2px 10px #000,0 0 24px #000; }
#menu-title { text-shadow: 0 2px 14px #000,0 0 28px #000; }
.menu-eva { background: linear-gradient(135deg,#ffffff20,#ffffff03 55%,#ffc14920),#20130980; }
.menu-usdt { background: linear-gradient(135deg,#ffffff20,#ffffff03 55%,#26a17b30),#071e1780; }