:root {
  color-scheme: dark;
  font: 17px/1.55 system-ui, sans-serif;
  background: #131722;
  color: #edf0fa;
}
body { margin: 0; }
main { width: min(42rem, calc(100% - 3rem)); margin: 3rem auto; }
header { margin-bottom: 2rem; }
.brand { color: #b7bfff; font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
h1 { font-size: 2.3rem; line-height: 1.1; margin: .4rem 0; }
h2 { margin-top: 0; }
section { background: #202638; border: 1px solid #39435e; border-radius: .8rem; margin-bottom: 1.25rem; padding: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
details { margin-top: 1rem; }
summary { cursor: pointer; }
a { color: #b7bfff; }
button, .button { display: inline-block; border: 1px solid #616e91; border-radius: .45rem; padding: .5rem .9rem; background: #2a324a; color: #edf0fa; font: inherit; font-weight: 600; text-decoration: none; }
button:disabled { opacity: .5; }
.primary { background: #b7bfff; color: #151a30; }
:focus-visible { outline: 2px solid #e1cc84; outline-offset: 3px; }