:root {
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0);
  padding-bottom: env(safe-area-inset-bottom,0)
}
html {
  scroll-padding-top: env(safe-area-inset-top,0px)
}
body {
  margin: 0;
  padding: 0;
  font: 14px -apple-system,BlinkMacSystemFont,sans-serif;
  background: #fff;
  color: #000
}
img {
  max-width: 100%
}
[hidden]:not([hidden=until-found i]) {
  display: none!important
}
:root {
  color-scheme: dark;
  --bg: #0c0a12;
  --bg-2: #110e19;
  --panel: #14111d;
  --panel-2: #1a1625;
  --line: #26212f;
  --line-2: #332c40;
  --text: #d9d4e2;
  --muted: #8b8597;
  --dim: #5e586b;
  --teal: #6fa6b4;
  --green: #79b892;
  --green-d: #3f6e55;
  --pink: #c46fb0;
  --pink-d: rgba(196,111,176,.35);
  --amber: #d6a85c;
  --gold: #e2b44f;
  --gold-d: rgba(226,180,79,.4);
  --red: #d4534f;
  --red-d: #7a2523;
  --serif: "Lora",Georgia,serif;
  --mono: "JetBrains Mono",ui-monospace,monospace;
  --disp: "Unbounded",sans-serif;
  --r: 10px
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
html {
  scroll-behavior: smooth;
  color-scheme: dark
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  background-image: radial-gradient(1200px 600px at 85% -10%,rgba(196,111,176,.07),transparent 60%),radial-gradient(900px 500px at -10% 40%,rgba(111,166,180,.05),transparent 60%)
}
body.lock {
  overflow: hidden
}
a {
  color: inherit;
  text-decoration: none
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}
input,
select,
textarea {
  font: inherit;
  color: inherit
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px
}
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal)
}
[hidden] {
  display: none!important
}
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px
}
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12,10,18,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line)
}
.hdr .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px
}
.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain
}
.brand b {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .12em;
  color: #f0ecf5;
  display: block;
  line-height: 1
}
.brand b i {
  font-style: normal;
  color: var(--pink)
}
.brand small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--dim);
  text-transform: uppercase
}
.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase
}
.nav a {
  padding: 8px 11px;
  border-radius: 7px;
  color: var(--muted);
  transition: .2s
}
.nav a:hover {
  color: var(--text);
  background: var(--panel)
}
.nav a.on {
  color: var(--green);
  background: rgba(121,184,146,.08)
}
.hdr-acc {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--muted)
}
.hdr-acc:hover {
  color: var(--teal);
  border-color: var(--teal)
}
.hdr-bell {
  position: relative;
  margin-left: auto
}
.nav+.hdr-bell {
  margin-left: 0
}
.hdr-bell+.hdr-acc {
  margin-left: -18px
}
.hdr-bd {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 700 9.5px/18px var(--mono);
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg)
}
.hdr-bd[hidden] {
  display: none
}
.pf-tick {
  position: relative;
  z-index: 40
}
.pf-kf .lv-ch {
  flex-wrap: wrap
}
.pf-kf-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  margin-left: auto
}
.pf-kf-seg button {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}
.pf-kf-seg button.on {
  background: rgba(111,166,180,.14);
  color: var(--teal)
}
.pf-kf-body {
  padding: 6px 16px 14px
}
.pf-kf-body .gk-kf {
  padding: 9px 4px
}
.pf-kf-more {
  display: flex;
  justify-content: center;
  padding: 0 16px 16px
}
.hdr-acc svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7
}
.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 8px
}
@media(max-width:980px) {
  .nav {
    display: none
  }
  .burger {
    display: block
  }
  .nav+.hdr-bell {
    margin-left: auto
  }
  .hdr-acc+.burger {
    margin-left: -18px
  }
  .nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg-2);
    padding: 12px 20px;
    border-bottom: 1px solid var(--line)
  }
}
.lv-sec {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 0 14px
}
.lv-sec h2 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .04em;
  color: #ece7f3
}
.lv-sec .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,var(--line-2),transparent)
}
.lv-sec .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase
}
.lv-sec .meta b {
  color: var(--teal);
  font-weight: 500
}
.lv-card {
  background: linear-gradient(180deg,var(--panel),var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  position: relative
}
.lv-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--pink);
  border-left: 1px solid var(--pink);
  border-top-left-radius: var(--r);
  pointer-events: none;
  z-index: 2
}
.lv-ch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px dashed var(--line-2)
}
.lv-ch .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,var(--line-2),transparent)
}
.lv-ch .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--dim);
  text-transform: uppercase
}
.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block
}
.tag.g {
  color: var(--green);
  border-color: var(--green-d)
}
.tag.t {
  color: var(--teal);
  border-color: rgba(111,166,180,.45)
}
.tag.a {
  color: var(--amber);
  border-color: rgba(214,168,92,.45)
}
.tag.prime {
  color: #1a1408;
  border-color: var(--gold);
  background: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 14px -4px var(--gold)
}
.nm {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase
}
.bar {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c,var(--green));
  transition: width .8s ease
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  transition: .2s;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap
}
.btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex: none
}
.btn:disabled {
  opacity: .42;
  cursor: not-allowed
}
.btn-g {
  border: 1px solid var(--green-d);
  color: var(--green);
  background: rgba(121,184,146,.07)
}
.btn-g:not(:disabled):hover {
  background: rgba(121,184,146,.14);
  border-color: var(--green)
}
.btn-t {
  border: 1px solid rgba(111,166,180,.4);
  color: var(--teal);
  background: rgba(111,166,180,.07)
}
.btn-t:not(:disabled):hover {
  background: rgba(111,166,180,.14);
  border-color: var(--teal)
}
.btn-p {
  color: #fff;
  border: 1px solid var(--pink);
  background: linear-gradient(180deg,rgba(196,111,176,.55),rgba(150,70,135,.55));
  box-shadow: 0 10px 28px -12px var(--pink)
}
.btn-p:not(:disabled):hover {
  box-shadow: 0 12px 34px -8px var(--pink)
}
.btn-ghost {
  border: 1px solid var(--line-2);
  color: var(--muted)
}
.btn-ghost:not(:disabled):hover {
  color: var(--text);
  border-color: var(--muted)
}
.btn-glass {
  border: 1px solid rgba(255,255,255,.16);
  color: #efeaf5;
  background: rgba(10,8,16,.55);
  backdrop-filter: blur(8px)
}
.btn-glass:hover {
  border-color: var(--teal);
  color: #fff
}
.btn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 10px;
  letter-spacing: .14em
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%,30px);
  opacity: 0;
  transition: .3s;
  z-index: 300;
  pointer-events: none;
  max-width: calc(100% - 32px);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: center
}
.toast.show {
  opacity: 1;
  transform: translate(-50%,0)
}
.toast.ok {
  border-color: var(--green-d);
  color: var(--green)
}
.toast.err {
  border-color: var(--red-d);
  color: #f0a5a2
}
.pf-demo {
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px dashed rgba(214,168,92,.5);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--amber);
  background: rgba(214,168,92,.05)
}
.pf-demo span {
  flex: 1;
  min-width: 220px
}
.cl-hero {
  margin-top: 26px;
  padding: 34px 34px 0;
  overflow: hidden;
  isolation: isolate
}
.cl-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg,rgba(136,186,200,.045) 0 1px,transparent 1px 56px),repeating-linear-gradient(0deg,rgba(136,186,200,.045) 0 1px,transparent 1px 56px),radial-gradient(560px 300px at 88% 10%,rgba(77,134,155,.32),transparent 65%),radial-gradient(520px 320px at 8% 100%,rgba(108,63,109,.42),transparent 65%),linear-gradient(150deg,#1d1a2b 0,#120f19 55%,#24182a 100%)
}
.cl-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)
}
.cl-hex {
  position: absolute;
  right: -40px;
  top: -30px;
  width: 360px;
  height: 360px;
  z-index: -1;
  opacity: .55;
  pointer-events: none
}
.cl-hex path {
  fill: none;
  stroke-width: 1
}
.cl-hex .h1 {
  stroke: rgba(196,111,176,.35);
  animation: hexSpin 60s linear infinite;
  transform-origin: 180px 180px
}
.cl-hex .h2 {
  stroke: rgba(111,166,180,.3);
  animation: hexSpin 90s linear infinite reverse;
  transform-origin: 180px 180px
}
.cl-hex .h3 {
  stroke: rgba(226,180,79,.18);
  stroke-dasharray: 4 7
}
@keyframes hexSpin {
  to {
    transform: rotate(360deg)
  }
}
.cl-hero h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(30px,4.6vw,50px);
  letter-spacing: .01em;
  line-height: 1.04;
  color: #f3eff8;
  margin: 12px 0 14px
}
.cl-hero h1 i {
  font-style: normal;
  color: var(--pink)
}
.cl-lead {
  max-width: 660px;
  color: #cfc9d9;
  font-size: 16.5px;
  line-height: 1.65
}
.cl-hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px
}
.cl-season {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  margin: 30px -34px 0;
  border-top: 1px dashed var(--line-2);
  background: rgba(8,6,12,.35)
}
.cl-sv {
  padding: 16px 22px;
  border-left: 1px dashed var(--line-2);
  min-width: 0
}
.cl-sv:first-child {
  border-left: 0
}
.cl-sv span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim)
}
.cl-sv b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 24px;
  color: #f0ecf5;
  margin: 3px 0 1px;
  white-space: nowrap
}
.cl-sv small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.cl-sv.ss b {
  color: var(--gold)
}
.cl-sv.ss .bar {
  margin-top: 8px;
  height: 4px
}
.cl-sv.ss .bar i {
  background: linear-gradient(90deg,var(--gold),var(--pink))
}
.cl-em {
  --c: #6fa6b4;
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,color-mix(in srgb,var(--c) 55%,#0c0a12),color-mix(in srgb,var(--c) 18%,#0c0a12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09)
}
.cl-em b {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  max-width: 92%;
  overflow: hidden;
  white-space: nowrap
}
.cl-em img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.cl-em.lg {
  width: 76px;
  height: 76px;
  border-radius: 16px
}
.cl-em.lg b {
  font-size: 16px
}
.cl-em.xl {
  width: 104px;
  height: 104px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 4px var(--panel),0 18px 40px -16px #000
}
.cl-em.xl b {
  font-size: 22px
}
.cl-em.sm {
  width: 34px;
  height: 34px;
  border-radius: 8px
}
.cl-em.sm b {
  font-size: 9px
}
.cl-mine {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  flex-wrap: wrap
}
.cl-mine .who {
  flex: 1;
  min-width: 200px
}
.cl-mine .who .label {
  color: var(--green)
}
.cl-mine h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 16px;
  color: #f0ecf5;
  margin-top: 3px
}
.cl-mine h3 small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--teal);
  margin-left: 8px;
  letter-spacing: .08em
}
.cl-mine .acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}
.cl-podium {
  display: grid;
  grid-template-columns: 1fr 1.14fr 1fr;
  gap: 14px;
  align-items: end
}
.cl-pod {
  --m: var(--gold);
  min-height: 232px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s,border-color .25s;
  text-align: left;
  width: 100%
}
.cl-pod:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb,var(--m) 50%,var(--line))
}
.cl-pod.r1 {
  min-height: 270px;
  order: 2
}
.cl-pod.r2 {
  --m: #c9cfd8;
  order: 1
}
.cl-pod.r3 {
  --m: #d08a5a;
  order: 3
}
.cl-pod .bg {
  position: absolute;
  inset: -30px;
  z-index: -2;
  background: center/cover no-repeat;
  filter: blur(26px) saturate(1.3);
  opacity: .32
}
.cl-pod::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,rgba(12,10,18,.2),rgba(12,10,18,.92) 70%),radial-gradient(260px 120px at 50% 0,color-mix(in srgb,var(--m) 22%,transparent),transparent)
}
.cl-pod .rk {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--m);
  opacity: .85;
  text-shadow: 0 0 24px color-mix(in srgb,var(--m) 50%,transparent)
}
.cl-pod .rk small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .24em;
  text-align: right;
  opacity: .8;
  margin-top: 4px
}
.cl-pod h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 18px;
  color: #f3eff8;
  line-height: 1.2;
  overflow-wrap: anywhere
}
.cl-pod .tg {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--teal)
}
.cl-pod .st {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px dashed var(--line-2)
}
.cl-pod .st b {
  color: #efeaf5;
  font-weight: 500
}
.cl-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px dashed var(--line-2)
}
.cl-q {
  flex: 1 1 240px;
  position: relative;
  display: block
}
.cl-q svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.8
}
.cl-q input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: 14.5px
}
.cl-q input:focus {
  outline: 0;
  border-color: var(--teal)
}
.cl-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}
.cl-chip {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .15s
}
.cl-chip:hover {
  color: var(--text);
  border-color: var(--muted)
}
.cl-chip.on {
  color: var(--teal);
  border-color: rgba(111,166,180,.55);
  background: rgba(111,166,180,.1)
}
.cl-chip em {
  font-style: normal;
  color: var(--dim);
  font-size: 9.5px
}
.cl-chip.on em {
  color: inherit;
  opacity: .7
}
.cl-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim)
}
.cl-sort select {
  height: 32px;
  padding: 0 28px 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238b8597' stroke-width='1.4'/%3E%3C/svg%3E") right 8px center/12px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text)
}
.cl-cols,
.cl-row {
  display: grid;
  grid-template-columns: 40px 52px minmax(0,1fr) 168px 128px 142px;
  gap: 14px;
  align-items: center;
  padding: 0 18px
}
.cl-cols {
  height: 34px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim)
}
.cl-cols span:first-child {
  text-align: center
}
.cl-row {
  --c: #6fa6b4;
  position: relative;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  transition: background .15s
}
.cl-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  transform: scaleY(.4);
  transition: .2s
}
.cl-row:hover {
  background: linear-gradient(90deg,color-mix(in srgb,var(--c) 7%,transparent),transparent 60%)
}
.cl-row:focus-visible::before,
.cl-row:hover::before {
  opacity: 1;
  transform: none
}
.cl-row:last-child {
  border-bottom: 0
}
.cl-row.me {
  background: linear-gradient(90deg,rgba(121,184,146,.07),transparent 60%)
}
.cl-rk {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dim);
  text-align: center
}
.cl-row.t1 .cl-rk {
  color: var(--gold)
}
.cl-row.t2 .cl-rk {
  color: #c9cfd8
}
.cl-row.t3 .cl-rk {
  color: #d08a5a
}
.cl-nm {
  min-width: 0
}
.cl-nm h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: #f0ecf5;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.cl-nm .sub {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px
}
.cl-tg {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--teal)
}
.cl-bd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap
}
.cl-bd svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}
.cl-bd.bst {
  color: #e7a6d8;
  border-color: rgba(196,111,176,.4);
  background: rgba(196,111,176,.07)
}
.cl-bd.ds {
  color: #a7b2f2;
  border-color: rgba(124,138,230,.4)
}
.cl-bd.mine {
  color: var(--green);
  border-color: var(--green-d)
}
.cl-bd.mo {
  display: none
}
.cl-pal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 7px 0 4px;
  border-radius: 5px;
  border: 1px solid rgba(226,180,79,.35);
  background: rgba(226,180,79,.06);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--gold)
}
.cl-pal i {
  display: flex
}
.cl-pal i u {
  width: 9px;
  height: 12px;
  display: block;
  text-decoration: none
}
.cl-pal i u:first-child {
  border-radius: 3px 0 0 3px
}
.cl-pal i u:last-child {
  border-radius: 0 3px 3px 0
}
.cl-mem .t {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px
}
.cl-mem .t b {
  color: #efeaf5;
  font-weight: 500
}
.cl-mem .bar i {
  background: linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff 0),var(--c))
}
.cl-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}
.cl-mode::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(226,180,79,.12)
}
.cl-mode.open::before {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(121,184,146,.14)
}
.cl-mode.closed::before {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(212,83,79,.14)
}
.cl-act {
  display: flex;
  justify-content: flex-end
}
.cl-act .btn {
  width: 100%
}
.cl-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em
}
.cl-more {
  display: flex;
  justify-content: center;
  padding: 14px 16px 16px;
  border-top: 1px dashed var(--line-2)
}
.cl-skel {
  height: 76px;
  border-bottom: 1px dashed var(--line);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent) 0 0/200% 100%;
  animation: skel 1.4s linear infinite
}
@keyframes skel {
  to {
    background-position: -200% 0
  }
}
.cl-skin {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: 14px
}
.cl-steps {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px
}
.cl-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start
}
.cl-step .n {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--line-2);
  color: var(--teal);
  background: rgba(111,166,180,.06)
}
.cl-step:nth-child(2) .n {
  color: var(--pink);
  background: rgba(196,111,176,.06)
}
.cl-step:nth-child(3) .n {
  color: var(--gold);
  background: rgba(226,180,79,.06)
}
.cl-step h4 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 14.5px;
  color: #efeaf5;
  letter-spacing: .02em
}
.cl-step p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 3px
}
.cl-rules {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--line-2);
  display: grid;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  line-height: 1.55
}
.cl-rules li {
  list-style: none;
  display: flex;
  gap: 10px
}
.cl-rules li::before {
  content: "◆";
  color: var(--pink);
  font-size: 8px;
  margin-top: 4px
}
.cl-skx {
  display: flex;
  flex-direction: column
}
.cl-skx .lv-ch {
  flex-wrap: wrap
}
.cl-skx-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 16px 0
}
.cl-skx-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 4px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted)
}
.cl-skx-tabs button .cl-em {
  width: 22px;
  height: 22px;
  border-radius: 6px
}
.cl-skx-tabs button .cl-em b {
  font-size: 7px
}
.cl-skx-tabs button.on {
  color: #efeaf5;
  border-color: var(--gold);
  background: rgba(226,180,79,.08)
}
.cl-skx-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1
}
.sk-stage {
  position: relative;
  aspect-ratio: 400/230;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(90deg,rgba(136,186,200,.04) 0 1px,transparent 1px 32px),repeating-linear-gradient(0deg,rgba(136,186,200,.04) 0 1px,transparent 1px 32px),radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--sk,#6fa6b4) 22%,transparent),transparent 70%),linear-gradient(180deg,#17131f,#0e0c14)
}
.sk-stage svg {
  width: 94%;
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.45))
}
.sk-stage .tl,
.sk-stage .tr {
  position: absolute;
  top: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase
}
.sk-stage .tl {
  left: 12px;
  color: rgba(220,230,236,.6)
}
.sk-stage .tr {
  right: 10px
}
.sk-stage .bl {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 13px;
  color: #f3eff8;
  text-shadow: 0 1px 8px #000
}
.sk-stage .bl small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--teal);
  letter-spacing: .1em
}
.sk-sp {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(0,0,0,.2)
}
.sk-sp button {
  height: 32px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}
