.axhm-viewer { min-width: 0; }
.axhm-feature { margin: 0; }
.axhm-stage {
  --axhm-split: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  background: #202128;
  border: 1px solid #ffffff26;
  border-radius: 18px;
  box-shadow: 0 24px 60px #00000035;
}
.axhm-stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity .22s ease;
}
.axhm-stage.is-changing img { opacity: .55; }
.axhm-before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--axhm-split)) 0 0);

}
.axhm-labels {
  position: absolute;
  z-index: 4;
  inset: 16px 16px auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.axhm-labels span {
  padding: 7px 9px;
  border-radius: 6px;
  background: #101112c7;
  color: #f3f3ef;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
}
.axhm-divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--axhm-split);
  width: 2px;
  transform: translateX(-50%);
  background: #f3f3ef;
  pointer-events: none;
}
.axhm-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border: 2px solid #f3f3ef;
  border-radius: 50%;
  background: #8b8be4;
  color: #101112;
  font: 23px/1 Arial, sans-serif;
  white-space: nowrap;
}
.axhm-slider {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.axhm-stage:focus-within { outline: 3px solid #8b8be4; outline-offset: 4px; }
.axhm-caption {
  display: grid;
  grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr);
  gap: 28px;
  padding: 22px 0 26px;
  border-bottom: 1px solid #ffffff24;
}
.axhm-caption > div:last-child { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; align-items: start; }
.axhm-count, .axhm-time {
  display: block;
  color: #aaa9ec;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 1.4px;
}
.axhm-title { margin-top: 7px; font-size: clamp(25px, 1.8vw, 38px); line-height: 1; letter-spacing: .5px; }
.axhm-description { max-width: 46ch; font-size: 14px; line-height: 1.65; color: #d4d4d1; }
.axhm-list { display: grid; grid-template-columns: repeat(var(--axhm-columns,3), minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.axhm-option {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #f3f3ef;
  text-align: left;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.axhm-option:hover { background: #ffffff0b; }
.axhm-option.is-active { border-color: #8b8be488; background: #8b8be410; }
.axhm-option:focus-visible { outline: 2px solid #c7c7ff; outline-offset: 3px; }
.axhm-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 7px; background: #202128; }
.axhm-thumb::after { content: ''; position: absolute; inset: 0; border: 1px solid #ffffff18; border-radius: inherit; }
.axhm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.axhm-option.is-active .axhm-thumb img { filter: none; }
.axhm-option-copy { min-width: 0; }
.axhm-option small { display: block; margin-bottom: 6px; color: #aaa9ec; font-size: 10px; letter-spacing: 1px; }
.axhm-option strong { display: block; overflow: hidden; font: 600 18px/1.05 'Barlow Condensed', sans-serif; letter-spacing: .4px; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 2000px){
.axhm-description { font-size: .75vw; }
.axhm-option strong { font-size: 1vw; }
}

@media (max-width: 1024px){
.axhm-option { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 767px){
.axhm-stage { border-radius: 12px; }
.axhm-labels { inset: 10px 10px auto; }
.axhm-labels span { padding: 6px 7px; font-size: 9px; }
.axhm-divider span { width: 40px; height: 40px; font-size: 20px; }
.axhm-caption { grid-template-columns: 1fr; gap: 14px; padding: 18px 0 22px; }
.axhm-caption > div:last-child { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
.axhm-title { font-size: 28px; }
.axhm-description { font-size: 14px; }
.axhm-list { grid-template-columns: 1fr; gap: 6px; }
.axhm-option { grid-template-columns: 96px minmax(0, 1fr); padding: 8px; }
.axhm-option strong { font-size: 20px; }
}

.axhm-viewer{font-family:"DM Sans",sans-serif;font-size:16px;color:#f3f3ef;line-height:1.5;letter-spacing:0;text-align:left;direction:ltr}
.axhm-viewer *{box-sizing:border-box}
.axhm-viewer .axhm-title{font-family:"Barlow Condensed",sans-serif;font-weight:700;color:inherit;margin-bottom:0}
.axhm-viewer .axhm-description{margin:0}
.axhm-viewer .axhm-demo{filter:grayscale(1) saturate(.3) contrast(.88) brightness(.82)}
.axhm-option{font-family:inherit;line-height:1.5;text-transform:none;box-shadow:none;white-space:normal}
.axhm-option:focus{color:inherit;background:#8b8be410}
.axhm-viewer .axhm-stage img{max-width:none;border-radius:0}
.axhm-viewer .axhm-slider{padding:0;border:0}
.axhm-empty{padding:24px;border:1px dashed #8b8be4}
@media(prefers-reduced-motion:reduce){.axhm-viewer *{transition:none}}