/*!
 * Eventside – style switcher (demo panel for index.html)
 * Panel styles, the options it controls (corners, boxed width, fonts) and the demo gallery.
 * Remove this file together with switcher.js and switcher-parts.js to drop the switcher.
 *
 *  1. Options applied to the page
 *  2. Trigger button
 *  3. Panel
 *  4. Controls (swatches, option cards, switches)
 *  5. Sketches (header, footer, width previews)
 *  6. Demo cards and the demo gallery
 *  7. Small screens and reduced motion
 */

/* ==========================================================================
   1. Options applied to the page
   ========================================================================== */
/* hide the default header for a moment while a saved one is swapped in */
html.sw-swapping header.site-header { visibility: hidden; }

/* colour: a few theme spots use fixed blues; follow the chosen colour instead */
html[data-color] .header-boxed--dark .main-nav {
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-600) 42%, #16141f 80%, #0b0a09 100%);
}
html[data-color] .header-boxed--dark .header-progress span,
html[data-color] .header-boxed--dark .count-badge { background: var(--c-primary); }
html[data-color] .site-footer--dark .back-to-top,
html[data-color] .toast .icon { color: var(--sw-primary-light); }

/* fonts: body text uses --f-base (set by the script), headings use --sw-f-head */
html[data-font] :is(.site-main, .site-footer) :is(h1, h2, h3, h4, h5, h6) { font-family: var(--sw-f-head); }
html[data-font="editorial"] :is(.site-main, .site-footer) :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.01em; }

/* corners */
html[data-radius="sharp"] { --sw-r-btn: 0; --sw-r-card: 0; --sw-r-img: 0; --sw-r-field: 0; }
html[data-radius="soft"] { --sw-r-btn: 8px; --sw-r-card: 12px; --sw-r-img: 10px; --sw-r-field: 8px; }
html[data-radius="round"] { --sw-r-btn: 999px; --sw-r-card: 26px; --sw-r-img: 22px; --sw-r-field: 999px; }
html[data-radius] :is(.site-main, .site-footer, .site-header, .cookie) :is(.btn, .badge) { border-radius: var(--sw-r-btn); }
html[data-radius] :is(.site-main, .cookie, .minicart) :is(.bento__item, .plan, .post-card, .info-bar, .faq__box, .acc-item, .pay-option, .bio-card),
html[data-radius] .cookie,
html[data-radius] .minicart { border-radius: var(--sw-r-card); }
html[data-radius] .site-main :is(.speaker-card, .gallery__item, .testi__media, .venue__img, .post-card__img, .plan__img) {
  overflow: hidden;
  border-radius: var(--sw-r-img);
}
html[data-radius] .site-main :is(.plan, .post-card, .bento__item) { overflow: hidden; }
html[data-radius] :is(.site-main, .site-footer) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select) { border-radius: var(--sw-r-field); }
/* inner pages: page hero, ticket band and the cards they share */
html[data-radius] .site-main :is(.ph__badge, .ph__card, .ph__day, .ph__contact a, .cta2__ticket, .cta2__count > span, .post-head, .soon__contact a, .schedule__tab, .product-card) { border-radius: var(--sw-r-card); }
html[data-radius] .site-main :is(.ph__face, .post-row__img, .bio__img, .product-card__img) { overflow: hidden; border-radius: var(--sw-r-img); }
html[data-radius] .site-main .ph__frame { border-radius: var(--sw-r-img); clip-path: inset(0 round var(--sw-r-img)); }
html[data-radius] .site-main .ph__chip { border-radius: var(--sw-r-btn); }

/* boxed page */
html[data-layout="boxed"] {
  background:
    radial-gradient(rgba(20, 22, 40, .09) 1px, transparent 1.2px) 0 0 / 18px 18px,
    #eceef3;
}
@media (min-width: 1200px) {
  html[data-layout="boxed"] body {
    position: relative;
    max-width: 1320px;
    margin-inline: auto;
    overflow-x: clip;
    box-shadow: 0 0 0 1px rgba(20, 22, 40, .06), 0 40px 120px -30px rgba(20, 22, 40, .35);
  }
  html[data-layout="boxed"] .site-header.is-sticky {
    left: max(0px, calc(50% - 660px));
    right: max(0px, calc(50% - 660px));
  }
  html[data-layout="boxed"] .header-oc__actions { right: max(var(--gutter), calc((min(100vw, 1320px) - var(--container)) / 2)); }
  html[data-layout="boxed"] .is-hscroll .gallery { padding-inline: max(var(--gutter), calc((min(100vw, 1320px) - var(--container)) / 2 + var(--gutter))); }
}