.sk-sp button.on {
  background: rgba(111,166,180,.14);
  color: var(--teal)
}
.sk-sw {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}
.sk-sw span {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 9px 0 5px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted)
}
.sk-sw span i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15)
}
.sk-st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap
}
.sk-st::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor
}
.sk-st.active {
  color: var(--gold);
  border-color: rgba(226,180,79,.5);
  background: rgba(226,180,79,.08)
}
.sk-st.pending {
  color: var(--teal);
  border-color: rgba(111,166,180,.5);
  background: rgba(111,166,180,.08)
}
.sk-st.pending::before {
  animation: capPulse 1.4s ease-in-out infinite
}
.sk-st.rejected {
  color: #f0a5a2;
  border-color: var(--red-d);
  background: rgba(212,83,79,.07)
}
.sk-st.expired,
.sk-st.none {
  color: var(--dim)
}
@keyframes capPulse {
  50% {
    opacity: .35
  }
}
.sk-life {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,0,0,.18)
}
.sk-life .h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim)
}
.sk-life .h b {
  color: var(--gold);
  font-weight: 500
}
.sk-life .tk {
  position: relative;
  height: 8px;
  border-radius: 4px;
  margin: 12px 0 8px;
  background: repeating-linear-gradient(90deg,var(--line-2) 0 calc(16.666% - 2px),transparent calc(16.666% - 2px) 16.666%)
}
.sk-life .tk i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(90deg,var(--gold),var(--pink));
  box-shadow: 0 0 12px -2px var(--gold)
}
.sk-life .tk em {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12)
}
.sk-life .ms {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--dim)
}
.sk-life.exp .tk i {
  background: var(--line-2);
  box-shadow: none
}
.cl-req {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr)) auto;
  align-items: stretch
}
.cl-rq {
  padding: 18px 20px;
  border-right: 1px dashed var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 6px
}
.cl-rq .ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  color: var(--teal)
}
.cl-rq .ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7
}
.cl-rq b {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 15px;
  color: #efeaf5;
  margin-top: 6px
}
.cl-rq span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45
}
.cl-rq.ok .ic {
  color: var(--green);
  border-color: var(--green-d)
}
.cl-rq.no .ic {
  color: #f0a5a2;
  border-color: var(--red-d)
}
.cl-req .go {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 22px
}
.cl-req .go small {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .06em;
  text-align: center
}
.cl-adm .lv-ch {
  flex-wrap: wrap
}
.cl-adm-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  margin-left: auto;
  flex-wrap: wrap
}
.cl-adm-tabs button {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}
.cl-adm-tabs button b {
  font-weight: 500;
  margin-left: 4px;
  color: var(--dim)
}
.cl-adm-tabs button.on {
  background: rgba(226,180,79,.12);
  color: var(--gold)
}
.cl-adm-tabs button.on b {
  color: inherit
}
.ad-row {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 120px 150px auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px dashed var(--line)
}
.ad-row:last-child {
  border-bottom: 0
}
.ad-row h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: #efeaf5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.ad-row p {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px
}
.ad-thumb {
  width: 120px;
  aspect-ratio: 400/230;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #100d16;
  display: grid;
  place-items: center;
  overflow: hidden
}
.ad-thumb svg {
  width: 100%
}
.ad-dt {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.6
}
.ad-dt b {
  color: var(--text);
  font-weight: 500
}
dialog.cl-dlg {
  margin: auto;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  width: min(860px,calc(100% - 32px));
  max-height: min(92vh,960px);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px #000
}
dialog.cl-dlg[open] {
  display: flex;
  flex-direction: column
}
dialog.cl-dlg::backdrop {
  background: rgba(6,4,10,.78);
  backdrop-filter: blur(4px)
}
.sh-x {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 18px;
  flex: none
}
.sh-x:hover {
  color: #fff;
  border-color: var(--muted)
}
.pk-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--line-2)
}
.pk-h h3 {
  flex: 1;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em
}
dialog.pf-ask {
  width: min(420px,calc(100% - 32px))
}
.ask-b {
  padding: 20px 20px 18px;
  display: grid;
  gap: 12px
}
.ask-b h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 16px;
  color: #f2eef7;
  line-height: 1.3;
  overflow-wrap: anywhere
}
.ask-b p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5
}
.ask-b input {
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: 14.5px
}
.ask-b input:focus {
  border-color: var(--teal);
  outline: 0
}
.ask-act {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px
}
.btn-d {
  color: #fff;
  border: 1px solid var(--red);
  background: linear-gradient(180deg,rgba(212,83,79,.55),rgba(160,40,36,.55))
}
.btn-d:hover {
  box-shadow: 0 10px 26px -10px var(--red)
}
dialog.cd {
  width: min(820px,calc(100% - 32px))
}
.cd-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1
}
.cd-ban {
  --c: #6fa6b4;
  position: relative;
  height: 200px;
  flex: none;
  background: radial-gradient(500px 220px at 80% 0,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),radial-gradient(420px 220px at 0 100%,rgba(108,63,109,.45),transparent 70%),linear-gradient(150deg,#262035,#120f19)
}
.cd-ban .img {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat
}
.cd-ban::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(12,10,18,.15),transparent 40%,rgba(20,17,29,.95))
}
.cd-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(10,8,16,.6);
  backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.16)
}
.cd-rank {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(230,236,240,.75);
  display: flex;
  gap: 10px;
  align-items: center
}
.cd-rank b {
  font-family: var(--disp);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--gold)
}
.cd-id {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 18px;
  align-items: end;
  padding: 0 24px;
  margin-top: -56px;
  position: relative;
  z-index: 2
}
.cd-who h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 22px;
  color: #f4f0f8;
  line-height: 1.2;
  overflow-wrap: anywhere
}
.cd-sub {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center
}
.cd-kpi {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 18px 24px 0;
  border: 1px solid var(--line);
  border-radius: 10px
}
.cd-kpi div {
  padding: 10px 14px;
  border-left: 1px dashed var(--line)
}
.cd-kpi div:first-child {
  border-left: 0
}
.cd-kpi span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim)
}
.cd-kpi b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 17px;
  color: #efeaf5;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.cd-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 24px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none
}
.cd-tabs button {
  position: relative;
  height: 40px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px
}
.cd-tabs button b {
  font-weight: 500;
  color: var(--dim)
}
.cd-tabs button::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transition: .2s
}
.cd-tabs button.on {
  color: #efeaf5
}
.cd-tabs button.on::after {
  transform: none
}
.cd-tabs button i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold)
}
.cd-tabs button i.pending {
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal)
}
.cd-body {
  padding: 18px 24px 22px
}
.cd-txt {
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.65;
  color: #d6d0df;
  overflow-wrap: anywhere
}
.cd-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px
}
.cd-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,var(--line-2),transparent)
}
.cd-h:first-child {
  margin-top: 0
}
.cd-req {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18)
}
.cd-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .04em
}
.cd-mem {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px
}
.cd-m {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  min-width: 0;
  background: rgba(0,0,0,.12)
}
.cd-m .av {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-size: 11px;
  color: #fff;
  background: linear-gradient(145deg,#3b3350,#1d1828);
  overflow: hidden
}
.cd-m .av img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.cd-m .n {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.cd-m .r {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  flex: none
}
.cd-m .r.owner {
  color: var(--gold)
}
.cd-m .r.deputy {
  color: var(--teal)
}
.cd-mf {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap
}
.cd-sk {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 16px;
  align-items: start
}
.cd-sk .col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0
}
.cd-sk p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55
}
.cd-sk p b {
  color: var(--text);
  font-weight: 600
}
.cd-skn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}
.cd-skn h4 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17px;
  color: #f3eff8
}
.cd-msg {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5
}
.cd-msg.err {
  border-color: var(--red-d);
  color: #f0b9b6;
  background: rgba(212,83,79,.06)
}
.cd-msg small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 3px
}
.cd-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px dashed var(--line-2);
  background: rgba(8,6,12,.35);
  flex: none
}
.cd-foot .grow {
  flex: 1
}
.cd-foot .hint {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: .04em;
  flex: 1;
  min-width: 180px
}
.cd-apply {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch
}
.cd-apply textarea {
  flex: 1;
  min-height: 42px;
  height: 42px;
  max-height: 120px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: 14px;
  resize: vertical
}
.cd-apply textarea:focus {
  outline: 0;
  border-color: var(--teal)
}
dialog.wz {
  width: min(900px,calc(100% - 32px))
}
.wz-steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  list-style: none;
  border-bottom: 1px solid var(--line);
  flex: none
}
.wz-steps li {
  position: relative;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap
}
.wz-steps li::before {
  content: attr(data-s);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  font-size: 10px;
  flex: none
}
.wz-steps li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent
}
.wz-steps li.on {
  color: #efeaf5
}
.wz-steps li.on::before {
  border-color: var(--pink);
  color: var(--pink)
}
.wz-steps li.on::after {
  background: var(--pink)
}
.wz-steps li.done {
  color: var(--muted)
}
.wz-steps li.done::before {
  content: "✓";
  border-color: var(--green-d);
  color: var(--green)
}
.wz-body {
  padding: 20px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1
}
.wz-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px dashed var(--line-2);
  background: rgba(8,6,12,.35);
  flex: none;
  flex-wrap: wrap
}
.wz-foot .grow {
  flex: 1
}
.wz-err {
  font-family: var(--mono);
  font-size: 11px;
  color: #f0a5a2;
  letter-spacing: .04em
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 7px
}
.fld>span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  gap: 10px
}
.fld>span small {
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted)
}
.fld input:not([type=color]):not([type=checkbox]),
.fld textarea {
  height: 44px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: 15px;
  width: 100%
}
.fld textarea {
  height: auto;
  padding: 10px 13px;
  resize: vertical;
  min-height: 72px;
  font-size: 14.5px
}
.fld input:focus,
.fld textarea:focus {
  outline: 0;
  border-color: var(--teal)
}
.fld input.bad {
  border-color: var(--red)
}
.fld .tagin {
  font-family: var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase
}
.wz-g {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 20px;
  align-items: start
}
.wz-col {
  display: flex;
  flex-direction: column;
  gap: 16px
}
.wz-prev {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: 12px
}
.wz-prev .label {
  color: var(--dim)
}
.wz-prev .cl-row {
  padding: 10px 12px;
  grid-template-columns: 52px minmax(0,1fr);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: default
}
.wz-info {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(226,180,79,.35);
  background: rgba(226,180,79,.06);
  font-size: 14px;
  line-height: 1.55;
  color: #e6dcc4
}
.wz-info b {
  color: var(--gold)
}
.wz-tog {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 16px
}
.wz-tog input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}
.wz-tog .sw {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--line-2);
  position: relative;
  flex: none;
  transition: .2s
}
.wz-tog .sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cfc9d9;
  transition: .2s
}
.wz-tog input:checked+.sw {
  background: rgba(196,111,176,.55)
}
.wz-tog input:checked+.sw::after {
  transform: translateX(18px);
  background: #fff
}
.wz-tog b {
  font-weight: 600;
  color: #efeaf5
}
.wz-tog small {
  display: block;
  font-size: 13px;
  color: var(--muted)
}
.wz-sum {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden
}
.wz-sum div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
  align-items: center
}
.wz-sum div:last-child {
  border-bottom: 0
}
.wz-sum span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim)
}
.wz-sum b {
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere
}
.wz-chk {
  display: flex;
  flex-direction: column;
  gap: 8px
}
.wz-c {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14.5px
}
.wz-c i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  flex: none;
  border: 1px solid var(--line-2);
  color: var(--dim)
}
.wz-c.ok i {
  border-color: var(--green-d);
  color: var(--green);
  background: rgba(121,184,146,.08)
}
.wz-c.no i {
  border-color: var(--red-d);
  color: #f0a5a2;
  background: rgba(212,83,79,.08)
}
.wz-c em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted)
}
.wz-c a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px
}
.wz-c input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
  flex: none
}
.sk-ed {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 20px;
  align-items: start
}
.sk-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0
}
.sk-r {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0
}
.sk-zones {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px
}
.sk-z {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  cursor: pointer;
  min-width: 0;
  transition: .15s
}
.sk-z:hover {
  border-color: var(--muted)
}
.sk-z input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer
}
.sk-z i {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18)
}
.sk-z b {
  font-weight: 500;
  font-size: 13.5px;
  flex: 1;
  min-width: 0
}
.sk-z code {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase
}
.sk-pre {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}
.sk-pre button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 9px 0 6px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted)
}
.sk-pre button:hover {
  color: var(--text);
  border-color: var(--muted)
}
.sk-pre button span {
  display: flex
}
.sk-pre button span u {
  width: 7px;
  height: 16px;
  display: block;
  text-decoration: none
}
.sk-pre button span u:first-child {
  border-radius: 3px 0 0 3px
}
.sk-pre button span u:last-child {
  border-radius: 0 3px 3px 0
}
.sk-pats {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 6px
}
.sk-pat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 3px 4px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  transition: .15s
}
.sk-pat svg {
  width: 100%;
  max-width: 40px;
  aspect-ratio: 1;
  display: block;
  border-radius: 7px
}
.sk-pat b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  line-height: 1
}
.sk-pat:hover {
  border-color: var(--line-2);
  transform: translateY(-1px)
}
.sk-pat.on {
  border-color: var(--teal);
  background: rgba(111,166,180,.1);
  box-shadow: 0 0 0 1px var(--teal) inset
}
.sk-pat.on b {
  color: var(--teal)
}
.sk-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .04em;
  line-height: 1.5
}
.sk-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px dashed rgba(226,180,79,.45);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .04em;
  line-height: 1.5
}
.sk-lock svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  flex: none
}
@media(max-width:1000px) {
  .cl-season {
    grid-template-columns: repeat(3,minmax(0,1fr))
  }
  .cl-sv:nth-child(4) {
    border-left: 0
  }
  .cl-sv:nth-child(n+4) {
    border-top: 1px dashed var(--line-2)
  }
  .cl-sv.ss {
    grid-column: span 2
  }
  .cl-cols,
  .cl-row {
    grid-template-columns: 34px 48px minmax(0,1fr) 140px 120px
  }
  .cl-cols span:nth-child(5),
  .cl-row .cl-mode {
    display: none
  }
  .cl-req {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .cl-rq:nth-child(2) {
    border-right: 0
  }
  .cl-rq:nth-child(-n+2) {
    border-bottom: 1px dashed var(--line-2)
  }
  .cl-req .go {
    grid-column: 1/-1;
    border-top: 1px dashed var(--line-2);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap
  }
  .cl-skin {
    grid-template-columns: 1fr
  }
}
@media(max-width:760px) {
  .cl-hero {
    padding: 24px 18px 0
  }
  .cl-season {
    margin: 24px -18px 0;
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .cl-sv {
    padding: 13px 16px
  }
  .cl-sv:nth-child(n) {
    border-left: 1px dashed var(--line-2);
    border-top: 1px dashed var(--line-2)
  }
  .cl-sv:nth-child(odd) {
    border-left: 0
  }
  .cl-sv:nth-child(-n+2) {
    border-top: 0
  }
  .cl-sv.ss {
    grid-column: 1/-1;
    border-left: 0
  }
  .cl-sv b {
    font-size: 20px
  }
  .cl-hex {
    width: 240px;
    height: 240px;
    right: -70px;
    top: -50px
  }
  .cl-podium {
    grid-template-columns: 1fr;
    gap: 10px
  }
  .cl-pod,
  .cl-pod.r1 {
    min-height: 0;
    order: 0;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px
  }
  .cl-pod .cl-em.lg {
    width: 58px;
    height: 58px
  }
  .cl-pod .rk {
    position: static;
    font-size: 26px;
    order: -1;
    width: 30px
  }
  .cl-pod .rk small {
    display: none
  }
  .cl-pod .inf {
    flex: 1;
    min-width: 0
  }
  .cl-pod h3 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .cl-pod .st {
    border-top: 0;
    padding-top: 4px;
    gap: 10px;
    font-size: 10px
  }
  .cl-cols {
    display: none
  }
  .cl-row {
    grid-template-columns: 24px 44px minmax(0,1fr) auto;
    gap: 10px;
    padding: 12px 14px
  }
  .cl-row .cl-em {
    width: 44px;
    height: 44px
  }
  .cl-row .cl-mem {
    display: none
  }
  .cl-bd.mo {
    display: inline-flex
  }
  .cl-rk {
    font-size: 11px
  }
  .cl-act .btn {
    width: auto;
    padding: 0 10px
  }
  .cl-act .btn .t {
    display: none
  }
  .cl-nm h3 {
    font-size: 15px
  }
  .cl-tools {
    padding: 12px
  }
  .cl-sort {
    width: 100%
  }
  .cl-sort select {
    flex: 1
  }
  .cl-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px;
    width: calc(100% + 24px)
  }
  .cl-chip {
    flex: none
  }
  .cl-req {
    grid-template-columns: 1fr
  }
  .cl-rq {
    border-right: 0;
    border-bottom: 1px dashed var(--line-2)
  }
  .cl-req .go {
    flex-direction: column;
    align-items: stretch
  }
  .ad-row {
    grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 10px;
    padding: 12px 14px
  }
  .ad-row .ad-dt,
  .ad-row .ad-thumb {
    display: none
  }
  dialog.cl-dlg {
    margin: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0
  }
  dialog.cl-dlg[open] {
    animation: sheet .28s cubic-bezier(.2,.8,.2,1)
  }
  dialog.pf-ask {
    margin: auto;
    width: calc(100% - 28px);
    border-radius: 14px;
    border-bottom: 1px solid var(--line-2)
  }
  dialog.pf-ask[open] {
    animation: none
  }
  .ask-act .btn {
    flex: 1
  }
  .cd-ban {
    height: 150px
  }
  .cd-id {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 0 16px;
    margin-top: -50px;
    gap: 12px
  }
  .cl-em.xl {
    width: 84px;
    height: 84px
  }
  .cd-who h3 {
    font-size: 19px
  }
  .cd-kpi {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin: 14px 16px 0
  }
  .cd-kpi div:nth-child(3) {
    border-left: 0
  }
  .cd-kpi div:nth-child(n+3) {
    border-top: 1px dashed var(--line)
  }
  .cd-tabs {
    margin: 14px 16px 0
  }
  .cd-body {
    padding: 16px
  }
  .cd-mem {
    grid-template-columns: 1fr
  }
  .cd-sk {
    grid-template-columns: 1fr
  }
  .cd-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom))
  }
  .cd-foot .btn {
    flex: 1
  }
  .wz-steps li {
    padding: 10px 8px;
    justify-content: center;
    font-size: 0;
    gap: 0
  }
  .wz-steps li::before {
    font-size: 10px
  }
  .wz-steps li.on {
    font-size: 9px;
    gap: 8px
  }
  .wz-body {
    padding: 16px
  }
  .sk-ed,
  .wz-g {
    grid-template-columns: 1fr
  }
  .sk-l {
    position: static
  }
  .wz-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom))
  }
  .wz-foot .btn {
    flex: 1
  }
  .wz-foot .grow {
    display: none
  }
  .wz-err {
    flex-basis: 100%;
    order: -1
  }
}
@keyframes sheet {
  from {
    transform: translateY(100%)
  }
  to {
    transform: none
  }
}
.cl-step:nth-child(4) .n {
  color: var(--green);
  background: rgba(121,184,146,.06)
}
.sk-z {
  font: inherit;
  color: inherit;
  text-align: left;
  background: none
}
.sk-z.on {
  border-color: var(--teal);
  background: rgba(111,166,180,.08);
  box-shadow: 0 0 0 1px var(--teal) inset
}
.sk-pal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,0,0,.18)
}
.sk-pg {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
  align-items: center
}
.sk-pg>span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim)
}
.sk-pg>div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}
.sk-sw1 {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .12s,box-shadow .12s
}
.sk-sw1:hover {
  transform: translateY(-1px) scale(1.06)
}
.sk-sw1.on {
  box-shadow: 0 0 0 2px var(--panel),0 0 0 4px var(--teal)
}
.sk-rec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px
}
.sk-rl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}
.sk-rl span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 4px
}
.sk-rl span::before {
  content: "★ "
}
.sk-warn {
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid rgba(214,168,92,.45);
  background: rgba(214,168,92,.07);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--amber)
}
.sk-pre button.rec {
  border-color: rgba(226,180,79,.55);
  color: var(--gold);
  background: rgba(226,180,79,.06)
}
.sk-rar {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid rgba(154,160,166,.5);
  background: rgba(154,160,166,.08);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c3c7cc
}
.sk-sw .sk-rar {
  height: 28px
}
.cap-cl {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(154,160,166,.35);
  background: linear-gradient(135deg,rgba(154,160,166,.07),transparent 60%)
}
.cap-cl .vw {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center
}
.cap-cl .gl {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #9aa0a6;
  filter: blur(22px);
  opacity: .35
}
.cap-cl img {
  position: relative;
  width: 88%;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.55));
  animation: capFloat 4.5s ease-in-out infinite
}
.cap-cl .q {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line-2);
  color: #f2eef7
}
.cap-cl .lb {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c3c7cc
}
.cap-cl h4 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 14.5px;
  color: #f2eef7;
  margin: 3px 0 4px
}
.cap-cl p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 8px
}
.cap-cl .btn {
  align-self: flex-start
}
@keyframes capFloat {
  50% {
    transform: translateY(-5px) rotate(-2deg)
  }
}
.cl-capchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 4px;
  border-radius: 8px;
  border: 1px solid rgba(154,160,166,.45);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: #c3c7cc
}
.cl-capchip img {
  width: 24px;
  height: 24px;
  object-fit: contain
}
.cl-capchip:hover {
  border-color: #c3c7cc;
  color: #fff
}
@media(max-width:760px) {
  .sk-pg {
    grid-template-columns: 1fr;
    gap: 5px
  }
  .cap-cl {
    grid-template-columns: 72px 1fr
  }
}
.fp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: .15s
}
.fp-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}
.fp-btn:hover {
  color: var(--text);
  border-color: var(--muted)
}
.fp-btn.has {
  color: var(--teal);
  border-color: rgba(111,166,180,.55);
  background: rgba(111,166,180,.08)
}
.fp-btn.open {
  color: #efeaf5;
  border-color: var(--teal);
  background: rgba(111,166,180,.14)
}
.fp-btn b {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--teal);
  color: #0c0a12;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0
}
.fp-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 16px 22px;
  padding: 16px 18px 0;
  border-bottom: 1px dashed var(--line-2);
  background: rgba(0,0,0,.16);
  animation: fpIn .2s ease
}
@keyframes fpIn {
  from {
    opacity: 0;
    transform: translateY(-4px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.fp-g {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0
}
.fp-g.wide {
  grid-column: 1/-1
}
.fp-l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  gap: 8px
}
.fp-l small {
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted)
}
.fp-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}
.fp-o {
  --k: var(--teal);
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
  transition: .12s
}
.fp-o:hover {
  color: var(--text);
  border-color: var(--muted)
}
.fp-o.on {
  color: #fff;
  border-color: var(--k);
  background: color-mix(in srgb,var(--k) 18%,transparent)
}
.fp-o.m.on::before {
  content: "✓ ";
  color: var(--k)
}
.fp-two {
  display: flex;
  align-items: center;
  gap: 8px
}
.fp-two input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 12px;
  color-scheme: dark
}
.fp-two input:focus {
  outline: 0;
  border-color: var(--teal)
}
.fp-two span {
  color: var(--dim)
}
.fp-two em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim)
}
.fp-foot {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 0 14px;
  border-top: 1px dashed var(--line)
}
.fp-n {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted)
}
.fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px dashed var(--line-2)
}
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(111,166,180,.45);
  background: rgba(111,166,180,.07);
  font-family: var(--mono);
  font-size: 10.5px;
  color: #cfe3e8;
  white-space: nowrap
}
.fp-chip button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  line-height: 1
}
.fp-chip button:hover {
  background: rgba(255,255,255,.08);
  color: #fff
}
.fp-clear {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 6px
}
.fp-clear:hover {
  color: var(--text)
}
@media(max-width:760px) {
  .fp-panel {
    grid-template-columns: 1fr;
    padding: 14px 14px 0
  }
  .fp-foot .btn {
    flex: 1
  }
  .fp-n {
    flex-basis: 100%;
    order: -1
  }
  .fp-chips {
    padding: 10px 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none
  }
}
.ftr {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg,transparent,rgba(196,111,176,.03));
  padding-top: 40px;
  margin-top: 60px
}
.f-top {
  display: grid;
  grid-template-columns: 1.25fr .85fr .85fr 1.05fr;
  gap: 36px
}
@media(max-width:1000px) {
  .f-top {
    grid-template-columns: 1fr 1fr
  }
}
.f-about p {
  color: #cfc9d9;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 18px 0 22px
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: .2s
}
.pill:hover {
  border-color: var(--teal);
  color: #fff
}
.pill svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6
}
.f-col h4 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 400;
  margin-bottom: 22px
}
.f-col h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,var(--green-d),transparent)
}
.f-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px
}
.f-col a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #cfc9d9;
  transition: .2s
}
.f-col a:hover {
  color: #fff
}
.f-col a.cur {
  color: var(--teal)
}
.f-col a svg {
  width: 15px;
  height: 15px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.5;
  opacity: .8
}
.f-col a .ext {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim)
}
.status {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 18px;
  background: var(--panel);
  position: relative
}
.status::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--pink);
  border-left: 1px solid var(--pink);
  border-top-left-radius: var(--r)
}
.status h4 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 10px
}
.status h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2)
}
.st-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase
}
.st-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green)
}
.st-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 10.5px;
  color: var(--green)
}
.st-row.down i {
  background: var(--red)
}
.st-row.down em {
  color: var(--red)
}
.st-kpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px
}
.st-kpi>div {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 12px
}
.st-kpi span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--dim);
  text-transform: uppercase
}
.st-kpi b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
  color: var(--teal);
  margin: 2px 0 6px
}
.sp {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 9px
}
.sp u {
  display: block;
  flex: 1;
  background: var(--green-d);
  border-radius: 1px;
  text-decoration: none
}
.f-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line)
}
.f-legal a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: .2s
}
.f-legal a:hover {
  border-color: var(--pink)
}
.f-legal svg {
  width: 13px;
  height: 13px;
  stroke: var(--pink);
  fill: none;
  stroke-width: 1.6
}
.f-req {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 26px
}
.f-req div {
  display: flex;
  flex-direction: column;
  gap: 6px
}
.f-req span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal)
}
.f-req b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: #bdb7c8
}
.f-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted)
}
.f-bot .na {
  color: var(--dim)
}
.up {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  font-weight: 700
}
.up:hover {
  background: rgba(111,166,180,.1)
}
@media(max-width:640px) {
  .wrap {
    padding: 0 14px
  }
  .f-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px
  }
  .f-about,
  .status {
    grid-column: 1/-1
  }
  .f-legal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px
  }
  .f-req {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
  }
  .f-req div:nth-child(3) {
    grid-column: 1/-1;
    order: 5
  }
  .f-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    letter-spacing: .12em;
    padding-bottom: calc(26px + env(safe-area-inset-bottom))
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation: none!important;
    transition: none!important
  }
}
.cl-soon-wrap {
  position: relative
}
.cl-soon-blur {
  filter: blur(5px) saturate(.6);
  opacity: .5;
  pointer-events: none;
  user-select: none
}
.cl-soon {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  background: linear-gradient(180deg,rgba(12,10,18,.2),rgba(12,10,18,.58))
}
.cl-soon b {
  font-family: var(--disp,sans-serif);
  font-size: 26px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold,#e2b44f)
}
.cl-soon small {
  font-family: var(--mono,monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted,#8b8597)
}
.cl-soonb {
  position: relative;
  display: inline-flex
}
.cl-soonb-i {
  filter: blur(2.2px) saturate(.6);
  opacity: .5;
  pointer-events: none;
  user-select: none
}
.cl-soonb > em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  font-family: var(--mono,monospace);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold,#e2b44f);
  pointer-events: none
}