:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #000; }
body { overflow: hidden; font-family: Inter, "Microsoft YaHei UI", system-ui, sans-serif; }
main { width: 100%; height: 100%; display: grid; place-items: center; }
form { width: min(86vw, 430px); transform: translateY(-1vh); }
.token-shell {
  display: flex; align-items: center; height: 58px; padding-left: 20px;
  border: 1px solid #242424; border-radius: 14px; background: #050505;
  box-shadow: 0 0 0 1px transparent, 0 20px 70px rgba(0,0,0,.8);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.token-shell:focus-within { border-color: #4ee8bd; box-shadow: 0 0 0 3px rgba(78,232,189,.12); }
input { flex: 1; min-width: 0; border: 0; outline: 0; color: #f6f7fb; background: transparent; font: 500 15px/1.2 inherit; letter-spacing: .03em; }
input::placeholder { color: #5d626c; }
button { width: 58px; height: 56px; border: 0; border-radius: 13px; color: #a9b0ba; background: transparent; font-size: 24px; cursor: pointer; transition: color .2s ease, background .2s ease; }
button:hover, button:focus-visible { color: #041710; background: #4ee8bd; outline: 0; }
#error { min-height: 20px; margin: 12px 4px 0; color: #de6d7a; font-size: 12px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }