.exploratory-title-canvas h1 {
  max-width: 10ch;
  font-size: clamp(3.5rem, 7vw, 6.4rem);
}

.exploratory-title-canvas .intro-title-line {
  right: clamp(240px, 22vw, 320px);
  max-width: 400px;
}

.exploratory-help-canvas h2,
.exploratory-safety-canvas h2 {
  max-width: 16ch;
  font-size: clamp(3rem, 6vw, 5.8rem);
}

.help-script {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  margin: 0 0 18px;
  color: var(--ink);
  background: var(--ink);
  list-style: none;
}

.help-script li {
  padding: 13px;
  background: var(--paper);
  font-size: clamp(0.9rem, 1.3vw, 1.08rem);
  font-weight: 820;
  line-height: 1.2;
}

.help-script li:nth-child(2) {
  background: var(--yellow);
}

.help-script li:nth-child(3) {
  background: var(--orange);
}

.help-script li:nth-child(4) {
  color: var(--white);
  background: var(--blue);
}

.setup-rules .help-direct {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--paper);
  font-size: clamp(0.9rem, 1.3vw, 1.08rem);
}

.exploratory-safety-canvas .safety-notice strong {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.exploratory-safety-canvas .safety-notice ol {
  display: grid;
  gap: 12px;
  padding-left: 24px;
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.18rem);
  line-height: 1.3;
}

.exploratory-challenge-canvas h2 {
  max-width: 12ch;
}

@media (max-width: 820px) {
  .exploratory-title-canvas h1 {
    font-size: clamp(3.1rem, 11vw, 5.2rem);
  }

  .help-script {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 700px) and (min-width: 821px) {
  .exploratory-help-canvas h2,
  .exploratory-safety-canvas h2 {
    font-size: 3rem;
  }

  .exploratory-help-canvas .setup-layout,
  .exploratory-safety-canvas .safety-layout {
    margin-top: 20px;
  }

  .help-script li {
    padding: 9px 11px;
  }
}