/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

body {
  background-color: var(--color-black);
  color: var(--color-light);
  font-size: 1vw;
cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg")
      2 0,
    auto;
}

a,
button {
  cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg")
      12 0,
    pointer;
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  font-size: 1.1vw;
}

.overlay {
  z-index: 2;
  background-image: linear-gradient(90deg, var(--color-neutral-900) 85%, #0000);
  justify-content: flex-start;
  
  width: 37.5em;
  
  padding-left: 2em;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.overlay-inner {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 28.125em;
  display: flex;
}

.overlay-count-row {
  grid-column-gap:0.2em;
  grid-row-gap: .2em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  font-family: PP Neue Corp, Impact, sans-serif;
  font-size: 10em;
  font-weight: 1000;
  display: flex;
}

.count-column {
  height: 1em;
  overflow: hidden;
}

.count-heading {
  width: 3ch;
  font-size: 1em;
  line-height: 1;
  margin: 0px;
}

.count-row-divider {
  background-color: var(--color-light);
  width: 2px;
  height: .75em;
  transform: rotate(15deg);
}

.overlay-nav-row {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  display: flex;
}

.button {
  background-color: #0000;
  color: #fff;
  border: 1px solid #fff3;
  border-radius: .4em;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  padding: 0;
  display: flex;
  position: relative;
  font-size: inherit;
}

.button-arrow {
  flex: none;
  width: 1em;
  height: .75em;
}

.button-arrow.next {
  transform: rotate(180deg);
}

.button-overlay {
  z-index: 2;
  position: absolute;
  inset: -1px;
}

.overlay-corner {
  border-top: 1px solid var(--color-light);
  border-left: 1px solid var(--color-light);
  border-top-left-radius: .4em;
  width: 1em;
  height: 1em;
}

.overlay-corner.top-right {
  position: absolute;
  inset: 0% 0% auto auto;
  transform: rotate(90deg);
}

.overlay-corner.bottom-left {
  position: absolute;
  inset: auto auto 0% 0%;
  transform: rotate(-90deg);
}

.overlay-corner.bottom-right {
  position: absolute;
  inset: auto 0% 0% auto;
  transform: rotate(180deg);
}

.button, .button-overlay{ transition: transform 0.475s var(--cubic-default), opacity 0.475s var(--cubic-default)}

.button:hover .button-overlay{ transform: scale(1.4); }
.overlay-nav-row:hover:has(.button:hover) .button{ opacity: 0.4; }
.button:hover{ transform: scale(0.85); opacity: 1 !important; }

.main {
  z-index: 0;
  
  
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.slider-wrap {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  
  display: flex;
}

.slider-list {
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
}

.slider-slide {
  flex: none;
  width: 42.5em;
  height: 28em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  transition: opacity .4s;
  position: relative;
}

[data-slider="slide"]{ opacity: 0.2; }
[data-slider="slide"].active { opacity: 1; } 
[data-slider="slide"].active .slide-caption{ transition-delay:0.3s;} 

.slide-inner {
  border-radius: .5em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

img{
  width:100%;
  height:100;
  object-fit: cover;
}

.slide-caption {
  z-index: 2;
  grid-column-gap: .4em;
  grid-row-gap: .4em;
  background-color: var(--color-light);
  color: var(--color-dark);
  white-space: nowrap;
  border-radius: .25em;
  justify-content: flex-start;
  align-items: center;
  padding: .4em .75em .4em .5em;
  display: flex;
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  overflow: hidden;
}

.caption-dot {
  background-color: var(--color-dark);
  border-radius: 10em;
  flex: none;
  width: .5em;
  height: .5em;
}

.caption {
  font-size: .75em;
  font-family: arial;
  margin: 0px;
}

.slide-caption{ transition: transform 0.525s var(--cubic-default), opacity 0.525s var(--cubic-default); transition-delay:0s; }

html:not(.wf-design-mode) .slide-caption{ opacity: 0; transform:translate(-25%, 0px) }
html:not(.wf-design-mode) [data-slider="slide"].active .slide-caption{ opacity: 1; transform:translate(0%, 0px) }


@font-face {
  font-family: 'PP Neue Corp';
  src: url('https://cdn.prod.website-files.com/6717aac16c9ea22eeef1e79e/6717de2d56e40b921572d2d9_PPNeueCorp-TightUltrabold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.osmo-credits {
  z-index: 999;
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4em;
  padding: 1em;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
}

.osmo-credits__p {
  pointer-events: auto;
  color: #efeeec80;
  text-align: center;
  margin: 0;
  font-family: PP Neue Montreal, Arial, sans-serif;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.3;
}

.osmo-credits__p-a {
  color: #efeeec;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.prod.website-files.com/6819ed8312518f61b84824df/6819ed8312518f61b84825ba_PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 接轨按钮样式覆盖 */
.button-container .button {
  background-color: #0000 !important;
  border: 1px solid #fff3 !important;
  border-radius: .4em !important;
  position: relative !important;
  flex: 1 !important;
  height: 4em !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-image: none !important;
  padding: 0 !important;
  transition: transform 0.475s var(--cubic-default), opacity 0.475s var(--cubic-default) !important;
}

.button-container .button span {
  z-index: 1;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
}

/* 完全移除原有的背景图片 */
.button-container .category-btn {
  background-image: none !important;
  padding: 0 !important;
}

.button-container .category-btn:nth-child(2),
.button-container .category-btn:nth-child(3) {
  background-image: none !important;
}

/* 修复覆盖样式 */
.button-container:hover .button {
  opacity: 0.4;
}

.button-container .button:hover {
  transform: scale(0.85) !important;
  opacity: 1 !important;
}

.button-container .button:hover .button-overlay {
  transform: scale(1.4);
}