@media (max-width: 480px) {
  .intro h1 {
    font-size: 40px;
    letter-spacing: -2.2px;
  }

  header {
    height: auto;
    min-height: 64px;
    padding: 14px 5vw;
    gap: 12px;
  }

  header .brand { font-size: 19px; }
  header .back { font-size: 11px; text-align: right; }
  .intro { padding-inline: 7vw; }
  .workspace { margin-inline: 14px; }
  .panel { padding: 20px; gap: 18px; }
  .description { padding: 22px 20px; }
  .description h2 { font-size: 30px; }
  .frame-wrap { padding: 7px; }
  iframe { height: 340px; }
}

@media (max-width: 360px) {
  header .back { max-width: 105px; }
  .intro h1 { font-size: 36px; }
  .panel-actions { gap: 12px; }
  iframe { height: 300px; }
}