/* the colour change grows as a circle from the clicked swatch */
html.sw-vt-circle::view-transition-old(root),
html.sw-vt-circle::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.sw-panel { view-transition-name: sw-panel; }
.sw-trigger { view-transition-name: sw-trigger; }

body.sw-locked { overflow: hidden; }
body.sw-leaving > :not(.sw) { opacity: .35; transition: opacity .2s ease; }

/* ==========================================================================
   2. Trigger button
   ========================================================================== */
.sw {
  --sw-ink: #15161c;
  --sw-text: #5d6170;
  --sw-line: #e5e7ee;
  --sw-soft: #f3f4f8;
  --sw-pick: var(--c-primary, #0c00c1);
  --sw-ease: cubic-bezier(.16, 1, .3, 1);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sw-text);
  -webkit-font-smoothing: antialiased;
}
.sw *, .sw *::before, .sw *::after { box-sizing: border-box; }
.sw button { font: inherit; color: inherit; cursor: pointer; }
.sw :focus-visible { outline: 2px solid var(--sw-pick); outline-offset: 2px; }

.sw-trigger {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 15px 0 14px;
  color: #fff;
  background: var(--sw-ink);
  border: 0;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 14px 34px -12px rgba(20, 22, 40, .55);
  translate: 0 -50%;
  transition: translate .45s var(--sw-ease), gap .35s var(--sw-ease), background-color .25s;
}
.sw-trigger .sw-icon { width: 22px; height: 22px; transition: rotate .6s var(--sw-ease); animation: swTurn 10s linear infinite; }
/* a slow turn says "settings"; three soft pulses in the theme colour after load invite a click */
.sw-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--c-primary-rgb, 12, 0, 193), .5);
  pointer-events: none;
  animation: swBeacon 2.4s cubic-bezier(.16, 1, .3, 1) 1.2s 3;
}
.sw.is-open .sw-trigger .sw-icon { animation-play-state: paused; }
.sw-trigger__label {
  max-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .4s var(--sw-ease), opacity .25s;
}
.sw-trigger:hover, .sw-trigger:focus-visible { gap: 9px; background: #000; }
.sw-trigger:hover .sw-icon, .sw-trigger:focus-visible .sw-icon { rotate: 90deg; }
.sw-trigger:hover .sw-trigger__label, .sw-trigger:focus-visible .sw-trigger__label { max-width: 90px; opacity: 1; }
.sw-trigger.is-hinting { animation: swHint 2.6s var(--sw-ease) 1 both; }
.sw-trigger.is-hinting .sw-trigger__label { animation: swLabel 2.6s var(--sw-ease) 1; }
.sw.is-open .sw-trigger { translate: -110% -50%; }
/* it slides in once the loading screen has gone */
html.is-preloading .sw:not(.is-open) .sw-trigger { translate: -110% -50%; }
/* the site menu or search is open on a phone: step aside */
body.is-locked .sw:not(.is-open) .sw-trigger { translate: -110% -50%; }
@keyframes swTurn { to { transform: rotate(360deg); } }
@keyframes swBeacon { to { box-shadow: 0 0 0 16px rgba(var(--c-primary-rgb, 12, 0, 193), 0); } }
html[data-motion="off"] .sw-trigger .sw-icon, html[data-motion="off"] .sw-trigger::after { animation: none; }
@keyframes swHint { 0%, 100% { gap: 0; } 15%, 80% { gap: 9px; } }
@keyframes swLabel { 0%, 100% { max-width: 0; opacity: 0; } 15%, 80% { max-width: 90px; opacity: 1; } }

/* ==========================================================================
   3. Panel
   ========================================================================== */
.sw-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(400px, 100vw);
  background: #fff;
  box-shadow: 30px 0 80px -20px rgba(20, 22, 40, .28);
  transform: translateX(-104%);
  transition: transform .55s var(--sw-ease);
}
.sw-panel[hidden] { display: none; }
.sw.is-open .sw-panel { transform: none; }

