/* REVIVE+ multi-set member-card selector and album-version themes. */

html[data-member-set="bangers"] {
  --set-bg: #090305;
  --set-bg-soft: #190509;
  --set-panel: rgba(27, 6, 11, .78);
  --set-panel-strong: rgba(34, 7, 13, .94);
  --set-paper: #fff6f1;
  --set-muted: #c8aeb1;
  --set-ink: #1b0508;
  --set-accent: #ff435e;
  --set-accent-2: #ffae47;
  --set-accent-3: #ff7c98;
  --set-line: rgba(255, 119, 137, .22);
  --set-glow-a: rgba(255, 45, 77, .24);
  --set-glow-b: rgba(255, 164, 58, .13);
  --set-board-a: #fff0e6;
  --set-board-b: #ff9e8e;
  --set-board-c: #8e172a;
}

html[data-member-set="challengers"] {
  --set-bg: #031014;
  --set-bg-soft: #071d25;
  --set-panel: rgba(4, 24, 31, .78);
  --set-panel-strong: rgba(5, 31, 41, .94);
  --set-paper: #effcff;
  --set-muted: #9fc1c9;
  --set-ink: #031217;
  --set-accent: #69e5ff;
  --set-accent-2: #7b8fff;
  --set-accent-3: #8dffd6;
  --set-line: rgba(105, 229, 255, .22);
  --set-glow-a: rgba(55, 209, 255, .22);
  --set-glow-b: rgba(111, 133, 255, .16);
  --set-board-a: #effcff;
  --set-board-b: #a9dce7;
  --set-board-c: #31536a;
}

html[data-member-set="spoilers"] {
  --set-bg: #0b0712;
  --set-bg-soft: #1a1027;
  --set-panel: rgba(22, 13, 34, .79);
  --set-panel-strong: rgba(28, 16, 45, .95);
  --set-paper: #fcf7ff;
  --set-muted: #bcaecc;
  --set-ink: #160c1f;
  --set-accent: #c7a6ff;
  --set-accent-2: #ff9ed8;
  --set-accent-3: #a7c7ff;
  --set-line: rgba(199, 166, 255, .24);
  --set-glow-a: rgba(171, 119, 255, .23);
  --set-glow-b: rgba(255, 126, 205, .13);
  --set-board-a: #f5efff;
  --set-board-b: #cdbce8;
  --set-board-c: #68517e;
}

html[data-member-set="loved-ive"] {
  --set-bg: #12090d;
  --set-bg-soft: #251319;
  --set-panel: rgba(34, 18, 24, .78);
  --set-panel-strong: rgba(43, 22, 29, .94);
  --set-paper: #fff9f3;
  --set-muted: #d1b8bd;
  --set-ink: #2b1118;
  --set-accent: #ffb7d2;
  --set-accent-2: #ffd488;
  --set-accent-3: #b9dbff;
  --set-line: rgba(255, 183, 210, .23);
  --set-glow-a: rgba(255, 163, 196, .2);
  --set-glow-b: rgba(255, 211, 130, .13);
  --set-board-a: #fffaf2;
  --set-board-b: #f5d9dc;
  --set-board-c: #b88791;
}

html[data-member-set] {
  --bg: var(--set-bg);
  --bg-soft: var(--set-bg-soft);
  --panel: var(--set-panel);
  --panel-strong: var(--set-panel-strong);
  --line: var(--set-line);
  --line-strong: color-mix(in srgb, var(--set-accent) 45%, transparent);
  --text: var(--set-paper);
  --muted: var(--set-muted);
  --violet: var(--set-accent);
  --pink: var(--set-accent-2);
  --blue: var(--set-accent-3);
  --success: var(--set-accent-3);
  background: var(--set-bg);
}

html[data-member-set] body {
  background:
    radial-gradient(circle at 84% 8%, var(--set-glow-a), transparent 25%),
    radial-gradient(circle at 12% 34%, var(--set-glow-b), transparent 29%),
    linear-gradient(180deg, var(--set-bg) 0%, var(--set-bg-soft) 48%, var(--set-bg) 100%);
}

html[data-member-set] ::selection {
  color: var(--set-ink);
  background: var(--set-accent);
}

html[data-member-set] .star {
  background: color-mix(in srgb, var(--set-accent) 42%, white);
}

