/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, utilities;
@layer theme {
  :root, :host {
    --tw-color-white: #fff;
    --tw-spacing: 0.25rem;
    --tw-text-xs: 0.75rem;
    --tw-text-xs--line-height: calc(1 / 0.75);
    --tw-text-sm: 0.875rem;
    --tw-text-sm--line-height: calc(1.25 / 0.875);
    --tw-text-base: 1rem;
    --tw-text-base--line-height: calc(1.5 / 1);
    --tw-text-xl: 1.25rem;
    --tw-text-xl--line-height: calc(1.75 / 1.25);
    --tw-font-weight-medium: 500;
    --tw-font-weight-semibold: 600;
    --tw-font-weight-bold: 700;
    --tw-font-weight-extrabold: 800;
    --tw-tracking-wide: 0.025em;
    --tw-leading-tight: 1.25;
    --tw-leading-relaxed: 1.625;
    --tw-aspect-video: 16 / 9;
    --tw-color-xpp-accent: #4f7cff;
    --tw-color-xpp-accent-strong: #2459ff;
    --tw-color-xpp-accent-dark: #8fb2ff;
    --tw-color-xpp-accent-dark-strong: #bfd4ff;
    --tw-color-xpp-text: #0c1a2f;
    --tw-color-xpp-text-dark: #d7e2f2;
    --tw-color-xpp-sub: #58718f;
    --tw-color-xpp-sub-dark: #8c9eb9;
    --tw-color-xpp-thumb: #e9eef7;
    --tw-color-xpp-thumb-dark: #1b2236;
    --tw-color-glass-border: rgba(255,255,255,0.52);
    --tw-color-glass-border-dark: rgba(125,150,184,0.16);
    --tw-color-glass-border-subtle: rgba(41,89,170,0.12);
    --tw-color-glass-border-subtle-dark: rgba(112,137,170,0.12);
    --tw-color-glass-highlight: rgba(255,255,255,0.56);
    --tw-color-glass-highlight-dark: rgba(170,193,226,0.08);
    --tw-color-glass-shadow: rgba(39,86,178,0.08);
    --tw-color-glass-shadow-dark: rgba(2,8,18,0.62);
    --tw-color-glass-aurora: rgba(113,176,255,0.08);
    --tw-color-glass-aurora-dark: rgba(57,94,155,0.06);
    --tw-color-glass-btn: rgba(255,255,255,0.14);
    --tw-color-glass-btn-hover: rgba(255,255,255,0.24);
    --tw-color-glass-btn-dark: rgba(120,145,179,0.08);
    --tw-color-glass-btn-hover-dark: rgba(130,155,188,0.12);
    --tw-color-glass-pill: rgba(96,150,255,0.12);
    --tw-color-glass-pill-border: rgba(89,150,255,0.22);
    --tw-color-glass-pill-dark: rgba(87,118,163,0.18);
    --tw-color-glass-pill-border-dark: rgba(110,143,192,0.20);
    --tw-color-glow-accent: rgba(83,143,255,0.12);
    --tw-color-glow-accent-strong: rgba(83,143,255,0.22);
    --tw-color-glow-accent-dark: rgba(86,125,188,0.10);
    --tw-color-glow-accent-strong-dark: rgba(104,144,206,0.16);
    --tw-color-card-glass: rgba(255,255,255,0.12);
    --tw-color-card-glass-dark: rgba(12,19,33,0.72);
    --tw-color-card-glass-border: rgba(255,255,255,0.32);
    --tw-color-card-glass-border-dark: rgba(110,137,174,0.14);
    --tw-radius-xpp: 24px;
    --tw-radius-xpp-pill: 999px;
    --tw-animate-hero-reveal: hero-reveal 0.84s cubic-bezier(0.16, 1, 0.3, 1) both;
    --tw-animate-glass-reveal: glass-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    --tw-animate-glow-pulse: glow-pulse 3s ease-in-out infinite;
    --tw-animate-shimmer: shimmer 1.5s linear infinite;
    --tw-animate-bg-shift: bg-shift 24s ease-in-out infinite;
    --tw-animate-nav-reveal: hero-reveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
    --tw-animate-pane-reveal: hero-reveal 0.86s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
    --tw-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --tw-ease-spring-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}
@layer utilities {
  .tw\:absolute {
    position: absolute;
  }
  .tw\:relative {
    position: relative;
  }
  .tw\:inset-0 {
    inset: calc(var(--tw-spacing) * 0);
  }
  .tw\:top-1\.5 {
    top: calc(var(--tw-spacing) * 1.5);
  }
  .tw\:left-1\.5 {
    left: calc(var(--tw-spacing) * 1.5);
  }
  .tw\:z-10 {
    z-index: 10;
  }
  .tw\:m-0 {
    margin: calc(var(--tw-spacing) * 0);
  }
  .tw\:mx-auto {
    margin-inline: auto;
  }
  .tw\:my-1 {
    margin-block: calc(var(--tw-spacing) * 1);
  }
  .tw\:my-6 {
    margin-block: calc(var(--tw-spacing) * 6);
  }
  .tw\:mt-1\.5 {
    margin-top: calc(var(--tw-spacing) * 1.5);
  }
  .tw\:mb-1\.5 {
    margin-bottom: calc(var(--tw-spacing) * 1.5);
  }
  .tw\:mb-3 {
    margin-bottom: calc(var(--tw-spacing) * 3);
  }
  .tw\:mb-4 {
    margin-bottom: calc(var(--tw-spacing) * 4);
  }
  .tw\:mb-5 {
    margin-bottom: calc(var(--tw-spacing) * 5);
  }
  .tw\:mb-7 {
    margin-bottom: calc(var(--tw-spacing) * 7);
  }
  .tw\:ml-auto {
    margin-left: auto;
  }
  .tw\:block {
    display: block;
  }
  .tw\:flex {
    display: flex;
  }
  .tw\:grid {
    display: grid;
  }
  .tw\:hidden {
    display: none;
  }
  .tw\:inline-flex {
    display: inline-flex;
  }
  .tw\:aspect-video {
    aspect-ratio: var(--tw-aspect-video);
  }
  .tw\:h-3 {
    height: calc(var(--tw-spacing) * 3);
  }
  .tw\:h-4 {
    height: calc(var(--tw-spacing) * 4);
  }
  .tw\:h-full {
    height: 100%;
  }
  .tw\:min-h-0 {
    min-height: calc(var(--tw-spacing) * 0);
  }
  .tw\:min-h-\[120px\] {
    min-height: 120px;
  }
  .tw\:min-h-\[220px\] {
    min-height: 220px;
  }
  .tw\:w-\[30\%\] {
    width: 30%;
  }
  .tw\:w-\[55\%\] {
    width: 55%;
  }
  .tw\:w-\[85\%\] {
    width: 85%;
  }
  .tw\:w-full {
    width: 100%;
  }
  .tw\:max-w-\[480px\] {
    max-width: 480px;
  }
  .tw\:max-w-\[1080px\] {
    max-width: 1080px;
  }
  .tw\:min-w-0 {
    min-width: calc(var(--tw-spacing) * 0);
  }
  .tw\:flex-1 {
    flex: 1;
  }
  .tw\:flex-\[1_1_300px\] {
    flex: 1 1 300px;
  }
  .tw\:flex-shrink {
    flex-shrink: 1;
  }
  .tw\:flex-shrink-0 {
    flex-shrink: 0;
  }
  .tw\:list-none {
    list-style-type: none;
  }
  .tw\:flex-col {
    flex-direction: column;
  }
  .tw\:flex-wrap {
    flex-wrap: wrap;
  }
  .tw\:items-baseline {
    align-items: baseline;
  }
  .tw\:items-center {
    align-items: center;
  }
  .tw\:items-end {
    align-items: flex-end;
  }
  .tw\:items-start {
    align-items: flex-start;
  }
  .tw\:items-stretch {
    align-items: stretch;
  }
  .tw\:justify-between {
    justify-content: space-between;
  }
  .tw\:justify-center {
    justify-content: center;
  }
  .tw\:gap-2 {
    gap: calc(var(--tw-spacing) * 2);
  }
  .tw\:gap-2\.5 {
    gap: calc(var(--tw-spacing) * 2.5);
  }
  .tw\:gap-3 {
    gap: calc(var(--tw-spacing) * 3);
  }
  .tw\:gap-5 {
    gap: calc(var(--tw-spacing) * 5);
  }
  .tw\:gap-8 {
    gap: calc(var(--tw-spacing) * 8);
  }
  .tw\:overflow-hidden {
    overflow: hidden;
  }
  .tw\:overflow-x-auto {
    overflow-x: auto;
  }
  .tw\:rounded-\[24px\] {
    border-radius: 24px;
  }
  .tw\:rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .tw\:border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .tw\:bg-xpp-thumb {
    background-color: var(--tw-color-xpp-thumb);
  }
  .tw\:object-cover {
    object-fit: cover;
  }
  .tw\:p-0 {
    padding: calc(var(--tw-spacing) * 0);
  }
  .tw\:p-2\.5 {
    padding: calc(var(--tw-spacing) * 2.5);
  }
  .tw\:p-5 {
    padding: calc(var(--tw-spacing) * 5);
  }
  .tw\:p-6 {
    padding: calc(var(--tw-spacing) * 6);
  }
  .tw\:p-10 {
    padding: calc(var(--tw-spacing) * 10);
  }
  .tw\:px-1\.5 {
    padding-inline: calc(var(--tw-spacing) * 1.5);
  }
  .tw\:px-2\.5 {
    padding-inline: calc(var(--tw-spacing) * 2.5);
  }
  .tw\:px-3 {
    padding-inline: calc(var(--tw-spacing) * 3);
  }
  .tw\:px-4 {
    padding-inline: calc(var(--tw-spacing) * 4);
  }
  .tw\:px-5 {
    padding-inline: calc(var(--tw-spacing) * 5);
  }
  .tw\:py-0\.5 {
    padding-block: calc(var(--tw-spacing) * 0.5);
  }
  .tw\:py-1 {
    padding-block: calc(var(--tw-spacing) * 1);
  }
  .tw\:py-1\.5 {
    padding-block: calc(var(--tw-spacing) * 1.5);
  }
  .tw\:py-2 {
    padding-block: calc(var(--tw-spacing) * 2);
  }
  .tw\:py-3 {
    padding-block: calc(var(--tw-spacing) * 3);
  }
  .tw\:pt-10 {
    padding-top: calc(var(--tw-spacing) * 10);
  }
  .tw\:pb-1\.5 {
    padding-bottom: calc(var(--tw-spacing) * 1.5);
  }
  .tw\:pb-4 {
    padding-bottom: calc(var(--tw-spacing) * 4);
  }
  .tw\:pb-20 {
    padding-bottom: calc(var(--tw-spacing) * 20);
  }
  .tw\:text-center {
    text-align: center;
  }
  .tw\:text-left {
    text-align: left;
  }
  .tw\:text-base {
    font-size: var(--tw-text-base);
    line-height: var(--tw-leading, var(--tw-text-base--line-height));
  }
  .tw\:text-sm {
    font-size: var(--tw-text-sm);
    line-height: var(--tw-leading, var(--tw-text-sm--line-height));
  }
  .tw\:text-xl {
    font-size: var(--tw-text-xl);
    line-height: var(--tw-leading, var(--tw-text-xl--line-height));
  }
  .tw\:text-xs {
    font-size: var(--tw-text-xs);
    line-height: var(--tw-leading, var(--tw-text-xs--line-height));
  }
  .tw\:text-\[13px\] {
    font-size: 13px;
  }
  .tw\:text-\[clamp\(12px\,2\.2cqw\,13px\)\] {
    font-size: clamp(12px, 2.2cqw, 13px);
  }
  .tw\:text-\[clamp\(12px\,2\.5cqw\,14px\)\] {
    font-size: clamp(12px, 2.5cqw, 14px);
  }
  .tw\:text-\[clamp\(14px\,2\.6cqw\,16px\)\] {
    font-size: clamp(14px, 2.6cqw, 16px);
  }
  .tw\:text-\[clamp\(16px\,2\.8cqw\,20px\)\] {
    font-size: clamp(16px, 2.8cqw, 20px);
  }
  .tw\:text-\[clamp\(18px\,5cqw\,28px\)\] {
    font-size: clamp(18px, 5cqw, 28px);
  }
  .tw\:text-\[clamp\(28px\,4vw\,42px\)\] {
    font-size: clamp(28px, 4vw, 42px);
  }
  .tw\:leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .tw\:leading-relaxed {
    --tw-leading: var(--tw-leading-relaxed);
    line-height: var(--tw-leading-relaxed);
  }
  .tw\:leading-tight {
    --tw-leading: var(--tw-leading-tight);
    line-height: var(--tw-leading-tight);
  }
  .tw\:font-bold {
    --tw-font-weight: var(--tw-font-weight-bold);
    font-weight: var(--tw-font-weight-bold);
  }
  .tw\:font-extrabold {
    --tw-font-weight: var(--tw-font-weight-extrabold);
    font-weight: var(--tw-font-weight-extrabold);
  }
  .tw\:font-medium {
    --tw-font-weight: var(--tw-font-weight-medium);
    font-weight: var(--tw-font-weight-medium);
  }
  .tw\:font-semibold {
    --tw-font-weight: var(--tw-font-weight-semibold);
    font-weight: var(--tw-font-weight-semibold);
  }
  .tw\:tracking-wide {
    --tw-tracking: var(--tw-tracking-wide);
    letter-spacing: var(--tw-tracking-wide);
  }
  .tw\:\[overflow-wrap\:anywhere\] {
    overflow-wrap: anywhere;
  }
  .tw\:break-words {
    overflow-wrap: break-word;
  }
  .tw\:whitespace-nowrap {
    white-space: nowrap;
  }
  .tw\:text-inherit {
    color: inherit;
  }
  .tw\:text-white\/90 {
    color: var(--tw-color-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--tw-color-white) 90%, transparent);
    }
  }
  .tw\:text-xpp-sub {
    color: var(--tw-color-xpp-sub);
  }
  .tw\:text-xpp-text {
    color: var(--tw-color-xpp-text);
  }
  .tw\:uppercase {
    text-transform: uppercase;
  }
  .tw\:no-underline {
    text-decoration-line: none;
  }
  .tw\:opacity-90 {
    opacity: 90%;
  }
  .tw\:opacity-95 {
    opacity: 95%;
  }
  .tw\:hover\:text-xpp-accent {
    &:hover {
      @media (hover: hover) {
        color: var(--tw-color-xpp-accent);
      }
    }
  }
  .tw\:hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .tw\:max-sm\:w-full {
    @media (width < 40rem) {
      width: 100%;
    }
  }
  .tw\:max-sm\:flex-col {
    @media (width < 40rem) {
      flex-direction: column;
    }
  }
  .tw\:max-sm\:flex-nowrap {
    @media (width < 40rem) {
      flex-wrap: nowrap;
    }
  }
  .tw\:max-sm\:items-start {
    @media (width < 40rem) {
      align-items: flex-start;
    }
  }
  .tw\:max-sm\:justify-between {
    @media (width < 40rem) {
      justify-content: space-between;
    }
  }
  .tw\:max-sm\:justify-start {
    @media (width < 40rem) {
      justify-content: flex-start;
    }
  }
  .tw\:max-sm\:gap-6 {
    @media (width < 40rem) {
      gap: calc(var(--tw-spacing) * 6);
    }
  }
  .tw\:max-sm\:overflow-x-auto {
    @media (width < 40rem) {
      overflow-x: auto;
    }
  }
  .tw\:max-sm\:p-4 {
    @media (width < 40rem) {
      padding: calc(var(--tw-spacing) * 4);
    }
  }
  .tw\:max-sm\:p-6 {
    @media (width < 40rem) {
      padding: calc(var(--tw-spacing) * 6);
    }
  }
  .tw\:max-sm\:pb-1 {
    @media (width < 40rem) {
      padding-bottom: calc(var(--tw-spacing) * 1);
    }
  }
  .tw\:dark\:bg-xpp-thumb-dark {
    &:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
      background-color: var(--tw-color-xpp-thumb-dark);
    }
  }
  .tw\:dark\:text-xpp-sub-dark {
    &:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
      color: var(--tw-color-xpp-sub-dark);
    }
  }
  .tw\:dark\:text-xpp-text-dark {
    &:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
      color: var(--tw-color-xpp-text-dark);
    }
  }
  .tw\:dark\:hover\:text-xpp-accent-dark {
    &:where([data-bs-theme="dark"], [data-bs-theme="dark"] *) {
      &:hover {
        @media (hover: hover) {
          color: var(--tw-color-xpp-accent-dark);
        }
      }
    }
  }
}
:where([data-xpp-rankings], .xpp7-wrap), :where([data-xpp-rankings], .xpp7-wrap) *, :where([data-xpp-rankings], .xpp7-wrap)::before, :where([data-xpp-rankings], .xpp7-wrap)::after {
  box-sizing: border-box;
}
:where([data-xpp-rankings], .xpp7-wrap) button, :where([data-xpp-rankings], .xpp7-wrap) input, :where([data-xpp-rankings], .xpp7-wrap) select, :where([data-xpp-rankings], .xpp7-wrap) textarea {
  font: inherit;
  color: inherit;
}
:where([data-xpp-rankings], .xpp7-wrap) button {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
}
:where([data-xpp-rankings], .xpp7-wrap) img {
  display: block;
  max-width: 100%;
}
@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes glass-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 4px 16px var(--color-glow-accent), 0 0 0 1px rgba(93, 156, 255, 0.26);
  }
  50% {
    box-shadow: 0 10px 30px var(--color-glow-accent-strong), 0 0 0 1px rgba(93, 156, 255, 0.34);
  }
}
:where([data-bs-theme="dark"]) .animate-glow-pulse {
  --color-glow-accent: var(--color-glow-accent-dark);
  --color-glow-accent-strong: var(--color-glow-accent-strong-dark);
}
@keyframes shimmer {
  0% {
    background-position: -150% 0;
  }
  100% {
    background-position: 150% 0;
  }
}
@keyframes bg-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes orb-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -16px, 0) scale(1.04);
  }
  100% {
    transform: translate3d(-14px, 10px, 0) scale(1.08);
  }
}
@keyframes orb-drift-alt {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-12px, 18px, 0) scale(1.03);
  }
  100% {
    transform: translate3d(20px, -12px, 0) scale(1.06);
  }
}
@keyframes glass-sheen {
  0% {
    transform: translateX(-130%) rotate(8deg);
    opacity: 0;
  }
  18% {
    opacity: 0.48;
  }
  42% {
    opacity: 0.18;
  }
  100% {
    transform: translateX(130%) rotate(8deg);
    opacity: 0;
  }
}
@keyframes active-ring {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  30% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}
.xpp-glass-bg {
  background-color: var(--xpp-theme-bg);
  background: radial-gradient(circle at 16% 10%, rgba(112, 164, 236, 0.035) 0%, transparent 30%), radial-gradient(circle at 84% 18%, rgba(154, 192, 245, 0.022) 0%, transparent 26%), linear-gradient(180deg, var(--xpp-theme-bg) 0%, var(--xpp-theme-bg) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 16% 10%, rgba(112, 164, 236, 0.035) 0%, transparent 30%), radial-gradient(circle at 84% 18%, rgba(154, 192, 245, 0.022) 0%, transparent 26%), linear-gradient(180deg, color-mix(in srgb, var(--xpp-theme-bg) 99.4%, rgba(112, 164, 236, 0.012)) 0%, color-mix(in srgb, var(--xpp-theme-bg) 98.8%, rgba(112, 164, 236, 0.022)) 100% );
  }
  background-size: 180% 180%;
}
:where([data-bs-theme="dark"]) .xpp-glass-bg {
  background-color: var(--xpp-theme-bg);
  background: radial-gradient(circle at 18% 12%, rgba(70, 106, 161, 0.04) 0%, transparent 30%), radial-gradient(circle at 82% 20%, rgba(46, 72, 110, 0.03) 0%, transparent 24%), linear-gradient(180deg, var(--xpp-theme-bg) 0%, var(--xpp-theme-bg) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 18% 12%, rgba(70, 106, 161, 0.04) 0%, transparent 30%), radial-gradient(circle at 82% 20%, rgba(46, 72, 110, 0.03) 0%, transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--xpp-theme-bg) 99.2%, rgba(86, 125, 188, 0.012)) 0%, color-mix(in srgb, var(--xpp-theme-bg) 98.4%, rgba(86, 125, 188, 0.028)) 100% );
  }
  background-size: 180% 180%;
}
.xpp-glass-orbs::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle 300px at 14% 18%, rgba(112, 164, 236, 0.05) 0%, transparent 68%), radial-gradient(circle 240px at 82% 12%, rgba(147, 189, 240, 0.032) 0%, transparent 68%), radial-gradient(circle 320px at 58% 82%, rgba(110, 151, 220, 0.026) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  filter: blur(16px);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}
:where([data-bs-theme="dark"]) .xpp-glass-orbs::before {
  background: radial-gradient(circle 300px at 14% 18%, rgba(66, 98, 142, 0.04) 0%, transparent 68%), radial-gradient(circle 240px at 82% 12%, rgba(55, 82, 121, 0.026) 0%, transparent 68%), radial-gradient(circle 320px at 58% 82%, rgba(66, 94, 138, 0.022) 0%, transparent 70%);
  opacity: 0.56;
}
.xpp-glass-orbs::after {
  content: '';
  position: absolute;
  inset: 5% -8% -10% 8%;
  background: radial-gradient(circle 160px at 80% 24%, rgba(255, 255, 255, 0.06) 0%, transparent 56%), radial-gradient(circle 240px at 18% 86%, rgba(127, 178, 238, 0.04) 0%, transparent 64%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  filter: blur(28px);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}
:where([data-bs-theme="dark"]) .xpp-glass-orbs::after {
  background: radial-gradient(circle 160px at 80% 24%, rgba(123, 149, 184, 0.012) 0%, transparent 56%), radial-gradient(circle 240px at 18% 86%, rgba(72, 106, 156, 0.026) 0%, transparent 64%);
  opacity: 0.38;
}
.xpp-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}
:where([data-bs-theme="dark"]) .xpp-noise::after {
  opacity: 0.028;
  mix-blend-mode: soft-light;
}
:where( .xpp-glass-hero, .xpp-glass-pane, .xpp-glass-control-shell, .xpp-glass-tabs-shell, .xpp-glass-card, .xpp-glass-btn, .xpp-glass-pill, .xpp-glass-meta, .xpp-link-pill, .xpp-card-thumb, .xpp-status-box ) {
  border-radius: var(--radius-xpp);
}
:where( .xpp-glass-btn, .xpp-glass-pill, .xpp-glass-meta, .xpp-rank-badge, .xpp-skeleton-shimmer ) {
  border-radius: var(--radius-xpp-pill);
}
.xpp-glass-hero {
  background: var(--color-glass-bg-heavy);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--color-glass-border);
  isolation: isolate;
  box-shadow: 0 22px 55px -28px var(--color-glass-shadow), 0 12px 24px -18px rgba(255,255,255,0.55), inset 0 1px 0 rgba(255,255,255,0.75), inset 0 0 0 1px rgba(255,255,255,0.20), 0 0 0 1px rgba(255,255,255,0.18);
}
:where([data-bs-theme="dark"]) .xpp-glass-hero {
  background: var(--color-glass-bg-heavy-dark);
  backdrop-filter: blur(28px) saturate(1.14);
  -webkit-backdrop-filter: blur(28px) saturate(1.14);
  border-color: var(--color-glass-border-dark);
  box-shadow: 0 24px 60px -30px var(--color-glass-shadow-dark), 0 10px 22px -16px rgba(25, 43, 74, 0.34), inset 0 1px 0 rgba(170,193,226,0.06), inset 0 0 0 1px rgba(170,193,226,0.03), 0 0 0 1px rgba(170,193,226,0.03);
}
.xpp-glass-hero::before, .xpp-glass-pane::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05) 28%, transparent 48%), radial-gradient(circle at top right, var(--color-glass-aurora) 0%, transparent 58%);
  opacity: 0.56;
  pointer-events: none;
  z-index: 0;
}
:where([data-bs-theme="dark"]) .xpp-glass-hero::before, :where([data-bs-theme="dark"]) .xpp-glass-pane::before {
  background: linear-gradient(140deg, rgba(170,193,226,0.06), rgba(170,193,226,0.01) 28%, transparent 50%), radial-gradient(circle at top right, var(--color-glass-aurora-dark) 0%, transparent 58%);
  opacity: 0.4;
}
.xpp-glass-hero-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 18% 0%, rgba(255,255,255,0.55) 0%, transparent 42%), radial-gradient(ellipse at 72% 100%, var(--color-glow-accent) 0%, transparent 54%), linear-gradient(135deg, rgba(255,255,255,0.18), transparent 48%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
}
:where([data-bs-theme="dark"]) .xpp-glass-hero-glow::after {
  opacity: 0.18;
}
.xpp-glass-pane {
  background: var(--color-glass-bg);
  backdrop-filter: blur(24px) saturate(1.55);
  -webkit-backdrop-filter: blur(24px) saturate(1.55);
  border: 1px solid var(--color-glass-border);
  isolation: isolate;
  backface-visibility: hidden;
  box-shadow: 0 20px 44px -28px var(--color-glass-shadow), 0 10px 22px -18px rgba(255,255,255,0.38), inset 0 1px 0 rgba(255,255,255,0.66), inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 1px rgba(255,255,255,0.08);
}
[data-xpp-pane] {
  padding-top: calc(var(--tw-spacing) * 6);
}
:where([data-bs-theme="dark"]) .xpp-glass-pane {
  background: var(--color-glass-bg-dark);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border-color: var(--color-glass-border-dark);
  box-shadow: 0 22px 52px -28px var(--color-glass-shadow-dark), 0 10px 18px -16px rgba(20, 34, 58, 0.28), inset 0 1px 0 rgba(170,193,226,0.05), inset 0 0 0 1px rgba(170,193,226,0.03), 0 0 0 1px rgba(170,193,226,0.03);
}
.xpp-pane-divider {
  background-image: linear-gradient( to right, transparent, var(--color-glass-border) 20%, var(--color-glass-border) 80%, transparent );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}
