.w2d-explorer {
  --w2d-sheet-progress: 0;
  position: relative;
  width: 100%;
  height: min(80vh, 760px);
  min-height: 620px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 12, 16, 1);
}

/* -----------------------------------
   Map
----------------------------------- */

.w2d-explorer__map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.w2d-explorer__mapInner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 420px;
  transition: filter .22s ease, transform .22s ease, opacity .22s ease;
}

.w2d-explorer.is-sheet-dragging .w2d-explorer__mapInner {
  pointer-events: none;
}

.w2d-explorer.is-sheet-full .w2d-explorer__mapInner {
  filter: saturate(.92) brightness(.82);
}

.w2d-explorer__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, calc(var(--w2d-sheet-progress) * .14));
  pointer-events: none;
  transition: background .22s ease;
}

.w2d-explorer__mapLabel {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.w2d-explorer__mapTitle {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.w2d-explorer__mapSub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  line-height: 1.35;
}

.w2d-explorer__mockControls {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 92px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: auto;
}

.w2d-explorer.is-filter-open .w2d-explorer__mapInner {
  filter: blur(3px);
  transform: scale(1.02);
}

.w2d-explorer.is-filter-open .w2d-explorer__map::after {
  background: rgba(8, 10, 14, .18);
}

/* -----------------------------------
   Sheet
----------------------------------- */

.w2d-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  height: 34%;
  min-height: 210px;
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18,22,30,.96) 0%, rgba(10,12,16,.985) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.w2d-sheet.is-animating {
  transition:
    height .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.w2d-sheet.is-dragging {
  transition: none !important;
}

.w2d-explorer.is-sheet-half .w2d-sheet,
.w2d-explorer.is-sheet-raised .w2d-sheet {
  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.w2d-explorer.is-sheet-full .w2d-sheet {
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 34px 100px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.w2d-sheet__chrome {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 12px 14px;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.w2d-sheet__chrome:active {
  cursor: grabbing;
}

.w2d-sheet__handle {
  width: 56px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.w2d-sheet__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.w2d-eventsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.w2d-eventsList__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* -----------------------------------
   Scrollbars
----------------------------------- */

.w2d-eventsList::-webkit-scrollbar {
  width: 10px;
}

.w2d-eventsList::-webkit-scrollbar-track {
  background: transparent;
}

.w2d-eventsList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.w2d-eventsList::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.24);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* -----------------------------------
   Generic buttons
----------------------------------- */

.w2d-btn,
.w2d-btnLike,
.w2d-pillIcon,
.w2d-pillBtn,
[data-w2d-clear-selection] {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    color .18s ease;
}

.w2d-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.w2d-btn:hover,
.w2d-btn:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  outline: none;
}

.w2d-btn--primary {
  border-color: rgba(255,255,255,.22);
  background: rgba(90,130,255,.25);
}

.w2d-btn--primary:hover,
.w2d-btn--primary:focus-visible {
  background: rgba(90,130,255,.32);
  border-color: rgba(140,180,255,.34);
  outline: none;
}

/* -----------------------------------
   Responsive
----------------------------------- */

@media (max-width: 767px) {
  .w2d-explorer {
    height: min(86vh, 820px);
    min-height: 680px;
    border-radius: 16px;
  }

  .w2d-sheet {
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 38%;
    min-height: 240px;
    border-radius: 20px;
  }

  .w2d-eventsList {
    padding: 12px;
  }
}

@media (min-width: 768px) {
  .w2d-sheet {
    left: 16px;
    right: 16px;
    bottom: 16px;
    height: 32%;
    min-height: 220px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
}