.kpg-wrap,
.kpg-wrap * {
  box-sizing: border-box;
}

.kpg-wrap {
  width: 100%;
  max-width: 8.5in;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
}

.kpg-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 22px auto 28px !important;
  width: 100% !important;
}

.kpg-levels {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: center !important;
}

.kpg-wrap button.kpg-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 2px solid #111 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #111 !important;
  min-width: 118px !important;
  padding: 15px 22px !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.kpg-wrap button.kpg-difficulty[data-difficulty="easy"] {
  background: #07984a !important;
  border-color: #07984a !important;
  color: #fff !important;
}

.kpg-wrap button.kpg-difficulty[data-difficulty="medium"] {
  background: #f4ac34 !important;
  border-color: #f4ac34 !important;
  color: #fff !important;
}

.kpg-wrap button.kpg-difficulty[data-difficulty="hard"] {
  background: #ec1f2b !important;
  border-color: #ec1f2b !important;
  color: #fff !important;
}

.kpg-wrap button.kpg-difficulty:not(.is-active) {
  opacity: .55 !important;
}

.kpg-output {
  width: 100%;
}

.kpg-page {
  width: 8.5in;
  height: 11in;
  max-width: 100%;
  background: #fff;
  border: 2px solid #111;
  padding: .32in .32in .24in;
  margin: 0 auto 30px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.kpg-title {
  text-align: center;
  font-size: 46px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 3px;
  margin: 0 0 .22in;
  text-transform: uppercase;
  color: #444;
}

.kpg-fillin-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
}

.kpg-crossword-svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.kpg-wordbank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1.35in, 1fr));
  gap: 14px 22px;
  align-items: start;
  padding-top: .16in;
}

.kpg-word-group h4 {
  margin: 0 0 9px;
  font-size: 17px;
  line-height: 1.05;
  font-weight: 900;
  color: #444;
  text-decoration: underline;
  text-transform: uppercase;
  white-space: nowrap;
}

.kpg-word-group div {
  font-size: 18px;
  line-height: 1.28;
  color: #666;
  text-transform: lowercase;
}

@page {
  size: Letter portrait;
  margin: 0;
}

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body * {
    visibility: hidden !important;
  }
  .kpg-page,
  .kpg-page * {
    visibility: visible !important;
  }
  .kpg-page {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 8.5in !important;
    height: 11in !important;
    margin: 0 !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
}

@media (max-width: 760px) {
  .kpg-controls {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .kpg-levels {
    flex-wrap: wrap !important;
  }
  .kpg-wrap button.kpg-button {
    width: 100% !important;
  }
  .kpg-wordbank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}