:root {
  color-scheme: dark;
  font: 15px/1.55 system-ui, sans-serif;
  background: #101512;
  color: #e3e9df
}

* {
  box-sizing: border-box
}

body {
  margin: 0
}

main {
  max-width: 1100px;
  margin: auto;
  padding: clamp(15px, 4vw, 48px)
}

header,
.row,
form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px
}

header {
  justify-content: space-between;
  border-bottom: 1px solid #465043;
  padding-bottom: 14px;
  color: #c4d0b9;
  letter-spacing: .08em;
  font-size: 12px
}

h1 {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 450;
  margin: 20px 0
}

h2,
h3 {
  font-weight: 500;
  font-size: 18px
}

a,
summary {
  color: #e1bf83
}

label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #b7c2b2
}

button,
select,
input,
textarea,
.action {
  max-width: 100%;
  font: inherit;
  border: 1px solid #46543f;
  border-radius: 6px;
  padding: 8px 11px;
  background: #1a211a;
  color: #eff1e9
}

button,
summary {
  cursor: pointer
}

.action {
  background: #394832;
  color: #eff3e4;
  text-decoration: none
}

#signin input {
  width: min(420px, 85vw)
}

form {
  align-items: end;
  padding: 12px 0
}

details {
  padding: 14px 0;
  border-bottom: 1px solid #354032
}

.columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px
}

.doc {
  display: block;
  width: 100%;
  margin: 5px 0;
  text-align: left;
  overflow-wrap: anywhere
}

small,
#msg,
li {
  color: #adbba8;
  font-size: 13px
}

#activity {
  max-height: 300px;
  overflow: auto
}

#members button {
  margin-left: 12px
}

dialog {
  width: min(850px, 95vw);
  border: 1px solid #52624a;
  border-radius: 8px;
  background: #1b211c;
  color: #e2e8da
}

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 60vh;
  overflow: auto
}

#issued {
  background: #232b20;
  padding: 12px
}

#msg {
  min-height: 20px
}

button:disabled {
  opacity: .5
}

[hidden] {
  display: none !important
}

@media(max-width:700px) {
  .columns {
    display: block
  }
}