:root {
  --color-special-ilo: #fff0cc;
  --color-special-ilo-accent: #ffb200;
  --color-special-hehku: #ffe1cc;
  --color-special-hehku-accent: #e87d30;
  --color-special-kuiskaus: #ffe6ec;
  --color-special-kuiskaus-accent: #eb4770;
  --color-special-seikkailu: #d7caff;
  --color-special-seikkailu-accent: #7047eb;
  --color-special-luotto: #cdeaff;
  --color-special-luotto-accent: #1991e6;
  --color-special-raikas: #d1f4c5;
  --color-special-raikas-accent: #2db42d;
  --color-special-off-white: #fcf8f6;
}

.theme-ilo {
  background: var(--color-special-ilo);
  --tile-bg: var(--color-special-ilo);
  --accent: var(--color-special-ilo-accent);
}

.theme-hehku {
  background: var(--color-special-hehku);
  --tile-bg: var(--color-special-hehku);
  --accent: var(--color-special-hehku-accent);
}

.theme-kuiskaus {
  background: var(--color-special-kuiskaus);
  --tile-bg: var(--color-special-kuiskaus);
  --accent: var(--color-special-kuiskaus-accent);
}

.theme-seikkailu {
  background: var(--color-special-seikkailu);
  --tile-bg: var(--color-special-seikkailu);
  --accent: var(--color-special-seikkailu-accent);
}

.theme-luotto {
  background: var(--color-special-luotto);
  --tile-bg: var(--color-special-luotto);
  --accent: var(--color-special-luotto-accent);
}

.theme-raikas {
  background: var(--color-special-raikas);
  --tile-bg: var(--color-special-raikas);
  --accent: var(--color-special-raikas-accent);
}

.theme-off-white {
  background: var(--color-special-off-white);
  --tile-bg: var(--color-special-off-white);
  --accent: #9c9895;
}

.theme-ilo-accent {
  color: var(--color-special-ilo-accent);
}

.theme-hehku-accent {
  color: var(--color-special-hehku-accent);
}

.theme-kuiskaus-accent {
  color: var(--color-special-kuiskaus-accent);
}

.theme-seikkailu-accent {
  color: var(--color-special-seikkailu-accent);
}

.theme-luotto-accent {
  color: var(--color-special-luotto-accent);
}

.theme-raikas-accent {
  color: var(--color-special-raikas-accent);
}

.theme-gradient {
  --_center: color-mix(in srgb, var(--tile-bg, #fff0cc), #fff 35%);
  --_edge: color-mix(in srgb, var(--tile-bg, #fff0cc), #000 12%);
  background: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.09) 0%, transparent 55%), radial-gradient(ellipse 130% 115% at 40% 54%, var(--_center) 0%, var(--tile-bg, #fff0cc) 48%, var(--_edge) 100%);
}

.themeselectorw {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

.themeswatch {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font: 600 14px/1 system-ui, -apple-system, sans-serif;
  color: var(--accent, #2d2926);
  -webkit-transition: -webkit-box-shadow 0.15s ease, -webkit-transform 0.12s ease;
  transition: -webkit-box-shadow 0.15s ease, -webkit-transform 0.12s ease;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
  transition: box-shadow 0.15s ease, transform 0.12s ease, -webkit-box-shadow 0.15s ease, -webkit-transform 0.12s ease;
}

.themeswatch:hover {
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
}

.themeswatch:active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.themeswatch.is-selected {
  -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent, #2d2926);
          box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent, #2d2926);
}

.themeswatch.theme-none {
  background: #f3f1ef;
  color: #6c6967;
  --accent: #2d2926;
}

.heroimg_ctrlpanel {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.heroimg_ctrlpanel .imgbox {
  border-radius: 12px;
  overflow: hidden;
}

.heroimg_ctrlpanel .imgbox img {
  display: block;
  width: 100%;
  height: auto;
}

.heroimg_ctrlpanel .themeselectorw {
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

@media (max-width: 640px) {
  .heroimg_ctrlpanel {
    grid-template-columns: 1fr;
  }
}