html[data-member-set] .site-header {
  border-color: color-mix(in srgb, var(--set-accent) 20%, rgba(255,255,255,.08));
  background: color-mix(in srgb, var(--set-bg) 82%, transparent);
  box-shadow: 0 18px 68px color-mix(in srgb, var(--set-bg) 72%, transparent);
}

html[data-member-set] .site-nav a::after,
html[data-member-set] .eyebrow span:first-child {
  background: linear-gradient(90deg, var(--set-accent), var(--set-accent-2));
}

html[data-member-set] .motion-dot {
  background: var(--set-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--set-accent) 72%, transparent);
}

html[data-member-set] .button-primary {
  color: var(--set-ink);
  background: linear-gradient(112deg, var(--set-paper), var(--set-accent) 54%, var(--set-accent-2));
  box-shadow: 0 15px 42px color-mix(in srgb, var(--set-accent) 22%, transparent);
}

html[data-member-set] .button-ghost,
html[data-member-set] .text-link {
  border-color: color-mix(in srgb, var(--set-accent) 34%, rgba(255,255,255,.1));
}

html[data-member-set] .member-card {
  border-color: color-mix(in srgb, var(--set-accent) 20%, rgba(255,255,255,.07));
  background:
    radial-gradient(circle at 76% 8%, color-mix(in srgb, var(--set-accent) 10%, transparent), transparent 34%),
    var(--set-panel);
}

html[data-member-set] .member-card:hover,
html[data-member-set] .member-card:focus-within {
  border-color: color-mix(in srgb, var(--set-accent) 54%, white 8%);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--set-accent) 12%, rgba(0,0,0,.45));
}

.member-set-switcher {
  --member-set-accent: var(--set-accent, #ff8fc7);
  --member-set-secondary: var(--set-accent-2, #ffd3e7);
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(170px, .55fr) minmax(0, 1.45fr);
  gap: 10px 22px;
  align-items: center;
  margin: -20px 0 30px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--member-set-accent) 25%, rgba(255,255,255,.08));
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--member-set-accent) 20%, transparent), transparent 36%),
    radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--member-set-secondary) 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--set-bg) 76%, transparent);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px) saturate(1.15);
}

.member-set-switcher::after {
  content: "04 THEMES · 24 CARDS";
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: color-mix(in srgb, var(--member-set-accent) 25%, rgba(255,255,255,.18));
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .15em;
  pointer-events: none;
}