.sw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 18px; }
.sw-head__title { margin: 0 0 2px; font-family: inherit; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--sw-ink); }
.sw-head__text { margin: 0; font-size: 13px; }
.sw-iconbtn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--sw-ink);
  background: var(--sw-soft);
  border: 0;
  border-radius: 50%;
  transition: background-color .2s, rotate .4s var(--sw-ease);
}
.sw-iconbtn:hover { background: #e7e9f0; rotate: 90deg; }
.sw-iconbtn .sw-icon { width: 18px; height: 18px; }
.sw-icon { display: block; flex: none; }

.sw-tabs {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 24px;
  padding: 4px;
  background: var(--sw-soft);
  border-radius: 12px;
}
.sw-tab {
  position: relative;
  z-index: 1;
  height: 40px;
  padding: 0;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--sw-text) !important;
  background: none;
  border: 0;
  border-radius: 9px;
  transition: color .25s;
}
.sw-tab[aria-selected="true"] { color: var(--sw-ink) !important; }
.sw-tabs__ink {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(20, 22, 40, .1);
  transition: transform .45s var(--sw-ease), width .45s var(--sw-ease);
}

.sw-body { flex: 1; min-height: 0; padding: 22px 24px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sw-pane[hidden] { display: none; }
.sw.is-open .sw-pane > * { animation: swIn .55s var(--sw-ease) both; }
.sw-pane > :nth-child(2) { animation-delay: .05s !important; }
.sw-pane > :nth-child(3) { animation-delay: .1s !important; }
.sw-pane > :nth-child(4) { animation-delay: .15s !important; }
.sw-pane > :nth-child(5) { animation-delay: .2s !important; }
@keyframes swIn { from { opacity: 0; transform: translateY(10px); } }

.sw-foot { display: flex; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--sw-line); }
.sw-textbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  font-size: 13.5px !important;
  font-weight: 600;
  color: var(--sw-ink) !important;
  background: #fff;
  border: 1px solid var(--sw-line);
  border-radius: 10px;
  transition: border-color .2s, background-color .2s;
}
.sw-textbtn:hover { border-color: #c9ccd8; }
.sw-textbtn .sw-icon { width: 17px; height: 17px; }
.sw-textbtn--fill { flex: 1; color: #fff !important; background: var(--sw-ink); border-color: var(--sw-ink); }
.sw-textbtn--fill:hover { background: #000; border-color: #000; }

/* ==========================================================================
   4. Controls
   ========================================================================== */
.sw-group { min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
.sw-group__title {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sw-ink);
}
.sw-radio {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* colour swatches */
.sw-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sw-swatch { position: relative; display: block; }
.sw-swatch__dot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  color: #fff;
  background: var(--sw-c);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  transition: box-shadow .3s var(--sw-ease), transform .3s var(--sw-ease);
}
.sw-swatch__dot .sw-icon { width: 46%; height: 46%; transform: scale(0); transition: transform .35s var(--sw-ease); }
.sw-swatch:hover .sw-swatch__dot { transform: scale(1.08); }
.sw-swatch .sw-radio:checked + .sw-swatch__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sw-c); }
.sw-swatch .sw-radio:checked + .sw-swatch__dot .sw-icon { transform: scale(1); }
.sw-swatch .sw-radio:focus-visible + .sw-swatch__dot { outline: 2px solid var(--sw-ink); outline-offset: 6px; }
.sw-swatch--custom .sw-swatch__dot {
  background: conic-gradient(from 90deg, #ff4d4d, #ffb000, #ffe14d, #3ccf6e, #1fb5d6, #4c5bff, #b54dff, #ff4d4d);
  --sw-c: #8a8fa3;
}
.sw-swatch--custom .sw-swatch__dot .sw-icon { transform: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.sw-custom { margin-top: 14px; }
.sw-custom[hidden] { display: none; }
.sw-custom__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--sw-line);
  border-radius: 12px;
  cursor: pointer;
}
.sw-custom__field input {
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.sw-custom__field input::-webkit-color-swatch-wrapper { padding: 0; }
.sw-custom__field input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.sw-custom__field input::-moz-color-swatch { border: 0; border-radius: 8px; }
.sw-custom__field span { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sw-ink); font-variant-numeric: tabular-nums; }
.sw-note { margin: 10px 0 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; color: #8a4500; background: #fff3e3; border-radius: 10px; }
.sw-note[hidden] { display: none; }

/* option cards */
.sw-grid { display: grid; gap: 10px; }
.sw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sw-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px 8px 10px;
  background: #fff;
  border: 1px solid var(--sw-line);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .25s var(--sw-ease), transform .25s var(--sw-ease);
}
.sw-opt:hover { border-color: #c9ccd8; transform: translateY(-1px); }
.sw-opt:has(.sw-radio:checked) { border-color: var(--sw-pick); box-shadow: 0 0 0 1px var(--sw-pick), 0 8px 18px -10px rgba(var(--c-primary-rgb, 12, 0, 193), .5); }
.sw-opt:has(.sw-radio:focus-visible) { outline: 2px solid var(--sw-ink); outline-offset: 2px; }
.sw-opt__label { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--sw-ink); }
.sw-opt__note { order: 3; margin-top: -6px; font-size: 11.5px; line-height: 1.35; }
.sw-opt--font { padding: 12px; }
.sw-font { font-size: 30px; font-weight: 600; line-height: 1; color: var(--sw-ink); }
.sw-font--poppins { font-family: "Poppins", sans-serif; }
.sw-font--jakarta { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; }
.sw-font--grotesk { font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.sw-font--editorial { font-family: "Fraunces", serif; font-weight: 600; }

/* corner previews */
.sw-opt--radius { align-items: center; text-align: center; }
.sw-corner { display: grid; place-items: center; width: 100%; height: 44px; background: var(--sw-soft); border-radius: 8px; }
.sw-corner i {
  position: relative;
  display: block;
  width: 34px;
  height: 26px;
  background: #fff;
  border: 1.5px solid var(--sw-ink);
}
.sw-corner i::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 14px;
  height: 6px;
  background: var(--sw-pick);
}
.sw-corner--default i { border-radius: 2px; }
.sw-corner--default i::after { border-radius: 9px; }
.sw-corner--soft i { border-radius: 6px; }
.sw-corner--soft i::after { border-radius: 2px; }
.sw-corner--round i { border-radius: 10px; }
.sw-corner--round i::after { border-radius: 9px; }

/* toggle rows */
.sw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -8px 0 26px;
  padding: 14px 0;
  border-top: 1px solid var(--sw-line);
  border-bottom: 1px solid var(--sw-line);
}
.sw-row__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--sw-ink); }
.sw-row__note { margin: 0; font-size: 12px; }
.sw-switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  background: #d3d6df;
  border: 0;
  border-radius: 14px;
  transition: background-color .25s;
}
.sw-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(20, 22, 40, .25);
  transition: transform .35s var(--sw-ease);
}
.sw-switch[aria-checked="true"] { background: var(--sw-pick); }
.sw-switch[aria-checked="true"] span { transform: translateX(18px); }