:where([data-bs-theme="dark"]) .xpp-pane-divider {
  background-image: linear-gradient( to right, transparent, var(--color-glass-border-dark) 20%, var(--color-glass-border-dark) 80%, transparent );
}
.xpp-glass-meta {
  background: var(--color-glass-btn);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--color-glass-border-subtle);
  backface-visibility: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.52), 0 10px 26px -22px var(--color-glass-shadow);
}
:where([data-bs-theme="dark"]) .xpp-glass-meta {
  background: var(--color-glass-btn-dark);
  border-color: var(--color-glass-border-subtle-dark);
  box-shadow: inset 0 1px 0 rgba(170,193,226,0.06), 0 10px 26px -22px var(--color-glass-shadow-dark);
}
.xpp-glass-btn {
  border: 1px solid var(--color-glass-border-subtle);
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)), var(--color-glass-btn);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  color: var(--color-xpp-sub);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background 0.22s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.22s cubic-bezier(0.25, 1, 0.5, 1), color 0.22s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.22s cubic-bezier(0.25, 1, 0.5, 1), transform 0.22s var(--ease-spring-soft);
  outline: none;
  line-height: 1.2;
  border-radius: var(--radius-xpp-pill);
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}
:where([data-bs-theme="dark"]) .xpp-glass-btn {
  border-color: var(--color-glass-border-subtle-dark);
  background: linear-gradient(180deg, rgba(166,188,221,0.05), rgba(166,188,221,0.015)), var(--color-glass-btn-dark);
  color: var(--color-xpp-sub-dark);
}
.xpp-glass-btn::before {
  content: '';
  position: absolute;
  top: -35%;
  left: -20%;
  width: 42%;
  height: 170%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.42), transparent);
  opacity: 0;
  transform: translateX(-120%) rotate(10deg);
  pointer-events: none;
}
.xpp-glass-btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, #4f7cff 32%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-xpp-accent) 32%, transparent);
  }
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
.xpp-glass-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10)), var(--color-glass-btn-hover);
  color: var(--color-xpp-text);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 32px -24px var(--color-glow-accent), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 1px rgba(255,255,255,0.16);
  border-color: var(--color-glass-border);
}
:where([data-bs-theme="dark"]) .xpp-glass-btn:hover {
  background: linear-gradient(180deg, rgba(166,188,221,0.07), rgba(166,188,221,0.02)), var(--color-glass-btn-hover-dark);
  color: var(--color-xpp-text-dark);
  border-color: var(--color-glass-border-dark);
  box-shadow: 0 14px 28px -24px var(--color-glow-accent-dark), inset 0 1px 0 rgba(170,193,226,0.08), 0 0 0 1px rgba(170,193,226,0.05);
}
.xpp-glass-btn:hover::before {
  animation: glass-sheen 1.25s var(--ease-spring) both;
}
.xpp-glass-btn:active {
  transform: translateY(0) scale(0.975);
  transition-duration: 0.08s;
}
.xpp-glass-btn:focus-visible {
  outline: 2px solid var(--color-xpp-accent);
  outline-offset: 2px;
}
:where([data-bs-theme="dark"]) .xpp-glass-btn:focus-visible {
  outline-color: var(--color-xpp-accent-dark);
}
.xpp-glass-btn[data-active] {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)), color-mix(in srgb, #4f7cff 38%, rgba(255,255,255,0.14));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)), color-mix(in srgb, var(--color-xpp-accent) 38%, rgba(255,255,255,0.14));
  }
  color: var(--color-xpp-text);
  border-color: rgba(96, 158, 255, 0.32);
  box-shadow: 0 18px 34px -24px var(--color-glow-accent-strong), inset 0 1px 0 rgba(255,255,255,0.70), 0 0 0 1px rgba(110, 170, 255, 0.24);
}
:where([data-bs-theme="dark"]) .xpp-glass-btn[data-active] {
  background: linear-gradient(180deg, rgba(176,198,232,0.08), rgba(176,198,232,0.02)), color-mix(in srgb, #8fb2ff 16%, rgba(12,22,38,0.82));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(176,198,232,0.08), rgba(176,198,232,0.02)), color-mix(in srgb, var(--color-xpp-accent-dark) 16%, rgba(12,22,38,0.82));
  }
  color: var(--color-xpp-text-dark);
  border-color: rgba(121, 151, 197, 0.22);
  box-shadow: 0 16px 30px -24px var(--color-glow-accent-dark), inset 0 1px 0 rgba(170,193,226,0.08), 0 0 0 1px rgba(121, 151, 197, 0.12);
}
[data-nav-btn][data-just-activated]::after {
  animation: active-ring 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.xpp-glass-pill {
  color: var(--color-xpp-accent);
  background: var(--color-glass-pill);
  border: 1px solid var(--color-glass-pill-border);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 10px 24px -24px var(--color-glow-accent);
  border-radius: var(--radius-xpp-pill);
}
:where([data-bs-theme="dark"]) .xpp-glass-pill {
  color: var(--color-xpp-accent-dark);
  background: var(--color-glass-pill-dark);
  border-color: var(--color-glass-pill-border-dark);
  box-shadow: inset 0 1px 0 rgba(170,193,226,0.06), 0 12px 24px -24px var(--color-glow-accent-dark);
}
.xpp-card-container {
  container-type: inline-size;
  container-name: xppwrap;
}
.xpp-glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.07)), var(--color-card-glass);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid var(--color-card-glass-border);
  position: relative;
  isolation: isolate;
  backface-visibility: hidden;
  transform: translateZ(0);
  box-shadow: 0 18px 36px -28px var(--color-glass-shadow), 0 10px 24px -26px rgba(255,255,255,0.85), inset 0 1px 0 rgba(255,255,255,0.72);
  transition: transform 0.28s var(--ease-spring-soft), box-shadow 0.28s var(--ease-spring-soft), border-color 0.28s var(--ease-spring-soft), background 0.28s ease;
}
:where([data-bs-theme="dark"]) .xpp-glass-card {
  background: linear-gradient(180deg, rgba(166,188,221,0.05), rgba(166,188,221,0.01)), var(--color-card-glass-dark);
  backdrop-filter: blur(20px) saturate(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.04);
  border-color: var(--color-card-glass-border-dark);
  box-shadow: 0 18px 40px -28px var(--color-glass-shadow-dark), 0 10px 18px -18px rgba(24, 41, 70, 0.26), inset 0 1px 0 rgba(170,193,226,0.06);
}
.xpp-glass-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.06) 34%, transparent 56%), radial-gradient(circle at top right, rgba(126,208,255,0.18), transparent 42%);
  opacity: 0.82;
  pointer-events: none;
  z-index: 0;
}
:where([data-bs-theme="dark"]) .xpp-glass-card::before {
  background: linear-gradient(135deg, rgba(170,193,226,0.06), rgba(170,193,226,0.01) 34%, transparent 56%), radial-gradient(circle at top right, rgba(66,104,161,0.10), transparent 42%);
  opacity: 0.42;
}
.xpp-glass-card:hover {
  transform: translateY(-5px) scale(1.008);
  box-shadow: 0 26px 46px -30px var(--color-glow-accent-strong), 0 14px 30px -24px rgba(255,255,255,0.82), inset 0 1px 0 rgba(255,255,255,0.78), 0 0 0 1px rgba(255,255,255,0.20);
  border-color: var(--color-card-glass-border);
}
:where([data-bs-theme="dark"]) .xpp-glass-card:hover {
  box-shadow: 0 22px 40px -30px var(--color-glow-accent-dark), 0 12px 22px -20px rgba(34, 55, 91, 0.28), inset 0 1px 0 rgba(170,193,226,0.07), 0 0 0 1px rgba(121, 151, 197, 0.08);
  border-color: var(--color-card-glass-border-dark);
}
.xpp-rank-badge {
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14)), color-mix(in srgb, #0c1a2f 72%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14)), color-mix(in srgb, var(--color-xpp-text) 72%, transparent);
  }
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  box-shadow: 0 10px 22px -18px rgba(15,26,47,0.65), inset 0 1px 0 rgba(255,255,255,0.30);
  opacity: 0.98;
  border-radius: var(--radius-xpp-pill);
}
:where([data-bs-theme="dark"]) .xpp-rank-badge {
  background: linear-gradient(180deg, rgba(170,193,226,0.10), rgba(170,193,226,0.02)), color-mix(in srgb, #d7e2f2 72%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(170,193,226,0.10), rgba(170,193,226,0.02)), color-mix(in srgb, var(--color-xpp-text-dark) 72%, transparent);
  }
  border-color: rgba(140, 160, 190, 0.18);
}
.xpp-fallback-grad {
  background: linear-gradient(135deg, #6aa2ff, #b0c8ff);
}
:where([data-bs-theme="dark"]) .xpp-fallback-grad {
  background: linear-gradient(135deg, #2a4b8f, #5a7ce0);
}
.xpp-card-thumb {
  width: clamp(80px, 30cqw, 160px);
}
.xpp-glass-control-shell, .xpp-glass-tabs-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)), color-mix(in srgb, rgba(255,255,255,0.18) 82%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)), color-mix(in srgb, var(--color-glass-bg) 82%, transparent);
  }
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.52) 62%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-glass-border) 62%, transparent);
  }
  box-shadow: 0 18px 34px -30px var(--color-glass-shadow), inset 0 1px 0 rgba(255,255,255,0.60);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