.member-set-switcher-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-set-switcher-copy > span {
  color: color-mix(in srgb, var(--set-muted) 70%, transparent);
  font-size: .52rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.member-set-switcher-copy > strong {
  color: var(--set-paper, white);
  font-size: clamp(1rem, 2vw, 1.38rem);
  line-height: 1;
  letter-spacing: -.025em;
}

.member-set-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.member-set-options button {
  position: relative;
  min-width: 0;
  min-height: 38px;
  padding: 8px 9px 8px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  color: color-mix(in srgb, var(--set-paper) 66%, transparent);
  background: rgba(255, 255, 255, .035);
  font: inherit;
  font-size: clamp(.48rem, .68vw, .58rem);
  font-weight: 800;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.member-set-options button::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--option-a, #ff8fc7);
  box-shadow: 0 0 10px color-mix(in srgb, var(--option-a, #ff8fc7) 65%, transparent);
}

.member-set-options button[data-member-set="bangers"] { --option-a: #ff435e; --option-b: #ffae47; }
.member-set-options button[data-member-set="challengers"] { --option-a: #69e5ff; --option-b: #7b8fff; }
.member-set-options button[data-member-set="spoilers"] { --option-a: #c7a6ff; --option-b: #ff9ed8; }
.member-set-options button[data-member-set="loved-ive"] { --option-a: #ffb7d2; --option-b: #ffd488; }

.member-set-options button:hover,
.member-set-options button:focus-visible {
  border-color: color-mix(in srgb, var(--option-a) 62%, white 10%);
  color: white;
  transform: translateY(-1px);
}

.member-set-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--option-a) 64%, white 16%);
  color: var(--set-ink, #130a11);
  background: linear-gradient(112deg, var(--set-paper, #fff7fb), var(--option-a) 62%, var(--option-b));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--option-a) 27%, transparent);
}

.member-set-options button[aria-pressed="true"]::before {
  background: var(--set-ink, #130a11);
  box-shadow: none;
}

.member-set-switcher > p {
  grid-column: 2;
  min-width: 0;
  margin: 0 90px 0 2px;
  color: color-mix(in srgb, var(--set-muted) 72%, transparent);
  font-size: .68rem;
  line-height: 1.45;
}

.member-card .member-art,
html[data-page="members"] .dossier-panel .dossier-visual::before {
  transition: background-image .2s linear, filter .3s ease, opacity .3s ease;
}

html[data-page="index"][data-member-set] {
  --rv-ink: var(--set-ink);
  --rv-paper: var(--set-paper);
  --rv-pink: var(--set-accent);
  --rv-hot: var(--set-accent);
  --rv-lilac: var(--set-accent-2);
  --rv-cyan: var(--set-accent-3);
  --rv-yellow: var(--set-accent-2);
  --rv-chrome: color-mix(in srgb, var(--set-paper) 84%, var(--set-accent));
  --rv-line: var(--set-line);
  background: var(--set-bg);
}

html[data-page="index"][data-member-set] body {
  background:
    radial-gradient(circle at 86% 8%, var(--set-glow-a), transparent 22%),
    radial-gradient(circle at 12% 31%, var(--set-glow-b), transparent 25%),
    linear-gradient(180deg, var(--set-bg) 0%, var(--set-bg-soft) 44%, var(--set-bg) 100%);
}

html[data-page="index"][data-member-set] .revive-campaign-hero::before {
  background:
    radial-gradient(circle at 75% 44%, var(--set-glow-a), transparent 19%),
    radial-gradient(circle at 72% 38%, var(--set-glow-b), transparent 32%),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, auto, 54px 54px, 54px 54px;
}

html[data-page="index"][data-member-set] .revive-campaign-title .title-revive {
  color: var(--set-ink);
  background: linear-gradient(105deg, var(--set-paper), color-mix(in srgb, var(--set-accent) 72%, white) 52%, var(--set-accent-2));
  box-shadow: 9px 9px 0 color-mix(in srgb, var(--set-accent) 25%, transparent);
}

html[data-page="index"][data-member-set] .revive-campaign-actions .button-primary,
html[data-page="index"][data-member-set] .revive-closing .button-primary {
  color: var(--set-ink);
  background: linear-gradient(112deg, var(--set-paper), var(--set-accent) 52%, var(--set-accent-2));
  box-shadow: 0 16px 44px color-mix(in srgb, var(--set-accent) 22%, transparent);
}

html[data-page="index"][data-member-set] .campaign-board {
  border-color: color-mix(in srgb, var(--set-accent) 26%, white 8%);
  background:
    radial-gradient(circle at 77% 18%, color-mix(in srgb, var(--set-accent-3) 34%, transparent), transparent 20%),
    radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--set-accent) 32%, transparent), transparent 24%),
    linear-gradient(145deg, var(--set-board-a) 0%, var(--set-board-b) 48%, var(--set-board-c) 100%);
  box-shadow: 0 48px 130px color-mix(in srgb, var(--set-accent) 12%, rgba(0,0,0,.56));
}

html[data-page="index"][data-member-set] .campaign-board::after {
  content: attr(data-theme-label);
}

html[data-page="index"][data-member-set] .campaign-photo {
  border-color: color-mix(in srgb, var(--set-ink) 20%, transparent);
  background: color-mix(in srgb, var(--set-board-a) 78%, var(--set-board-b));
  box-shadow: 0 15px 34px color-mix(in srgb, var(--set-ink) 20%, transparent);
}

html[data-page="index"][data-member-set] .campaign-photo figcaption {
  color: var(--set-ink);
  background: color-mix(in srgb, var(--set-paper) 88%, transparent);
}

html[data-page="index"][data-member-set] .campaign-sticker {
  border-color: color-mix(in srgb, var(--set-accent) 45%, white 18%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--set-accent) 15%, transparent);
}

html[data-page="index"][data-member-set] .revive-status-strip,
html[data-page="index"][data-member-set] .revive-story,
html[data-page="index"][data-member-set] .concept-card,
html[data-page="index"][data-member-set] .revive-portal-card,
html[data-page="index"][data-member-set] .revive-closing {
  border-color: color-mix(in srgb, var(--set-accent) 18%, rgba(255,255,255,.08));
}

html[data-page="index"][data-member-set] .revive-status-strip,
html[data-page="index"][data-member-set] .revive-story,
html[data-page="index"][data-member-set] .revive-portal-card {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--set-accent) 8%, transparent), transparent 35%),
    color-mix(in srgb, var(--set-panel) 82%, transparent);
}

html[data-page="index"][data-member-set] .revive-portal-card:hover,
html[data-page="index"][data-member-set] .revive-portal-card:focus-visible {
  border-color: color-mix(in srgb, var(--set-accent) 50%, white 8%);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--set-accent) 11%, rgba(0,0,0,.4));
}