/* wide button under the demo cards */
.sw-wide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin-top: 18px;
  font-size: 14px !important;
  font-weight: 600;
  color: #fff !important;
  background: var(--sw-ink);
  border: 0;
  border-radius: 12px;
  transition: background-color .2s;
}
.sw-wide-btn:hover { background: #000; }
.sw-wide-btn .sw-icon { width: 18px; height: 18px; }

/* ==========================================================================
   5. Sketches – tiny wireframes of each header, footer and width
   ========================================================================== */
.sw-sk {
  position: relative;
  display: block;
  height: 50px;
  overflow: hidden;
  background: var(--sw-soft);
  border-radius: 8px;
}
.sw-sk i { position: absolute; display: block; }
.sw-sk--h-offcanvas, .sw-sk--h-overlay { background: linear-gradient(135deg, #c9cddb, #eef0f5 70%); }
.sw-sk--h-offcanvas i:nth-child(1) { top: 0; left: 0; width: 13px; height: 13px; background: #fff; }
.sw-sk--h-offcanvas i:nth-child(2) { top: 0; left: 13px; width: 26px; height: 13px; background: var(--sw-pick); }
.sw-sk--h-offcanvas i:nth-child(3) { top: 5px; right: 7px; width: 14px; height: 4px; background: #fff; border-radius: 2px; }
.sw-sk--h-boxed-light i:nth-child(1),
.sw-sk--h-boxed-dark i:nth-child(1) { inset: 0 0 auto; height: 17px; background: #fff; border-bottom: 1px solid var(--sw-line); }
.sw-sk--h-boxed-light i:nth-child(2),
.sw-sk--h-boxed-dark i:nth-child(2) { top: 0; left: 0; width: 22px; height: 17px; background: var(--sw-pick); }
.sw-sk--h-boxed-light i:nth-child(3),
.sw-sk--h-boxed-dark i:nth-child(3) { top: 8px; left: 30px; right: 8px; height: 3px; background: repeating-linear-gradient(90deg, #9aa0b4 0 7px, transparent 7px 11px); }
.sw-sk--h-boxed-dark i:nth-child(1) { background: #15161c; border-color: #15161c; }
.sw-sk--h-boxed-dark i:nth-child(3) { background: repeating-linear-gradient(90deg, #8b90a5 0 7px, transparent 7px 11px); }
.sw-sk--h-minimal i:nth-child(1) { inset: 0 0 auto; height: 13px; background: #fff; border-bottom: 1px solid var(--sw-line); }
.sw-sk--h-minimal i:nth-child(2) { top: 4px; left: 7px; width: 16px; height: 5px; background: var(--sw-ink); border-radius: 1px; }
.sw-sk--h-minimal i:nth-child(3) { top: 5px; left: 32%; right: 32%; height: 3px; background: repeating-linear-gradient(90deg, #9aa0b4 0 5px, transparent 5px 9px); }
.sw-sk--h-overlay { background: linear-gradient(135deg, #5a6078, #262938 75%); }
.sw-sk--h-overlay i:nth-child(1) { top: 5px; left: 7px; width: 16px; height: 5px; background: #fff; border-radius: 1px; }
.sw-sk--h-overlay i:nth-child(2) { top: 6px; left: 32%; right: 22%; height: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 5px, transparent 5px 9px); }
.sw-sk--h-overlay i:nth-child(3) { top: 4px; right: 7px; width: 7px; height: 7px; background: var(--sw-pick); border-radius: 50%; }

.sw-sk--f-a i:nth-child(1),
.sw-sk--f-b-light i:nth-child(1),
.sw-sk--f-b-dark i:nth-child(1),
.sw-sk--f-compact i:nth-child(1) { inset: auto 0 0; height: 26px; background: #fff; border-top: 1px solid var(--sw-line); }
.sw-sk--f-a i:nth-child(2) { bottom: 13px; left: 8px; width: 14px; height: 6px; background: var(--sw-pick); border-radius: 1px; }
.sw-sk--f-a i:nth-child(3) {
  bottom: 6px;
  left: 30px;
  right: 8px;
  height: 13px;
  background: repeating-linear-gradient(90deg, #b9bdcc 0 16px, transparent 16px 22px);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 5px);
  mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 5px);
}
.sw-sk--f-b-light i:nth-child(2),
.sw-sk--f-b-dark i:nth-child(2) { bottom: 12px; left: 8px; width: 14px; height: 6px; background: var(--sw-pick); border-radius: 1px; }
.sw-sk--f-b-light i:nth-child(3),
.sw-sk--f-b-dark i:nth-child(3) { bottom: 13px; left: 30px; right: 8px; height: 3px; background: repeating-linear-gradient(90deg, #9aa0b4 0 9px, transparent 9px 14px); }
.sw-sk--f-b-dark i:nth-child(1) { background: #15161c; border-color: #15161c; }
.sw-sk--f-compact i:nth-child(1) { height: 13px; }
.sw-sk--f-compact i:nth-child(2) { bottom: 4px; left: 8px; width: 12px; height: 5px; background: var(--sw-ink); border-radius: 1px; }
.sw-sk--f-compact i:nth-child(3) { bottom: 5px; right: 8px; width: 40%; height: 3px; background: repeating-linear-gradient(90deg, #9aa0b4 0 6px, transparent 6px 9px); }

.sw-sk--w-wide i:nth-child(1),
.sw-sk--w-boxed i:nth-child(1) { inset: 8px 8px auto; height: 10px; background: #fff; border-radius: 2px; }
.sw-sk--w-wide i:nth-child(2),
.sw-sk--w-boxed i:nth-child(2) { inset: 22px 8px 8px; background: #fff; border-radius: 2px; }
.sw-sk--w-wide i:nth-child(3),
.sw-sk--w-boxed i:nth-child(3) { top: 11px; left: 12px; width: 12px; height: 4px; background: var(--sw-pick); border-radius: 1px; }
.sw-sk--w-wide i:nth-child(1), .sw-sk--w-wide i:nth-child(2) { left: 0; right: 0; border-radius: 0; }
.sw-sk--w-wide i:nth-child(3) { left: 6px; }
.sw-sk--w-boxed { background: radial-gradient(rgba(20, 22, 40, .14) 1px, transparent 1.2px) 0 0 / 6px 6px, #e6e8ef; }
.sw-sk--w-boxed i:nth-child(1), .sw-sk--w-boxed i:nth-child(2) { left: 22%; right: 22%; box-shadow: 0 2px 6px rgba(20, 22, 40, .12); }
.sw-sk--w-boxed i:nth-child(1) { top: 6px; }
.sw-sk--w-boxed i:nth-child(3) { left: calc(22% + 4px); top: 9px; }

/* ==========================================================================
   6. Demo cards and the demo gallery
   ========================================================================== */
.sw-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 0; padding: 0; list-style: none; }
.sw-demo__link { display: block; color: var(--sw-ink); text-decoration: none; }
.sw-demo__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  background: var(--sw-soft);
  border: 1px solid var(--sw-line);
  border-radius: 10px;
  transition: border-color .25s, box-shadow .3s var(--sw-ease), transform .3s var(--sw-ease);
}
.sw-demo__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: object-position 2.8s cubic-bezier(.45, .05, .4, 1);
}
.sw-demo__link:hover .sw-demo__shot,
.sw-demo__link:focus-visible .sw-demo__shot { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(20, 22, 40, .5); }
.sw-demo__link:hover img, .sw-demo__link:focus-visible img { object-position: 50% 35%; }
.sw-demo.is-current .sw-demo__shot { border-color: var(--sw-pick); box-shadow: 0 0 0 1px var(--sw-pick); }
.sw-demo__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.sw-demo__name em {
  padding: 2px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sw-pick);
  border-radius: 20px;
}

.sw-gallery {
  position: fixed;
  inset: 0;
  z-index: 9500;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0e0f14;
  opacity: 0;
  transition: opacity .35s ease;
}
.sw-gallery[hidden] { display: none; }
.sw-gallery.is-open { opacity: 1; }
.sw-gallery__inner { max-width: 1240px; margin: 0 auto; padding: 56px 32px 80px; }
.sw-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.sw-gallery__title { margin: 0 0 6px; font-family: inherit; font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.sw-gallery__text { margin: 0; font-size: 15px; color: #a9adbd; }
.sw-iconbtn--light { width: 48px; height: 48px; color: #fff; background: rgba(255, 255, 255, .08); }
.sw-iconbtn--light:hover { background: rgba(255, 255, 255, .16); }
.sw-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; margin: 0; padding: 0; list-style: none; }
.sw-gallery.is-open .sw-demo--big { animation: swRise .7s var(--sw-ease) both; }
.sw-demo--big:nth-child(2) { animation-delay: .06s !important; }
.sw-demo--big:nth-child(3) { animation-delay: .12s !important; }
.sw-demo--big:nth-child(4) { animation-delay: .18s !important; }
.sw-demo--big:nth-child(5) { animation-delay: .24s !important; }
.sw-demo--big:nth-child(6) { animation-delay: .3s !important; }
@keyframes swRise { from { opacity: 0; transform: translateY(26px); } }
.sw-demo--big .sw-demo__link { color: #fff; }
.sw-demo--big .sw-demo__shot { aspect-ratio: 4 / 5; background: #1b1d26; border: 0; border-radius: 14px; }
.sw-demo--big .sw-demo__shot img { transition: object-position 7s cubic-bezier(.45, .05, .55, .95), transform .6s var(--sw-ease); }
.sw-demo--big .sw-demo__link:hover img,
.sw-demo--big .sw-demo__link:focus-visible img { object-position: 50% 100%; }
.sw-demo--big .sw-demo__link:hover .sw-demo__shot,
.sw-demo--big .sw-demo__link:focus-visible .sw-demo__shot { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9); }
.sw-demo--big.is-current .sw-demo__shot { box-shadow: 0 0 0 2px var(--sw-pick); }
.sw-demo--big .sw-demo__name { margin-top: 16px; font-size: 19px; }
.sw-demo__text { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: #a9adbd; }
.sw-demo__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sw-demo__tags span { padding: 3px 10px; font-size: 11.5px; color: #d4d7e2; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; }

/* ==========================================================================
   7. Small screens and reduced motion
   ========================================================================== */
@media (max-width: 991px) {
  .sw-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* phones: a round button in the bottom-left corner, clear of the text column */
  .sw-trigger {
    top: auto;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 44px;
    padding: 0 12px;
    border-radius: 22px;
    translate: 0 0;
  }
  .sw-trigger .sw-icon { width: 20px; height: 20px; }
  .sw.is-open .sw-trigger,
  html.is-preloading .sw:not(.is-open) .sw-trigger,
  body.is-locked .sw:not(.is-open) .sw-trigger,
  /* the cookie notice uses the same corner: step aside until it is answered */
  body:has(.cookie:not([hidden])) .sw:not(.is-open) .sw-trigger { translate: calc(-100% - 48px) 0; }
  .sw-panel {
    top: auto;
    right: 0;
    width: auto;
    height: min(88vh, 760px);
    height: min(88dvh, 760px);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px -20px rgba(20, 22, 40, .35);
    transform: translateY(104%);
  }
  .sw-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    background: #d3d6df;
    border-radius: 2px;
  }
  .sw-head { padding: 26px 18px 14px; }
  .sw-tabs { margin: 0 18px; }
  .sw-body { padding: 20px 18px 24px; }
  .sw-foot { padding: 12px 18px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .sw-swatches { gap: 10px; }
  .sw-gallery__inner { padding: 32px 18px 56px; }
  .sw-gallery__head { align-items: flex-start; margin-bottom: 28px; }
}
@media (max-width: 575px) {
  .sw-gallery__grid { grid-template-columns: 1fr; gap: 36px; }
  .sw-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-textbtn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw *, .sw *::before, .sw *::after { animation: none !important; transition-duration: .01ms !important; }
}
.sw-group__hint { display: none; margin: -4px 0 12px; font-size: 12px; line-height: 1.45; }
@media (max-width: 1199px) { .sw-group__hint { display: block; } }
.sw-sk--h-offcanvas i:nth-child(1) { box-shadow: inset 0 0 0 1px var(--sw-line); }

/* embedded in another page (?embed=1): no panel button, no cookie notice */
html[data-sw-embed] .sw,
html[data-sw-embed] .cookie { display: none !important; }

/* inner pages (data-scope="style"): pointer to the layout options on the main demo */
.sw-group__hint.sw-lite-note { display: block; margin: 20px 0 0; }
.sw-lite-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Pages tab: every inner page, grouped as in the site menu */
.sw-pages__intro { margin: 0 0 20px; font-size: 13px; }
.sw-count { margin-left: 4px; font-weight: 600; letter-spacing: 0; opacity: .6; }
.sw-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sw-pages a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sw-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--sw-line);
  border-radius: 10px;
  transition: border-color .2s, background-color .2s;
}
.sw-pages a:hover { border-color: #c9ccd8; background: var(--sw-soft); }
.sw-pages a[aria-current="page"] { color: #fff; background: var(--sw-ink); border-color: var(--sw-ink); }
.sw-textbtn--sm { flex: none; height: 36px; padding: 0 14px; font-size: 12.5px !important; }

/* theme previews: a page sketch in light, dark, and half and half for Auto */
.sw-opt--theme { align-items: center; text-align: center; }
.sw-mode { position: relative; display: block; width: 100%; height: 44px; overflow: hidden; background: #fff; border: 1px solid var(--sw-line); border-radius: 8px; }
.sw-mode--dark { background: #14171c; border-color: #14171c; }
.sw-mode--auto { background: linear-gradient(135deg, #fff 50%, #14171c 50%); }
.sw-mode i, .sw-mode::before { content: ""; position: absolute; left: 10px; height: 5px; border-radius: 3px; }
.sw-mode::before { top: 12px; width: 44%; background: #15161c; }
.sw-mode i { top: 23px; width: 28%; background: var(--sw-pick); }
.sw-mode--dark::before { background: #eef0f3; }
.sw-mode--auto::before { background: linear-gradient(90deg, #15161c 60%, #eef0f3 60%); }

/* hero height previews */
.sw-opt--hero { align-items: center; text-align: center; }
.sw-heroh { position: relative; display: block; width: 100%; height: 44px; overflow: hidden; background: var(--sw-soft); border-radius: 8px; }
.sw-heroh i { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: var(--sw-ink); }
.sw-heroh--full i { height: 100%; }
.sw-heroh i::after { content: ""; position: absolute; right: 10px; top: 40%; width: 34%; height: 5px; background: var(--sw-pick); border-radius: 3px; }