style.css

:root {
  color-scheme: dark light;
  --primary: hsl(212deg 19% 19%);
  --primary-stronger: hsl(212deg 80% 40%);
  --primary-strongest: hsl(212deg 80% 50%);
  --primary-transparent: hsl(212deg 80% 30% / 0.5);
  --primary-complement: hsl(211deg 15% 33%);
  --secondary: hsl(30deg 80% 50%);
  --secondary-transparent: hsl(30deg 80% 80% / 0.5);
  --text-color: hsl(212deg 50% 98%);
  --text-background: hsl(211deg 15% 60%);
}

@media (prefers-color-scheme: light) {
  :root {
    --primary: hsl(211deg 100% 96%);
    --primary-stronger: hsl(212deg 80% 80%);
    --primary-strongest: hsl(212deg 70% 70%);
    --primary-transparent: hsl(211deg 98% 98% / 0.5);
    --primary-complement: hsl(212deg 70% 88%);
    --text-color: hsl(212deg 95% 10%);
    --text-background: hsl(211deg 15% 60%);
  }
}

html,
body {
  min-block-size: 100%;
}

body {
  inline-size: min(100% - 32px, 720px);
  margin-inline: auto;
  margin-block: 16px;
  background: radial-gradient(circle at top right, var(--primary-complement), var(--primary));
  font-family: system-ui, sans-serif;
  color: var(--text-color);
}

header,
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

h1 {
  margin-block: 0;
  margin-block-start: -4px;
}

#github-link {
  display: none;
}

@media (min-width: 34.375rem) {
  #github-link {
    display: initial;
  }
}

button,
a {
  border: initial;
  background: initial;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: var(--secondary);
  font-weight: 700;
  transition: filter 900ms;
}

:is(a:hover, a:focus):not(:has(svg)) {
  filter: brightness(115%) drop-shadow(0 0 8px var(--secondary-transparent));
  transition: filter 200ms;
}

button>svg,
a>svg {
  width: 24px;
  height: 24px;
  padding: 11px;
  border-radius: 16px;
  background: var(--primary-complement);
  color: var(--text-color);
  transition: filter 900ms;
}

:is(button>svg, a>svg):hover,
:is(button:focus-within, a:focus-within) svg {
  filter: brightness(115%) drop-shadow(0 0 16px var(--primary-complement));
  transition: filter 200ms;
}

main {
  margin-block-start: 16px;
  padding-block-start: 16px;
  border-block-start: 4px solid var(--primary-complement);
}

form,
form>div {
  display: flex;
  flex-direction: column;
}

form {
  gap: 16px;
}

form>div {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  form>div::before {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: -16px;
    inline-size: 8px;
    block-size: calc(100% + 8px);
    background: var(--primary-strongest);
    transform: scaleY(0);
  }

  form>div:focus-within::before {
    transform: scaleY(1);
    transition: transform 200ms;
  }

  form>div::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    inset-block-start: -4px;
    inset-inline-start: -8px;
    inline-size: calc(100% + 16px);
    block-size: calc(100% + 8px);
    background: radial-gradient(circle at left, var(--primary-complement), transparent 30%);
    opacity: 0;
  }

  form>div:focus-within::after {
    opacity: 1;
    transition: opacity 250ms;
    transition-delay: 100ms;
  }
}

label {
  font-size: 1.1rem;
  font-weight: 700;
}

aside {
  opacity: 0.7;
  transition: opacity 700ms;
}

form>div:focus-within aside {
  opacity: 1;
  transition: opacity 200ms;
}

@media (min-width: 88rem) {
  aside {
    position: absolute;
    inset-block-start: 26px;
    inset-inline-end: -8px;
    transform: translateX(100%);
    max-inline-size: 30ch;
  }
}

input {
  font-size: 16px;
  min-block-size: 24px;
  padding: 8px;
  margin-block-start: 8px;
  border-radius: 8px;
}

output {
  font-weight: 500;
  font-size: 1.1rem;
}

.text-button {
  inline-size: fit-content;
  background: var(--primary-strongest);
  color: var(--text-color);
  padding-inline: 16px;
  padding-block: 14px;
  border: 1px solid var(--primary-transparent);
  border-radius: 16px;
  line-height: normal;
  font-weight: 600;
  font-size: 16px;
  transition: filter 900ms, border-color 900ms;
}

.text-button:enabled:hover,
.text-button:enabled:focus-within {
  filter: brightness(115%) drop-shadow(0 0 16px var(--primary-complement));
  border: 1px solid var(--primary-strongest);
  transition: filter 200ms, border-color 200ms;
}

.text-button:disabled {
  background: var(--primary-complement);
  filter: brightness(95%);
  border: none;
}

.success::before {
  content: "✅";
  margin-inline-end: 8px;
}

.failure::before {
  content: "❌";
  margin-inline-end: 8px;
}

output::after {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .success::after {
    background-repeat: repeat-x;
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
    opacity: 0;
    transition: opacity 250ms;
    transition-delay: 2s;
  }
}

dialog {
  background: var(--primary-complement);
}

dialog::backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

dialog button {
  align-self: center;
}

#wallet-picker, #notification {
  border-radius: 16px;
  border: 2px solid var(--primary-strongest);
}

#wallet-picker::backdrop {
  filter: blur(4px);
  background-color: var(--primary-transparent);
}

#wallet-picker ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#wallet-picker li {
  background-color: var(--secondary-transparent);
  border: 2px solid var(--primary-stronger);
  border-radius: 16px;
  margin: 4px;
  transition: filter 400ms, background-color 400ms;
}

#wallet-picker :is(li:hover, li:focus-within) {
  background-color: var(--secondary);
  filter: brightness(115%);
  transition: filter 200ms, background-color 200ms;
}

#wallet-picker li button {
  inline-size: 100%;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 36px;
}

#wallet-picker p {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
}

#notification {
  position: fixed;
  bottom: 16px;
}

#notification>form {
  flex-direction: row;
}

#info-dialog {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: initial;
  max-block-size: initial;
  margin: 0;
  border: none;
}

#info-dialog button {
  position: fixed;
  top: 16px;
  right: 16px;
  filter: brightness(115%);
}

@media (min-width: 34.375rem) {
  #info-dialog {
    inline-size: min(100% - 32px, 960px);
    block-size: fit-content;
    max-block-size: calc(100% - 32px);
    margin-inline: auto;
    margin-block-start: 16px;
    border-radius: 16px;
    border: 2px solid var(--primary-strongest);
  }

  #info-dialog button {
    position: absolute;
  }
}

#info-dialog>form * {
  margin: 0;
}

#connect {
  max-inline-size: 18ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}