:root {
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
  --ui-duration-fast: 120ms;
  --ui-duration: 200ms;
  --ui-duration-slow: 320ms;
  --ui-lift: -4px;
  --ui-focus-width: 2px;
  --ui-focus-offset: 2px;
  --ui-focus-color: #7c3aed;
}
.ui-focus:focus-visible {
  outline: var(--ui-focus-width) solid var(--ui-focus-color);
  outline-offset: var(--ui-focus-offset);
}
[data-discover-theme] :focus-visible,
[data-experience-theme] :focus-visible {
  outline: var(--ui-focus-width) solid var(--ui-focus-color);
  outline-offset: var(--ui-focus-offset);
}
.ui-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
}
.ui-brand-mark {
  width: auto;
  display: block;
}
.ui-brand-word {
  display: block;
  background-image: url(/frontend-logo.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
[data-discover-theme=dark] .ui-brand-word,
[data-experience-theme=dark] .ui-brand-word {
  background-image: url(/frontend-logo-light.png);
}
@media (max-width: 639px) {
  .ui-brand-word-responsive {
    display: none;
  }
}
.ui-skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  transform: translate(-50%, -120%);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 12px 12px;
  background: var(--ui-focus-color);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--ui-duration) var(--ui-ease);
}
.ui-skip-link:focus {
  transform: translate(-50%, 0);
}
.ui-no-scrollbar,
.dsc-no-scrollbar,
.exp-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ui-no-scrollbar::-webkit-scrollbar,
.dsc-no-scrollbar::-webkit-scrollbar,
.exp-no-scrollbar::-webkit-scrollbar {
  display: none;
}
.ui-rail-mask[data-overflow-start=true] {
  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 48px);
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 48px);
}
.ui-rail-mask[data-overflow-end=true] {
  mask-image:
    linear-gradient(
      to left,
      transparent 0,
      #000 48px);
  -webkit-mask-image:
    linear-gradient(
      to left,
      transparent 0,
      #000 48px);
}
.ui-rail-mask[data-overflow-start=true][data-overflow-end=true] {
  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 48px,
      #000 calc(100% - 48px),
      transparent 100%);
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 48px,
      #000 calc(100% - 48px),
      transparent 100%);
}
.ui-shimmer,
.dsc-shimmer,
.exp-shimmer {
  background:
    linear-gradient(
      100deg,
      var(--ui-shimmer-base, #f0f0f2) 30%,
      var(--ui-shimmer-highlight, #e4e4e7) 50%,
      var(--ui-shimmer-base, #f0f0f2) 70%);
  background-size: 220% 100%;
  animation: ui-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-shimmer {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -20% 0;
  }
}
.ui-clamp-1,
.ui-clamp-2,
.ui-clamp-3,
.dsc-clamp-2,
.dsc-clamp-3,
.exp-clamp-1,
.exp-clamp-2,
.exp-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ui-clamp-1,
.exp-clamp-1 {
  -webkit-line-clamp: 1;
}
.ui-clamp-2,
.dsc-clamp-2,
.exp-clamp-2 {
  -webkit-line-clamp: 2;
}
.ui-clamp-3,
.dsc-clamp-3,
.exp-clamp-3 {
  -webkit-line-clamp: 3;
}
.ui-reel-track,
.dsc-reel-track {
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}
.ui-reel-stop,
.dsc-reel-stop {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-lift: 0px;
    --ui-duration-fast: 1ms;
    --ui-duration: 1ms;
    --ui-duration-slow: 1ms;
  }
  .ui-shimmer,
  .dsc-shimmer,
  .exp-shimmer {
    animation: none;
  }
  [data-discover-theme] *,
  [data-experience-theme] * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  [data-discover-theme] [class*=rounded],
  [data-experience-theme] [class*=rounded] {
    border: 1px solid CanvasText;
  }
  .ui-focus:focus-visible,
  [data-discover-theme] :focus-visible,
  [data-experience-theme] :focus-visible {
    outline: var(--ui-focus-width) solid Highlight;
  }
  .ui-rail-mask {
    mask-image: none;
    -webkit-mask-image: none;
  }
}
:root,
[data-experience-theme] {
  --exp-bg: #ffffff;
  --exp-bg-soft: #f7f7f9;
  --exp-surface: #ffffff;
  --exp-surface-soft: #f4f4f6;
  --exp-surface-hover: #ececf0;
  --exp-surface-strong: #e1e1e6;
  --exp-border: rgba(9, 9, 11, 0.10);
  --exp-border-strong: rgba(9, 9, 11, 0.20);
  --exp-text: #101013;
  --exp-text-muted: #52525b;
  --exp-text-faint: #8a8a94;
  --exp-ink: #101013;
  --exp-on-ink: #ffffff;
  --exp-brand: #7c3aed;
  --exp-brand-hover: #6d28d9;
  --exp-brand-soft: rgba(124, 58, 237, 0.10);
  --exp-brand-text: #6d28d9;
  --exp-accent: #0891b2;
  --exp-accent-soft: rgba(8, 145, 178, 0.10);
  --exp-positive: #047857;
  --exp-warning: #b45309;
  --exp-danger: #be123c;
  --exp-danger-soft: rgba(190, 18, 60, 0.08);
  --exp-radius-card: 20px;
  --exp-radius-panel: 28px;
  --exp-header-h: 64px;
  --exp-shadow-card: 0 1px 2px rgba(9, 9, 11, 0.04), 0 8px 24px -12px rgba(9, 9, 11, 0.12);
  --exp-shadow-lift: 0 2px 4px rgba(9, 9, 11, 0.05), 0 18px 40px -16px rgba(9, 9, 11, 0.22);
}
[data-experience-theme=dark] {
  --exp-bg: #0b0b0d;
  --exp-bg-soft: #101013;
  --exp-surface: #17171b;
  --exp-surface-soft: #1c1c21;
  --exp-surface-hover: #26262c;
  --exp-surface-strong: #32323a;
  --exp-border: rgba(255, 255, 255, 0.10);
  --exp-border-strong: rgba(255, 255, 255, 0.22);
  --exp-text: #f6f6f7;
  --exp-text-muted: #a5a5ae;
  --exp-text-faint: #77777f;
  --exp-ink: #ffffff;
  --exp-on-ink: #101013;
  --exp-brand: #a78bfa;
  --exp-brand-hover: #c4b5fd;
  --exp-brand-soft: rgba(167, 139, 250, 0.16);
  --exp-brand-text: #c4b5fd;
  --exp-accent: #22d3ee;
  --exp-accent-soft: rgba(34, 211, 238, 0.14);
  --exp-positive: #34d399;
  --exp-warning: #fbbf24;
  --exp-danger: #fb7185;
  --exp-danger-soft: rgba(251, 113, 133, 0.14);
  --exp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --exp-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}
[data-experience-theme] {
  --ui-shimmer-base: var(--exp-surface-soft);
  --ui-shimmer-highlight: var(--exp-surface-hover);
  --ui-focus-color: var(--exp-brand);
}
.exp-cover-fallback {
  background:
    radial-gradient(
      circle at 22% 18%,
      var(--exp-brand-soft),
      transparent 42%),
    linear-gradient(
      135deg,
      var(--exp-surface-soft),
      var(--exp-surface-hover));
}
.exp-select {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--exp-border);
  border-radius: 12px;
  background-color: var(--exp-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
  padding: 0.7rem 2.1rem 0.7rem 0.8rem;
  color: var(--exp-text);
  font-size: 0.875rem;
  font-weight: 600;
  outline: none;
}
.exp-select:focus {
  border-color: var(--exp-brand);
  box-shadow: 0 0 0 3px var(--exp-brand-soft);
}
.exp-lift {
  transition:
    transform var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease);
}
.exp-lift:hover {
  transform: translateY(var(--ui-lift));
  box-shadow: var(--exp-shadow-lift);
}