html[data-page="members"] .member-set-switcher {
  margin-top: -18px;
}

html[data-page="members"] .section-heading > p strong {
  color: var(--set-paper, white);
  font-weight: 750;
}

html[data-page="members"][data-member-set] .dossier-panel {
  border-color: color-mix(in srgb, var(--set-accent) 21%, rgba(255,255,255,.07));
  background:
    radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--set-accent) 12%, transparent), transparent 34%),
    linear-gradient(145deg, var(--set-panel-strong), color-mix(in srgb, var(--set-bg) 96%, black));
}

html[data-page="members"][data-member-set] .dossier-panel .dossier-visual {
  background:
    radial-gradient(circle at 46% 25%, color-mix(in srgb, var(--set-accent) 18%, transparent), transparent 38%),
    linear-gradient(180deg, var(--set-panel-strong), var(--set-bg));
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .38),
    inset 0 0 0 1px color-mix(in srgb, var(--set-accent) 12%, rgba(255,255,255,.04));
}

html[data-page="members"][data-member-set] .dossier-panel .dossier-visual::before {
  background-color: var(--set-bg);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, .34),
    0 0 38px color-mix(in srgb, var(--set-accent) 12%, transparent);
}

html[data-page="members"][data-member-set] .dossier-panel .dossier-visual::after {
  background:
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--set-bg) 10%, transparent) 72%, color-mix(in srgb, var(--set-bg) 78%, transparent) 100%),
    linear-gradient(120deg, rgba(255, 255, 255, .025), transparent 45%, color-mix(in srgb, var(--set-accent) 8%, transparent));
}

html[data-page="members"][data-member-set] .dossier-panel .dossier-visual > span::before {
  background: linear-gradient(90deg, var(--set-accent), transparent);
}

html[data-page="members"][data-member-set] .dossier-panel .dossier-copy {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--set-bg) 96%, transparent), color-mix(in srgb, var(--set-panel) 82%, transparent) 32%, color-mix(in srgb, var(--set-bg) 24%, transparent) 100%);
}

html[data-page="members"][data-member-set] .dossier-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--set-accent) 48%, white 8%);
  background: linear-gradient(112deg, color-mix(in srgb, var(--set-accent) 16%, transparent), rgba(255,255,255,.04));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--set-accent) 11%, transparent);
}

@media (max-width: 900px) {
  .member-set-switcher {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: -8px;
  }

  .member-set-switcher > p {
    grid-column: 1;
    margin-right: 92px;
  }
}

@media (max-width: 760px) {
  html[data-page="members"][data-member-set] .dossier-panel .dossier-copy {
    background: linear-gradient(180deg, color-mix(in srgb, var(--set-bg) 97%, transparent), color-mix(in srgb, var(--set-panel) 84%, transparent));
  }
}

@media (max-width: 640px) {
  .member-set-switcher {
    padding: 16px;
    border-radius: 17px;
  }

  .member-set-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-set-options button {
    min-height: 36px;
    font-size: .5rem;
  }

  .member-set-switcher > p {
    margin-right: 0;
    padding-right: 0;
  }

  .member-set-switcher::after {
    display: none;
  }
}