:where([data-bs-theme="dark"]) .xpp-glass-control-shell, :where([data-bs-theme="dark"]) .xpp-glass-tabs-shell {
  background: linear-gradient(180deg, rgba(166,188,221,0.05), rgba(166,188,221,0.015)), color-mix(in srgb, rgba(11,18,31,0.58) 92%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(166,188,221,0.05), rgba(166,188,221,0.015)), color-mix(in srgb, var(--color-glass-bg-dark) 92%, transparent);
  }
  border-color: color-mix(in srgb, rgba(125,150,184,0.16) 72%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-glass-border-dark) 72%, transparent);
  }
  box-shadow: 0 18px 34px -28px var(--color-glass-shadow-dark), inset 0 1px 0 rgba(170,193,226,0.05);
}
.xpp-glass-control-shell::before, .xpp-glass-tabs-shell::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.40), transparent 46%);
  pointer-events: none;
  opacity: 0.7;
}
:where([data-bs-theme="dark"]) .xpp-glass-control-shell::before, :where([data-bs-theme="dark"]) .xpp-glass-tabs-shell::before {
  background: linear-gradient(135deg, rgba(170,193,226,0.05), transparent 48%);
}
.xpp-glass-hero > *, .xpp-glass-pane > *, .xpp-glass-card > *, .xpp-glass-control-shell > *, .xpp-glass-tabs-shell > *, .xpp-glass-meta > * {
  position: relative;
  z-index: 1;
}
[data-pane-content] {
  position: relative;
  transform: translateZ(0);
}
@container xppwrap (max-width: 420px) {
  .xpp-glass-card {
    padding: 8px;
    gap: 8px;
  }
  .xpp-card-thumb {
    width: clamp(72px, 36cqw, 128px);
    border-radius: var(--radius-xpp);
  }
  .xpp-rank-badge {
    top: 4px;
    left: 4px;
  }
}
@container xppwrap (max-width: 300px) {
  .xpp-glass-card {
    padding: 6px;
    gap: 6px;
    border-radius: var(--radius-xpp);
  }
  .xpp-card-thumb {
    width: clamp(60px, 38cqw, 100px);
  }
}
.xpp-link-pill {
  background: var(--color-glass-pill);
  border: 1px solid var(--color-glass-pill-border);
  backdrop-filter: blur(12px) saturate(1.28);
  -webkit-backdrop-filter: blur(12px) saturate(1.28);
  color: var(--color-xpp-accent-strong);
  transition: transform 0.28s var(--ease-spring-soft), background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
:where([data-bs-theme="dark"]) .xpp-link-pill {
  background: var(--color-glass-pill-dark);
  border-color: var(--color-glass-pill-border-dark);
  color: var(--color-xpp-accent-dark-strong);
}
.xpp-link-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -24px var(--color-glow-accent), inset 0 1px 0 rgba(255,255,255,0.44);
}
.xpp-skeleton-shimmer {
  background: linear-gradient(90deg, rgba(150, 150, 150, 0.05) 0%, rgba(150, 150, 150, 0.15) 50%, rgba(150, 150, 150, 0.05) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
:where([data-bs-theme="dark"]) .xpp-skeleton-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100%);
  background-size: 200% 100%;
}
.xpp-skeleton-card {
  background: color-mix(in srgb, #f7f8fb 88%, rgba(255,255,255,0.16));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-xpp-card) 88%, rgba(255,255,255,0.16));
  }
  border: 1px solid var(--color-glass-border-subtle);
  box-shadow: 0 14px 30px -28px var(--color-glass-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:where([data-bs-theme="dark"]) .xpp-skeleton-card {
  background: color-mix(in srgb, #111726 92%, rgba(17,28,49,0.3));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-xpp-card-dark) 92%, rgba(17,28,49,0.3));
  }
  border-color: var(--color-glass-border-subtle-dark);
  box-shadow: 0 16px 32px -28px var(--color-glass-shadow-dark);
}
[data-animating] .xpp-stagger-item {
  animation: none;
}
[data-animating] .xpp-stagger-item[data-staggered] {
  animation: glass-reveal 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--xpp-stagger-index, 0) * 0.035s + 0.03s);
}
[data-rankings-summary] {
  display: block;
  min-height: calc(1.6em * 4);
  transform-origin: left center;
  text-wrap: pretty;
}
[data-motion-active] {
  will-change: transform, opacity;
}
@media (max-width: 640px) {
  [data-rankings-summary] {
    min-height: calc(1.6em * 5);
  }
}
.xpp-status-box {
  border: 1px dashed var(--color-glass-border-subtle);
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10)), color-mix(in srgb, rgba(255,255,255,0.18) 88%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10)), color-mix(in srgb, var(--color-glass-bg) 88%, transparent);
  }
  color: var(--color-xpp-sub);
  border-radius: var(--radius-xpp);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.54), 0 18px 32px -30px var(--color-glass-shadow);
}
:where([data-bs-theme="dark"]) .xpp-status-box {
  background: linear-gradient(180deg, rgba(166,188,221,0.05), rgba(166,188,221,0.015)), color-mix(in srgb, rgba(11,18,31,0.58) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, rgba(166,188,221,0.05), rgba(166,188,221,0.015)), color-mix(in srgb, var(--color-glass-bg-dark) 90%, transparent);
  }
  border-color: var(--color-glass-border-subtle-dark);
  color: var(--color-xpp-sub-dark);
  box-shadow: inset 0 1px 0 rgba(170,193,226,0.05), 0 18px 32px -28px var(--color-glass-shadow-dark);
}
.xpp-breadcrumb-sep + .xpp-breadcrumb-sep::before {
  content: "/";
  color: color-mix(in srgb, #58718f 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-xpp-sub) 70%, transparent);
  }
  margin-right: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .animate-hero-reveal, .animate-glass-reveal, .animate-glow-pulse, .animate-bg-shift, .animate-nav-reveal, .animate-pane-reveal, .xpp-glass-bg, .xpp-glass-orbs::before, .xpp-glass-orbs::after, .xpp-skeleton-shimmer, [data-animating] .xpp-stagger-item[data-staggered], [data-nav-btn][data-just-activated]::after, .xpp-glass-btn:hover::before {
    animation: none !important;
  }
  .xpp-glass-card, .xpp-glass-btn, .xpp-link-pill, [data-pane-content] {
    transition-duration: 0.01ms !important;
  }
}
[data-xpp-rankings][data-motion-tier="full"] .xpp-glass-orbs::before {
  animation: orb-drift 52s ease-in-out infinite alternate;
}
[data-xpp-rankings][data-motion-tier="full"] .xpp-glass-orbs::after {
  animation: orb-drift-alt 48s ease-in-out infinite alternate;
}
[data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-orbs::before, [data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-orbs::after, [data-xpp-rankings][data-motion-tier="reduced"] .xpp-glass-orbs::before, [data-xpp-rankings][data-motion-tier="reduced"] .xpp-glass-orbs::after {
  display: none;
}
[data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-hero {
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
}
[data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-pane {
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}
[data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-card, [data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-btn, [data-xpp-rankings][data-motion-tier="lite"] .xpp-link-pill, [data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-meta, [data-xpp-rankings][data-motion-tier="lite"] .xpp-rank-badge {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-card:hover {
  transform: translateY(-2px) scale(1.003);
}
[data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-btn:hover, [data-xpp-rankings][data-motion-tier="lite"] .xpp-link-pill:hover {
  transform: translateY(-1px);
}
[data-xpp-rankings][data-motion-tier="lite"] .xpp-glass-btn:hover::before {
  animation: none;
  opacity: 0;
}
@supports not (backdrop-filter: blur(1px)) {
  .xpp-glass-hero {
    background: rgba(255, 255, 255, 0.86);
  }
  .xpp-glass-pane {
    background: rgba(255, 255, 255, 0.82);
  }
  .xpp-glass-card {
    background: color-mix(in srgb, #f7f8fb 92%, rgba(255,255,255,0.22));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-xpp-card) 92%, rgba(255,255,255,0.22));
    }
  }
  :where([data-bs-theme="dark"]) .xpp-glass-hero {
    background: rgba(18, 24, 45, 0.92);
  }
  :where([data-bs-theme="dark"]) .xpp-glass-pane {
    background: rgba(18, 24, 45, 0.90);
  }
  :where([data-bs-theme="dark"]) .xpp-glass-card {
    background: color-mix(in srgb, #111726 92%, rgba(17,28,49,0.24));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-xpp-card-dark) 92%, rgba(17,28,49,0.24));
    }
  }
}
@media (hover: none) {
  .xpp-glass-card:active {
    transform: scale(0.985);
    transition-duration: 0.1s;
  }
}
@media (max-width: 640px) {
  .xpp-glass-orbs::before, .xpp-glass-orbs::after {
    display: none;
  }
  .xpp-glass-hero {
    backdrop-filter: blur(18px) saturate(1.38);
    -webkit-backdrop-filter: blur(18px) saturate(1.38);
  }
  .xpp-glass-pane {
    backdrop-filter: blur(16px) saturate(1.34);
    -webkit-backdrop-filter: blur(16px) saturate(1.34);
  }
  [data-xpp-pane] {
    padding-top: calc(var(--tw-spacing) * 4);
  }
  .xpp-glass-card {
    backdrop-filter: blur(14px) saturate(1.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
  }
  :where([data-bs-theme="dark"]) .xpp-glass-hero, :where([data-bs-theme="dark"]) .xpp-glass-pane {
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
  }
  .xpp-glass-control-shell, .xpp-glass-tabs-shell {
    padding: 10px;
  }
}
.xpp-glass-section {
  background: var(--color-glass-bg);
  backdrop-filter: blur(20px) saturate(1.42);
  -webkit-backdrop-filter: blur(20px) saturate(1.42);
  border: 1px solid var(--color-glass-border);
  box-shadow: 0 20px 40px -30px var(--color-glass-shadow), inset 0 1px 0 rgba(255,255,255,0.62), inset 0 0 0 1px rgba(255,255,255,0.16), 0 0 0 1px rgba(255,255,255,0.08);
}
:where([data-bs-theme="dark"]) .xpp-glass-section {
  background: var(--color-glass-bg-dark);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  border-color: var(--color-glass-border-dark);
  box-shadow: 0 22px 44px -28px var(--color-glass-shadow-dark), inset 0 1px 0 rgba(170,193,226,0.05), inset 0 0 0 1px rgba(170,193,226,0.03), 0 0 0 1px rgba(170,193,226,0.03);
}
.xpp-glass-sub-card {
  border: 1px solid var(--color-glass-border-subtle);
  background: color-mix(in srgb, rgba(255,255,255,0.18) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-glass-bg) 70%, transparent);
  }
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.44), 0 18px 28px -30px var(--color-glass-shadow);
}
:where([data-bs-theme="dark"]) .xpp-glass-sub-card {
  border-color: var(--color-glass-border-subtle-dark);
  background: color-mix(in srgb, rgba(11,18,31,0.58) 72%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-glass-bg-dark) 72%, transparent);
  }
  box-shadow: inset 0 1px 0 rgba(170,193,226,0.04), 0 18px 28px -28px var(--color-glass-shadow-dark);
}
.xpp-children-above > * {
  position: relative;
  z-index: 1;
}
:root,
:host {
  --xpp-theme-bg: var(--ri-body-bg, #ededed);
  --xpp-theme-bg-rgb: var(--ri-body-bg-rgb, 237, 237, 237);
  --xpp-theme-body: var(--ri-body-color, var(--tw-color-xpp-sub));
  --xpp-theme-emphasis: var(--ri-emphasis-color, var(--tw-color-xpp-text));
  --xpp-theme-surface: var(--ri-secondary-bg, #f0f1f3);
  --xpp-theme-surface-alt: var(--ri-tertiary-bg, #f7f8f9);
  --color-xpp-accent: var(--tw-color-xpp-accent);
  --color-xpp-accent-strong: var(--tw-color-xpp-accent-strong);
  --color-xpp-accent-dark: var(--tw-color-xpp-accent-dark);
  --color-xpp-accent-dark-strong: var(--tw-color-xpp-accent-dark-strong);
  --color-xpp-text: var(--xpp-theme-emphasis, var(--tw-color-xpp-text));
  --color-xpp-text-dark: var(--ri-heading-color, var(--tw-color-xpp-text-dark));
  --color-xpp-sub: var(--xpp-theme-body, var(--tw-color-xpp-sub));
  --color-xpp-sub-dark: var(--ri-body-color, var(--tw-color-xpp-sub-dark));
  --color-xpp-card: var(--xpp-theme-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --color-xpp-card: color-mix(in srgb, var(--xpp-theme-surface) 88%, white);
  }
  --color-xpp-card-dark: var(--xpp-theme-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --color-xpp-card-dark: color-mix(in srgb, var(--xpp-theme-surface) 90%, black);
  }
  --color-xpp-thumb: var(--xpp-theme-surface-alt);
  @supports (color: color-mix(in lab, red, red)) {
    --color-xpp-thumb: color-mix(in srgb, var(--xpp-theme-surface-alt) 82%, white);
  }
  --color-xpp-thumb-dark: var(--xpp-theme-surface-alt);
  @supports (color: color-mix(in lab, red, red)) {
    --color-xpp-thumb-dark: color-mix(in srgb, var(--xpp-theme-surface-alt) 88%, black);
  }
  --color-glass-bg: var(--xpp-theme-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --color-glass-bg: color-mix(in srgb, var(--xpp-theme-surface) 74%, rgba(255,255,255,0.28));
  }
  --color-glass-bg-heavy: var(--xpp-theme-surface-alt);
  @supports (color: color-mix(in lab, red, red)) {
    --color-glass-bg-heavy: color-mix(in srgb, var(--xpp-theme-surface-alt) 82%, rgba(255,255,255,0.42));
  }
  --color-glass-bg-dark: var(--xpp-theme-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --color-glass-bg-dark: color-mix(in srgb, var(--xpp-theme-surface) 92%, rgba(9,14,21,0.86));
  }
  --color-glass-bg-heavy-dark: var(--xpp-theme-surface-alt);
  @supports (color: color-mix(in lab, red, red)) {
    --color-glass-bg-heavy-dark: color-mix(in srgb, var(--xpp-theme-surface-alt) 94%, rgba(8,12,18,0.90));
  }
  --color-glass-border: var(--tw-color-glass-border);
  --color-glass-border-dark: var(--tw-color-glass-border-dark);
  --color-glass-border-subtle: var(--tw-color-glass-border-subtle);
  --color-glass-border-subtle-dark: var(--tw-color-glass-border-subtle-dark);
  --color-glass-highlight: var(--tw-color-glass-highlight);
  --color-glass-highlight-dark: var(--tw-color-glass-highlight-dark);
  --color-glass-shadow: var(--tw-color-glass-shadow);
  --color-glass-shadow-dark: var(--tw-color-glass-shadow-dark);
  --color-glass-aurora: var(--tw-color-glass-aurora);
  --color-glass-aurora-dark: var(--tw-color-glass-aurora-dark);
  --color-glass-btn: var(--tw-color-glass-btn);
  --color-glass-btn-hover: var(--tw-color-glass-btn-hover);
  --color-glass-btn-dark: var(--tw-color-glass-btn-dark);
  --color-glass-btn-hover-dark: var(--tw-color-glass-btn-hover-dark);
  --color-glass-pill: var(--tw-color-glass-pill);
  --color-glass-pill-border: var(--tw-color-glass-pill-border);
  --color-glass-pill-dark: var(--tw-color-glass-pill-dark);
  --color-glass-pill-border-dark: var(--tw-color-glass-pill-border-dark);
  --color-glow-accent: var(--tw-color-glow-accent);
  --color-glow-accent-strong: var(--tw-color-glow-accent-strong);
  --color-glow-accent-dark: var(--tw-color-glow-accent-dark);
  --color-glow-accent-strong-dark: var(--tw-color-glow-accent-strong-dark);
  --color-card-glass: var(--tw-color-card-glass);
  --color-card-glass-dark: var(--tw-color-card-glass-dark);
  --color-card-glass-border: var(--tw-color-card-glass-border);
  --color-card-glass-border-dark: var(--tw-color-card-glass-border-dark);
  --radius-xpp: var(--tw-radius-xpp);
  --radius-xpp-pill: var(--tw-radius-xpp-pill);
  --animate-hero-reveal: var(--tw-animate-hero-reveal);
  --animate-glass-reveal: var(--tw-animate-glass-reveal);
  --animate-glow-pulse: var(--tw-animate-glow-pulse);
  --animate-shimmer: var(--tw-animate-shimmer);
  --animate-bg-shift: var(--tw-animate-bg-shift);
  --animate-nav-reveal: var(--tw-animate-nav-reveal);
  --animate-pane-reveal: var(--tw-animate-pane-reveal);
  --ease-spring: var(--tw-ease-spring);
  --ease-spring-soft: var(--tw-ease-spring-soft);
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
    }
  }
}