body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; display: grid; align-items: center; }
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 7vw, 6rem);
}
.intro h1 {
  margin: 0;
  font: 900 clamp(3rem, 6.6vw, 7rem)/.95 var(--display);
  letter-spacing: -.075em;
}
.intro h1 span { text-shadow: .044em .044em var(--acid); }
.intro p { max-width: 31ch; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 1.2rem 0 1.55rem; }
.preloader-demo {
  min-width: 0;
  padding: clamp(.85rem, 2.5vw, 1.5rem);
  border-radius: .65rem;
  background: var(--ink);
  color: var(--paper);
  box-shadow: .38rem .38rem 0 var(--acid);
}
.preloader-demo h2 { margin: 0 0 .85rem; }
.preloader-demo iframe {
  display: block;
  width: 100%;
  height: clamp(15rem, 29vw, 25rem);
  border: 1px solid var(--dark-line);
  border-radius: .35rem;
  background: #2d2933;
}
.preview-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .85rem; margin-top: .85rem; }
.preview-controls .pill { border-color: var(--acid); }
.preview-controls p { margin: 0; font-size: .86rem; color: #dedbe3; }
@media (max-width: 52rem) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .intro h1 { font-size: clamp(2.85rem, 11.8vw, 6rem); }
}