.compile-helper-panel {
  box-sizing: border-box;
  max-width: 70rem;
  margin: 0 auto 1rem;
  padding: clamp(1rem, 4vw, 1.75rem);
  color: #222c2b;
  background: #fffdf4;
  border: 1px solid #e8dca6;
  border-radius: 16px;
}
.compile-helper-panel[hidden] { display: none; }
.compile-helper-page main { margin: 2rem auto; padding: 0 1rem; }
.compile-helper-heading { display: flex; align-items: flex-start; gap: 1rem; }
.compile-helper-heading > img { flex: 0 0 64px; object-fit: contain; }
.compile-helper-heading h2 { margin: 0 0 .4rem; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.compile-helper-panel p { margin: 0 0 .85rem; line-height: 1.55; }
.compile-helper-panel ol { padding-inline-start: 1.5rem; line-height: 1.6; }
.compile-helper-panel li + li { margin-top: .45rem; }
.compile-helper-panel .compile-helper-close { margin-inline-start: auto; flex: 0 0 auto; }
.compile-helper-panel .compile-helper-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .9rem;
  border-radius: 9px;
  background: #ffdf79;
  color: #352407;
  font-weight: 750;
}
.compile-helper-workspaces { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@media (max-width: 450px) {
  .compile-helper-heading { gap: .65rem; }
  .compile-helper-heading > img { flex-basis: 40px; width: 40px; height: 40px; }
}