:root{
  color-scheme:dark;
  --bg:#0a0a0a; --fg:#f0f0f0; --mid:#8a8a8a; --line:rgba(255,255,255,.15);
  --card:rgba(255,255,255,.04); --dot:rgba(255,255,255,.11); --glow:rgba(255,255,255,.09);
  --inv-bg:#f0f0f0; --inv-fg:#0a0a0a;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{
  scroll-padding-top:env(safe-area-inset-top,0px);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scrollbar-width:thin; scrollbar-color:#2a2a2a transparent;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.05rem; line-height:1.6; min-height:100vh; overflow-x:hidden;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
input,select{-webkit-user-select:text; user-select:text}

body::before,body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:0}
body::before{
  background:radial-gradient(var(--dot) 1px, transparent 1.2px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse at center, #000 25%, transparent 78%);
}
body::after{
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,35%), var(--glow), transparent 65%);
}

main{
  position:relative; z-index:1;
  max-width:620px; margin:0 auto; padding:88px 24px 48px; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}

.back{
  position:absolute; top:max(24px,env(safe-area-inset-top,0px)); left:24px;
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--fg); text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.back:hover{background:var(--inv-bg); color:var(--inv-fg); border-color:var(--inv-bg); transform:translateX(-2px)}

.page-title{
  font-family:"Unbounded","Arial Black",Impact,sans-serif; font-weight:800;
  font-size:clamp(2.6rem,12vw,5rem); line-height:1; letter-spacing:-.04em;
  margin:0 0 28px; padding:0 0 .05em; color:var(--fg);
  background:linear-gradient(180deg, var(--fg) 35%, var(--mid) 120%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.card{
  width:100%; padding:24px; text-align:left;
  border:1px solid var(--line); border-radius:26px; background:var(--card);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.field{display:block; min-width:0}
.label{display:block; margin:0 0 6px 4px; color:var(--mid); font-size:.8rem; font-weight:500}

.amount,select{
  width:100%; border:1px solid var(--line); border-radius:14px; background:var(--card);
  color:var(--fg); font:inherit; outline:none;
  transition:border-color .18s,background .18s;
}
.input-wrap{position:relative}
.amount{padding:12px 46px 12px 16px; font-size:1.9rem; font-weight:500; font-variant-numeric:tabular-nums}
.clear{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%; background:transparent;
  color:var(--mid); font-size:1.4rem; line-height:1; cursor:pointer;
  transition:background .18s,color .18s;
}
.clear:hover{background:var(--inv-bg); color:var(--inv-fg)}
.clear[hidden]{display:none}
.amount:focus,select:focus{border-color:var(--fg)}
select{
  -webkit-appearance:none; appearance:none; padding:13px 40px 13px 14px; font-size:.98rem; cursor:pointer;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
select option{background:#141414; color:#f0f0f0}

.pair{display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:10px; margin-top:16px}
.swap{
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:var(--card);
  color:var(--fg); font-size:1.25rem; line-height:1; cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .3s;
}
.swap:hover{background:var(--inv-bg); color:var(--inv-fg); border-color:var(--inv-bg)}
.swap.flip{transform:rotate(180deg)}

.result{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.out-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.out{
  cursor:pointer;
  font-family:"Unbounded","Arial Black",Impact,sans-serif; font-weight:800;
  font-size:clamp(1.7rem,8vw,2.6rem); line-height:1.15; letter-spacing:-.03em;
  word-break:break-word; min-width:0;
}
.out .code{font-size:.45em; font-weight:600; letter-spacing:0; color:var(--mid); margin-left:6px}
.rate{margin-top:6px; color:var(--mid); font-size:.92rem}
.rate + .rate{margin-top:0}
.rate:empty{display:none}

.copy,.chip{
  padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card);
  color:var(--fg); font:inherit; font-size:.85rem; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.copy:hover,.chip:hover{border-color:var(--fg)}
.chip[hidden]{display:none}

.meta{margin:18px 0 0; color:var(--mid); font-size:.85rem}
.meta:empty{display:none}
#retry{margin-top:8px}

.back:focus-visible,.swap:focus-visible,.copy:focus-visible,.chip:focus-visible,.clear:focus-visible{outline:2px solid var(--fg); outline-offset:4px}

@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.back,.page-title,.card,.meta{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.page-title{animation-delay:.08s} .card{animation-delay:.18s} .meta{animation-delay:.28s}

@view-transition{navigation:auto}

@media (max-width:480px){
  main{padding:84px 18px 40px}
  .card{padding:18px}
  .pair{grid-template-columns:1fr; gap:8px}
  .swap{justify-self:center; margin:2px 0}
  .back{left:18px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}