/* SWITCHER REDESIGN v0.12.0 START */
.member-set-switcher.member-set-switcher-top {
  width: min(calc(100% - 32px), 1280px) !important;
  margin: 10px auto 0 !important;
  grid-template-columns: minmax(150px, .46fr) minmax(430px, 1.45fr) minmax(210px, .7fr);
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border-color: color-mix(in srgb, var(--member-set-accent) 17%, rgba(255,255,255,.08));
  border-radius: 16px;
  background: linear-gradient(112deg, color-mix(in srgb, var(--set-bg) 89%, transparent), color-mix(in srgb, var(--set-panel) 86%, transparent));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .025);
  backdrop-filter: blur(20px) saturate(1.08);
}
.member-set-switcher.member-set-switcher-top::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--member-set-accent), var(--member-set-secondary));
  box-shadow: 0 0 18px color-mix(in srgb, var(--member-set-accent) 30%, transparent);
}
.member-set-switcher.member-set-switcher-top::after { display: none; }
.member-set-switcher.member-set-switcher-top .member-set-switcher-copy { gap: 2px; padding-left: 10px; }
.member-set-switcher.member-set-switcher-top .member-set-switcher-copy > span {
  color: color-mix(in srgb, var(--set-muted) 72%, transparent);
  font-size: .46rem;
  letter-spacing: .18em;
}
.member-set-switcher.member-set-switcher-top .member-set-switcher-copy > strong {
  font-size: clamp(.86rem, 1.35vw, 1.02rem);
  letter-spacing: .045em;
  text-transform: uppercase;
}
.member-set-switcher.member-set-switcher-top .member-set-options {
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.member-set-switcher.member-set-switcher-top .member-set-options button {
  min-height: 34px;
  padding: 7px 9px 7px 24px;
  border-color: transparent;
  border-radius: 9px;
  color: color-mix(in srgb, var(--set-paper) 54%, transparent);
  background: transparent;
  font-size: clamp(.48rem, .62vw, .56rem);
  letter-spacing: .085em;
  box-shadow: none;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.member-set-switcher.member-set-switcher-top .member-set-options button::before {
  left: 9px;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--option-a) 52%, transparent);
}
.member-set-switcher.member-set-switcher-top .member-set-options button:hover,
.member-set-switcher.member-set-switcher-top .member-set-options button:focus-visible {
  border-color: transparent;
  color: var(--set-paper);
  background: rgba(255, 255, 255, .045);
  transform: none;
}
.member-set-switcher.member-set-switcher-top .member-set-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--option-a) 32%, rgba(255,255,255,.07));
  color: var(--set-paper);
  background: linear-gradient(90deg, color-mix(in srgb, var(--option-a) 18%, transparent), color-mix(in srgb, var(--option-b) 8%, transparent));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--option-a) 84%, white 8%), 0 0 18px color-mix(in srgb, var(--option-a) 10%, transparent);
}
.member-set-switcher.member-set-switcher-top .member-set-options button[aria-pressed="true"]::before {
  background: var(--option-a);
  box-shadow: 0 0 10px color-mix(in srgb, var(--option-a) 66%, transparent);
}
.member-set-switcher.member-set-switcher-top > p {
  grid-column: 3;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .075);
  color: color-mix(in srgb, var(--set-muted) 68%, transparent);
  font-size: .6rem;
  line-height: 1.38;
}
html[data-page="members"] .member-set-switcher.member-set-switcher-top { margin-top: 10px !important; }
@media (max-width: 1080px) {
  .member-set-switcher.member-set-switcher-top { grid-template-columns: minmax(145px, .42fr) minmax(0, 1.58fr); }
  .member-set-switcher.member-set-switcher-top > p { display: none; }
}
@media (max-width: 760px) {
  .member-set-switcher.member-set-switcher-top { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .member-set-switcher.member-set-switcher-top .member-set-switcher-copy {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 0 8px;
  }
  .member-set-switcher.member-set-switcher-top .member-set-switcher-copy > strong { font-size: .82rem; }
}
@media (max-width: 560px) {
  .member-set-switcher.member-set-switcher-top {
    width: min(calc(100% - 20px), 1280px) !important;
    margin-top: 8px !important;
    border-radius: 14px;
  }
  .member-set-switcher.member-set-switcher-top .member-set-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-set-switcher.member-set-switcher-top .member-set-options button { min-height: 33px; }
}
/* SWITCHER REDESIGN v0.12.0 END */

/* VERSION POPUP v0.13.0 START */
.member-set-switcher-popup {
  --popup-accent: var(--set-accent, #ff8fc7);
  --popup-secondary: var(--set-accent-2, #ffd3e7);
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 160;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.member-set-dock {
  pointer-events: auto;
  width: max-content;
  max-width: 100%;
  min-height: 46px;
  margin-left: auto;
  padding: 0 14px 0 12px;
  display: grid;
  grid-template-columns: 8px auto auto auto;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--popup-accent) 24%, rgba(255,255,255,.09));
  border-radius: 999px;
  color: var(--set-paper, white);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--set-bg) 88%, transparent), color-mix(in srgb, var(--set-panel-strong) 88%, transparent));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(1.15);
  cursor: pointer;
}

