.hs-panels { overflow: hidden; background: radial-gradient(ellipse at 12% 50%,#efe9fd88,transparent 50%),linear-gradient(180deg,#fff,#f8f6fc); scroll-margin-top: 100px; }
.hs-panels *, .hs-panels *::before, .hs-panels *::after { box-sizing: border-box; }
.hs-panels-heading { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.hs-panels-heading .eyebrow { margin-inline: auto; }
.hs-panels-heading h2 { margin: 22px 0 18px; color: #111526; font-size: clamp(34px,4vw,52px); line-height: 1.1; letter-spacing: -1.7px; }
.hs-panels-heading h2 em { color: #7137de; font-style: normal; }
.hs-panels-heading p { max-width: 630px; margin: auto; color: #697185; font-size: 16px; line-height: 1.75; }
.hs-panels-stage { position: relative; isolation: isolate; width: min(100%,calc(100vw - 112px)); margin-inline: auto; outline: none; touch-action: pan-y pinch-zoom; }
.hs-panels-stage:focus-visible { outline: 2px solid #9465ed; outline-offset: 6px; border-radius: 20px; }
.hs-panels-card { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: clamp(24px,3vw,44px); align-items: center; min-width: 0; padding: 28px; background: #fff; border: 1px solid #e8e1f2; border-radius: 20px; box-shadow: 0 20px 60px #3720640c; }
.hs-panels-card[hidden], .hs-panels-shot[hidden] { display: none; }
.hs-panels-card:not([hidden]) { position: relative; z-index: 2; }
.hs-panels-card[hidden].is-previous-preview, .hs-panels-card[hidden].is-next-preview { position: absolute; top: 50%; display: grid; width: 100%; z-index: 0; opacity: .25; filter: blur(2.5px); transform: translateY(-50%) scale(.94); pointer-events: none; user-select: none; box-shadow: 0 16px 45px #37206409; }
.hs-panels-card.is-previous-preview { right: calc(100% + 22px); transform-origin: right center; }
.hs-panels-card.is-next-preview { left: calc(100% + 22px); transform-origin: left center; }
.hs-panels-card.is-entering { animation: pv-enter .35s ease both; }
.hs-panels-media { min-width: 0; background: #f4f2f8; border: 1px solid #e4ddec; border-radius: 12px; overflow: hidden; }
.hs-panels-bar { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; background: #f6f4f9; border-bottom: 1px solid #e8e3ef; }
.hs-panels-bar > span { display: flex; gap: 4px; flex-shrink: 0; }
.hs-panels-bar > span i { width: 5px; height: 5px; background: #c9bfd6; border-radius: 50%; }
.hs-panels-bar > span i:first-child { background: #e9aaaa; }.hs-panels-bar > span i:nth-child(2) { background: #e4cf9f; }.hs-panels-bar > span i:nth-child(3) { background: #abd5c8; }
.hs-panels-bar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #766588; font-size: 8px; letter-spacing: .6px; font-weight: 700; }.hs-panels-bar b span { color: #94899f; font-weight: 500; letter-spacing: 0; }
.hs-panels-bar > svg { width: 12px; height: 12px; color: #93869f; flex-shrink: 0; }
.hs-panels-shots { position: relative; aspect-ratio: 16 / 10; background: #f1f2f7; }
.hs-panels-shot { position: absolute; inset: 0; display: grid; place-items: center; cursor: zoom-in; }
.hs-panels-shot img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.hs-panels-shot:focus-visible { outline: 3px solid #8b53eb; outline-offset: -3px; }
.hs-panels-zoom { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: #211330e8; color: white; border: 1px solid #ffffff42; border-radius: 7px; font-size: 10px; font-weight: 600; box-shadow: 0 4px 12px #1c0c3220; }
.hs-panels-zoom svg { width: 13px; height: 13px; }
.hs-panels-media-foot { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 8px; border-top: 1px solid #e7e1ee; background: #faf9fc; }
.hs-panels-media-foot > span { display: flex; gap: 6px; align-items: center; font-size: 10px; color: #8a7d9b; }.hs-panels-media-foot > span svg { width: 13px; height: 13px; }
.hs-panels-variants { display: flex; gap: 6px; }
.hs-panels-variants button { padding: 7px 10px; border-radius: 6px; border: 1px solid #e5dced; background: white; color: #80718f; font-size: 10px; font-weight: 600; cursor: pointer; }.hs-panels-variants button span { margin-left: 5px; font-weight: 400; }
.hs-panels-variants button[aria-pressed="true"] { border-color: #c5a8ed; color: #642bb5; background: #f0e8fc; }
.hs-panels-copy { min-width: 0; padding: 12px 12px 12px 0; }
.hs-panels-tag { display: flex; align-items: center; gap: 10px; color: #8c78a2; font-size: 8px; line-height: 1.5; font-weight: 750; letter-spacing: 1px; }
.hs-panels-tag > span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #e1d1f4; border-radius: 8px; background: #f6f0fe; color: #7a3bcd; font-size: 11px; letter-spacing: 0; }
.hs-panels-copy h3 { margin: 18px 0 15px; color: #161326; font-size: clamp(25px,2.5vw,35px); line-height: 1.16; letter-spacing: -.8px; }
.hs-panels-copy > p { margin: 0; color: #6d7082; font-size: 14px; line-height: 1.8; }
.hs-panels-copy ul { display: grid; gap: 11px; list-style: none; margin: 24px 0; padding: 0; }.hs-panels-copy li { display: flex; align-items: center; gap: 8px; color: #484354; font-size: 11px; line-height: 1.6; }.hs-panels-copy li svg { width: 15px; height: 15px; flex-shrink: 0; color: #9566d6; }
.hs-panels-detail { display: inline-flex; align-items: center; gap: 18px; padding: 0; background: none; border: 0; color: #7137c5; font-size: 12px; line-height: 1.8; font-weight: 700; cursor: pointer; }.hs-panels-detail > span { font-size: 19px; }
.hs-panels-controls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 26px; }
.hs-panels-arrows { display: flex; align-items: center; gap: 14px; }
.hs-panels-arrows button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: #7643c4; background: white; border: 1px solid #e3d8f2; border-radius: 50%; cursor: pointer; transition: color .2s,background .2s; }.hs-panels-arrows button:hover { background: #7433d8; color: white; }.hs-panels-arrows button svg { width: 17px; height: 17px; }
.hs-panels-arrows > span { min-width: 54px; text-align: center; font-size: 13px; font-weight: 700; color: #39264e; font-variant-numeric: tabular-nums; }.hs-panels-arrows small { font-size: 11px; color: #9b8ba9; font-weight: 400; }
.hs-panels-select { display: flex; align-items: center; gap: 10px; color: #8a7c99; font-size: 10px; }.hs-panels-select select { max-width: 250px; min-height: 40px; padding: 8px 30px 8px 12px; font: inherit; font-size: 11px; color: #514160; border: 1px solid #e2d7f0; background: #fff; border-radius: 8px; cursor: pointer; }
.hs-panels-tip { display: flex; align-items: center; gap: 6px; color: #9c8caa; font-size: 10px; }.hs-panels-tip svg { width: 16px; height: 16px; }
.hs-panels button:focus-visible, .hs-panels select:focus-visible { outline: 2px solid #9260df; outline-offset: 4px; }
.hs-panels-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hs-panels-dialog { width: min(1800px,96vw); max-width: 96vw; max-height: 94vh; max-height: 94dvh; padding: 0; border: 1px solid #554269; border-radius: 14px; background: #181222; color: white; box-shadow: 0 24px 100px #0008; }
.hs-panels-dialog::backdrop { background: #0d071bdd; backdrop-filter: blur(6px); }
.hs-panels-dialog-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 16px 22px; border-bottom: 1px solid #ffffff17; }.hs-panels-dialog-head > div { min-width: 0; }.hs-panels-dialog-head span { display: block; margin-bottom: 5px; color: #b29aca; font-size: 8px; letter-spacing: 1.2px; }.hs-panels-dialog-head h3 { margin: 0; color: #f7f1fc; font-size: 15px; font-weight: 600; }
.hs-panels-dialog-head button { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; background: #ffffff0a; color: #e4d4f4; border: 1px solid #ffffff25; border-radius: 8px; cursor: pointer; }.hs-panels-dialog-head button svg { width: 18px; height: 18px; }
.hs-panels-dialog-image { display: flex; justify-content: center; align-items: center; overflow: auto; min-height: 180px; background: #eeeff5; max-height: calc(94vh - 150px); max-height: calc(94dvh - 150px); overscroll-behavior: contain; }
.hs-panels-dialog-image img { display: block; max-width: 100%; max-height: calc(94vh - 150px); max-height: calc(94dvh - 150px); width: auto; height: auto; object-fit: contain; }
.hs-panels-dialog.is-natural .hs-panels-dialog-image { display: block; }.hs-panels-dialog.is-natural .hs-panels-dialog-image img { max-width: none; max-height: none; margin-inline: auto; }
.hs-panels-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 22px; }.hs-panels-dialog-foot .hs-panels-arrows button { width: 34px; height: 34px; background: #ffffff09; border-color: #ffffff20; color: #dfcff1; }.hs-panels-dialog-foot .hs-panels-arrows > span { color: #dfcff1; font-size: 11px; }.hs-panels-dialog-foot > button { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #ffffff25; background: transparent; color: #d5c1ea; border-radius: 7px; cursor: pointer; font-size: 11px; }.hs-panels-dialog-foot > button svg { width: 15px; height: 15px; }
html.hs-panels-modal-open { overflow: hidden; }
@keyframes pv-enter { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media(max-width:1100px) { .hs-panels-card { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); padding: 22px; gap: 26px; }.hs-panels-copy { padding: 0; }.hs-panels-copy h3 { font-size: 28px; }.hs-panels-copy > p { font-size: 13px; }.hs-panels-tip { display: none; } }
@media(max-width:760px) {
  .hs-panels-stage { width: 100%; }
  .hs-panels-card.is-previous-preview { right: calc(100% + 5px); }
  .hs-panels-card.is-next-preview { left: calc(100% + 5px); }
  .hs-panels { padding: 56px 0; }.hs-panels-heading { margin-bottom: 28px; }.hs-panels-heading h2 { font-size: 34px; letter-spacing: -1px; }.hs-panels-heading p { font-size: 13px; padding-inline: 6px; }
  .hs-panels-card { grid-template-columns: 1fr; padding: 14px; gap: 22px; border-radius: 15px; }.hs-panels-copy { padding: 0 6px 10px; }.hs-panels-copy h3 { margin-top: 14px; font-size: 28px; }.hs-panels-copy > p { font-size: 13px; }.hs-panels-copy ul { margin: 20px 0; }
  .hs-panels-bar { height: 29px; padding-inline: 9px; gap: 8px; }.hs-panels-bar b { font-size: 7px; }.hs-panels-bar b span { display: none; }.hs-panels-media-foot { min-height: 42px; }.hs-panels-media-foot > span { font-size: 8px; }.hs-panels-zoom { right: 8px; bottom: 8px; padding: 6px 8px; font-size: 9px; }
  .hs-panels-variants button { padding: 6px 8px; font-size: 9px; }.hs-panels-variants button span { display: none; }.hs-panels-controls { flex-wrap: wrap; gap: 16px; }.hs-panels-select { justify-content: center; width: 100%; }.hs-panels-select select { max-width: 220px; }
  .hs-panels-dialog-head { padding: 12px; }.hs-panels-dialog-head h3 { font-size: 12px; line-height: 1.5; }.hs-panels-dialog-foot { padding: 10px 12px; gap: 8px; }.hs-panels-dialog-foot .hs-panels-arrows { gap: 6px; }.hs-panels-dialog-foot > button { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .hs-panels * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }