.document {
  width: min(850px, calc(100% - 40px));
  margin: 50px auto 90px;
}

.document h1 {
  margin-top: 12px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
}

.document h2 {
  margin-top: 36px;
  color: var(--gold);
  font: 600 28px Space Grotesk, sans-serif;
}

.document > p,
.document label {
  margin-top: 18px;
}

.document label {
  display: block;
  color: var(--muted-light);
  font-weight: 700;
}

.document input,
.document select,
.document textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #070f14;
  color: var(--ink);
  font: inherit;
}

.document textarea {
  min-height: 120px;
  resize: vertical;
}

.document pre {
  overflow: auto;
  min-height: 180px;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  background: #070f14;
  color: var(--muted-light);
  white-space: pre-wrap;
}

.document .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.document .button {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--night-2);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.document .button.primary {
  border-color: var(--gold);
  background: var(--gold);
  color: #15150f;
}

.notice {
  padding: 13px;
  border: 1px solid #7f6628;
  background: #2a2415;
  color: #f2d98c;
}