.member-set-dock:hover,
.member-set-dock:focus-visible,
.member-set-switcher-popup[data-open="true"] .member-set-dock {
  border-color: color-mix(in srgb, var(--popup-accent) 52%, white 8%);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .4), 0 0 24px color-mix(in srgb, var(--popup-accent) 10%, transparent);
}

.member-set-dock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--popup-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--popup-accent) 72%, transparent);
}

.member-set-dock-label,
.member-set-dock-action {
  font-size: .52rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.member-set-dock-label { color: color-mix(in srgb, var(--set-muted) 72%, transparent); }
.member-set-dock strong { font-size: .68rem; letter-spacing: .08em; }
.member-set-dock-action { color: color-mix(in srgb, var(--popup-accent) 72%, white 10%); }

.member-set-popover {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 100%;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--popup-accent) 26%, rgba(255,255,255,.09));
  border-radius: 19px;
  color: var(--set-paper, white);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--popup-accent) 13%, transparent), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--set-panel-strong) 96%, transparent), color-mix(in srgb, var(--set-bg) 94%, transparent));
  box-shadow: 0 24px 74px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(26px) saturate(1.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.975);
  transform-origin: right bottom;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.member-set-switcher-popup[data-open="true"] .member-set-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.member-set-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.member-set-popover-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-set-popover-head span {
  color: color-mix(in srgb, var(--set-muted) 70%, transparent);
  font-size: .48rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.member-set-popover-head strong {
  font-size: 1rem;
  letter-spacing: -.02em;
}

.member-set-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  color: color-mix(in srgb, var(--set-paper) 68%, transparent);
  background: rgba(255,255,255,.035);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.member-set-close:hover,
.member-set-close:focus-visible {
  color: white;
  border-color: color-mix(in srgb, var(--popup-accent) 52%, white 8%);
}

.member-set-popover > p {
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--set-muted) 76%, transparent);
  font-size: .68rem;
  line-height: 1.45;
}

.member-set-switcher-popup .member-set-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.member-set-switcher-popup .member-set-options button {
  min-height: 52px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  color: color-mix(in srgb, var(--set-paper) 62%, transparent);
  background: rgba(255,255,255,.025);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.member-set-switcher-popup .member-set-options button::before { display: none; }
.member-set-switcher-popup .member-set-options button span { font-size: .63rem; font-weight: 850; letter-spacing: .08em; }
.member-set-switcher-popup .member-set-options button small { color: color-mix(in srgb, var(--set-muted) 60%, transparent); font-size: .48rem; letter-spacing: .1em; text-transform: uppercase; }

.member-set-switcher-popup .member-set-options button:hover,
.member-set-switcher-popup .member-set-options button:focus-visible {
  color: white;
  border-color: color-mix(in srgb, var(--option-a) 48%, white 8%);
  background: color-mix(in srgb, var(--option-a) 8%, rgba(255,255,255,.025));
  transform: translateY(-1px);
}

.member-set-switcher-popup .member-set-options button[aria-pressed="true"] {
  color: white;
  border-color: color-mix(in srgb, var(--option-a) 62%, white 12%);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--option-a) 18%, transparent), color-mix(in srgb, var(--option-b) 9%, transparent));
  box-shadow: inset 3px 0 0 var(--option-a), 0 8px 22px color-mix(in srgb, var(--option-a) 9%, transparent);
}

@media (max-width: 640px) {
  .member-set-switcher-popup {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
  }

  .member-set-dock {
    width: 100%;
    grid-template-columns: 8px auto 1fr auto;
  }

  .member-set-dock strong { justify-self: start; }
  .member-set-popover { width: 100%; transform-origin: center bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .member-set-popover,
  .member-set-switcher-popup .member-set-options button {
    transition: none;
  }
}
/* VERSION POPUP v0.13.0 END */

/* LAUNCH MODAL v0.14.0 START */
.member-set-launch-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(3, 2, 7, .7);
  backdrop-filter: blur(12px) saturate(.86);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.member-set-switcher-popup[data-launch="true"] .member-set-launch-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.member-set-switcher-popup[data-launch="true"] .member-set-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.member-set-switcher-popup[data-launch="true"] .member-set-popover {
  position: fixed;
  z-index: 2;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
  border-radius: 24px;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
}

.member-set-switcher-popup[data-launch="true"] .member-set-popover::before {
  content: "SELECT YOUR ARCHIVE THEME";
  display: block;
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--popup-accent) 72%, white 12%);
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .2em;
}

.member-set-switcher-popup[data-launch="true"] .member-set-popover-head strong {
  font-size: clamp(1.28rem, 3vw, 1.72rem);
}

.member-set-switcher-popup[data-launch="true"] .member-set-popover > p {
  max-width: 440px;
  margin-bottom: 16px;
  font-size: .74rem;
}

.member-set-switcher-popup[data-launch="true"] .member-set-close {
  display: none;
}

.member-set-switcher-popup[data-launch="true"] .member-set-options button {
  min-height: 72px;
  padding: 14px;
}

.member-set-switcher-popup[data-launch="true"] .member-set-options button span {
  font-size: .72rem;
}

.member-set-change-hint {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(278px, calc(100vw - 32px));
  min-height: 52px;
  padding: 11px 36px 11px 13px;
  border: 1px solid color-mix(in srgb, var(--popup-accent) 35%, rgba(255,255,255,.1));
  border-radius: 14px;
  color: var(--set-paper, white);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--set-panel-strong) 96%, transparent), color-mix(in srgb, var(--set-bg) 92%, transparent));
  box-shadow: 0 18px 48px rgba(0,0,0,.4), 0 0 22px color-mix(in srgb, var(--popup-accent) 9%, transparent);
  backdrop-filter: blur(20px) saturate(1.12);
  font-size: .65rem;
  line-height: 1.42;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transform-origin: right bottom;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.member-set-change-hint::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid color-mix(in srgb, var(--popup-accent) 35%, rgba(255,255,255,.1));
  border-bottom: 1px solid color-mix(in srgb, var(--popup-accent) 35%, rgba(255,255,255,.1));
  background: color-mix(in srgb, var(--set-bg) 92%, transparent);
  transform: rotate(45deg);
}

.member-set-change-hint button {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: color-mix(in srgb, var(--set-paper) 60%, transparent);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}

.member-set-switcher-popup[data-hint-visible="true"][data-open="false"][data-launch="false"] .member-set-change-hint {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

@media (max-width: 640px) {
  .member-set-switcher-popup[data-launch="true"] .member-set-popover {
    width: min(calc(100vw - 20px), 520px);
    padding: 17px;
    border-radius: 20px;
  }

  .member-set-switcher-popup[data-launch="true"] .member-set-options {
    grid-template-columns: 1fr;
  }

  .member-set-switcher-popup[data-launch="true"] .member-set-options button {
    min-height: 58px;
  }

  .member-set-change-hint {
    left: 0;
    right: 0;
    width: 100%;
    transform-origin: center bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-set-launch-backdrop,
  .member-set-change-hint {
    transition: none;
  }
}
/* LAUNCH MODAL v0.14.0 END */

/* FIRST PAINT LAUNCH GATE v0.15.0 START */
html[data-theme-launch-pending="true"],
html[data-theme-launch-pending="true"] body {
  overflow: hidden !important;
}

html[data-theme-launch-pending="true"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 165;
  background: rgba(3, 2, 7, .54);
  backdrop-filter: blur(26px) brightness(.42) saturate(.72);
  -webkit-backdrop-filter: blur(26px) brightness(.42) saturate(.72);
  pointer-events: auto;
}

html[data-theme-launch-pending="true"] body > :not(.member-set-switcher-popup) {
  pointer-events: none !important;
  user-select: none !important;
}

html[data-theme-launch-pending="true"] .member-set-switcher-popup {
  z-index: 180;
}

html[data-theme-launch-pending="true"] .member-set-switcher-popup[data-launch="true"] .member-set-launch-backdrop {
  background: rgba(3, 2, 7, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme-launch-pending="true"] .member-set-switcher-popup[data-launch="true"] .member-set-popover {
  z-index: 3;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255,255,255,.055);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-launch-pending="true"]::after {
    backdrop-filter: blur(18px) brightness(.42);
    -webkit-backdrop-filter: blur(18px) brightness(.42);
  }
}
/* FIRST PAINT LAUNCH GATE v0.15.0 END */