@font-face {
  font-family: AudizyVercelSyne;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/avl-syne.woff2') format('woff2');
}

:root {
  --avl-syne: AudizyVercelSyne, 'MADE Outer Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Global Motion Tokens - Extracted from "Step 0" premium feel */
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
  
  --scroll-padding-top: 88px; /* Header offset */

  /* Colors */
  --bg-primary: #050505;
  --text-secondary: #a0a0a0;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --blur: blur(20px);

  /* Audizy chromatic system */
  --audizy-void-indigo: rgb(7, 0, 54);
  --audizy-plum-ink: rgb(19, 12, 30);
  --audizy-deep-violet: rgb(58, 21, 115);
  --audizy-aurora-magenta: rgb(119, 30, 124);
  --audizy-electric-blue: rgb(45, 106, 171);
  --audizy-smoked-blue: rgb(71, 108, 148);
  --audizy-steel-cyan: rgb(57, 102, 127);
  --audizy-seafoam-teal: rgb(82, 172, 158);
  --audizy-orbit-green: rgb(62, 255, 172);
  --audizy-muted-bronze: rgb(130, 107, 70);
  --audizy-navy-glass: rgb(23, 41, 62);
  --audizy-rail-blue: rgb(32, 42, 59);
  --audizy-marketplace-ice: rgb(125, 211, 252);
  --audizy-cloud-silverblue: rgb(118, 177, 211);
  --audizy-youtube-velvet-red: rgb(211, 41, 55);
  --audizy-forensic-amber: rgb(181, 133, 54);
  --audizy-sentinel-violet: rgb(84, 68, 164);

  /* Audizy hero token layer: tune the landing hero palette, glass, type, and 8px spacing rhythm here. */
  --audizy-hero-font-accent: var(--avl-syne);
  --audizy-hero-bg: rgb(7 7 7);
  --audizy-hero-min-height: 100dvh;
  --audizy-hero-min-height-desktop: calc(100dvh - 18px);
  --audizy-hero-min-height-mobile: 1080px;
  --audizy-hero-shell-width: 1129px;
  --audizy-hero-safe-x-desktop: 96px;
  --audizy-hero-safe-x-mobile: 32px;
  --audizy-hero-title-top-desktop: 386px;
  --audizy-hero-bottom-top-desktop: 508px;
  --audizy-hero-title-top-mobile: 318px;
  --audizy-hero-bottom-top-mobile: 542px;

  --audizy-hero-space-1: 8px;
  --audizy-hero-space-2: 16px;
  --audizy-hero-space-3: 24px;
  --audizy-hero-space-4: 32px;
  --audizy-hero-space-5: 40px;
  --audizy-hero-space-6: 48px;
  --audizy-hero-space-8: 64px;
  --audizy-hero-title-gap-desktop: 28px;
  --audizy-hero-title-gap-mobile: 14px;
  --audizy-hero-bottom-gap-mobile: 16px;
  --audizy-hero-card-gap-mobile: 16px;
  --audizy-hero-cta-gap-desktop: 20px;
  --audizy-hero-cta-gap-mobile: 18px;

  --audizy-hero-logo-size-desktop: clamp(38px, 4.15vw, 70px);
  --audizy-hero-logo-size-tablet: clamp(28px, 5.7vw, 38px);
  --audizy-hero-logo-size-mobile: clamp(34px, 10.2vw, 66px);
  --audizy-hero-subhead-size-desktop: 14px;
  --audizy-hero-subhead-size-mobile: 14px;
  --audizy-hero-card-font-size-desktop: 16px;
  --audizy-hero-card-line-height-desktop: 22.4px;
  --audizy-hero-card-font-size-mobile: 17px;
  --audizy-hero-card-line-height-mobile: 25px;

  --audizy-hero-gradient-blue: 76 170 255;
  --audizy-hero-gradient-electric: 44 148 255;
  --audizy-hero-gradient-deep-blue: 28 112 220;
  --audizy-hero-gradient-steel: 64 118 140;
  --audizy-hero-gradient-cyan: 36 208 248;
  --audizy-hero-gradient-cyan-deep: 24 166 220;
  --audizy-hero-gradient-green: 62 255 172;
  --audizy-hero-gradient-teal: 24 226 164;
  --audizy-hero-gradient-teal-deep: 25 174 142;
  --audizy-hero-gradient-teal-bright: 22 206 160;
  --audizy-hero-gradient-teal-dark: 15 150 132;
  --audizy-hero-gradient-mint: 34 245 165;
  --audizy-hero-gradient-purple: 119 30 124;
  --audizy-hero-gradient-violet: 58 21 115;

  --audizy-hero-overlay-blur: blur(18px) saturate(1.04);
  --audizy-hero-card-backdrop: blur(18px);
  --audizy-hero-glow-blur: blur(82px);
  --audizy-hero-fade-height: 240px;
  --audizy-hero-glow-right: -150px;
  --audizy-hero-glow-top: 18px;
  --audizy-hero-glow-width: 540px;
  --audizy-hero-glow-height: 700px;

  --audizy-hero-radius-rail: 16px;
  --audizy-hero-radius-pill: 12px;
  --audizy-hero-radius-card: 18px;
  --audizy-hero-radius-card-mobile: 22px;
  --audizy-hero-rail-height: 42px;
  --audizy-hero-pill-height: 31px;
  --audizy-hero-rail-padding: 4px 6px;
  --audizy-hero-card-padding-desktop: 18px 24px 16px;
  --audizy-hero-card-padding-mobile: 18px;

  --audizy-hero-text-muted: rgba(214, 222, 226, 0.86);
  --audizy-hero-card-text: rgba(218, 225, 229, 0.84);
  --audizy-hero-card-emphasis: rgba(239, 247, 250, 0.92);
  --audizy-hero-kicker: rgba(166, 194, 205, 0.70);
  --audizy-hero-note-text: rgba(255, 255, 255, 0.56);
  --audizy-hero-link-text: rgba(124, 128, 135, 0.64);
  --audizy-hero-link-text-hover: rgba(170, 174, 181, 0.76);
  --audizy-hero-link-border: rgba(118, 122, 128, 0.38);
  --audizy-hero-link-border-hover: rgba(170, 174, 181, 0.52);
  --audizy-hero-focus-ring: rgba(125, 211, 252, 0.66);
  --audizy-hero-focus-border: rgba(224, 238, 248, 0.42);
  --audizy-hero-rail-border: rgba(132, 172, 184, 0.14);
  --audizy-hero-card-border: rgba(255, 255, 255, 0.10);
  --audizy-hero-card-sheen: rgba(218, 230, 235, 0.26);
  --audizy-hero-rail-bg: linear-gradient(135deg, rgba(18, 23, 27, 0.72), rgba(5, 6, 8, 0.48) 42%, rgba(22, 38, 42, 0.36));
  --audizy-hero-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.014) 34%, rgba(255, 255, 255, 0.042) 100%);
  --audizy-hero-rail-shadow: 0 14px 34px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 -1px 0 rgba(255, 255, 255, 0.014);
  --audizy-hero-card-shadow: 0 18px 44px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

html,
body,
#root {
  width: 100%;
  margin: 0;
}

html {
  overflow-x: hidden;
  scroll-padding-top: var(--scroll-padding-top);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--bg-primary);
  color: white;
  font-family: 'MADE Outer Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* Step 4: Scroll event architecture - Default smoothness */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
}

.audizy-liquid-glass-header {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0 !important;
  background: transparent;
  background-color: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: none;
}

.audizy-liquid-glass-header--transparent {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

.avl-fixed-header .audizy-liquid-glass-header {
  min-height: 76px;
}

.avl-fixed-header .audizy-liquid-glass-header--transparent {
  background: transparent;
  background-color: transparent;
}

.audizy-liquid-glass-header::before,
.audizy-liquid-glass-header::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.audizy-liquid-glass-header::before {
  background: transparent;
  opacity: 0;
}

.audizy-liquid-glass-header::after {
  background: transparent;
  opacity: 0;
}

.audizy-liquid-glass-header > * {
  position: relative;
  z-index: 1;
}

.audizy-mass-upload-preflight-popup[class~="border-white/10"],
.audizy-mass-upload-preflight-popup[class~="border-white/12"],
.audizy-mass-upload-preflight-popup [class~="border-white/10"],
.audizy-mass-upload-preflight-popup [class~="border-white/12"] {
  border-color: rgb(26, 29, 35) !important;
}

.audizy-mass-upload-preflight-popup [class~="hover:border-white/20"]:hover,
.audizy-mass-upload-preflight-popup [class~="hover:border-white/24"]:hover {
  border-color: rgb(38, 42, 50) !important;
}

.audizy-mass-upload-cta-particle-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}

.audizy-mass-upload-wave-scan-lens,
.audizy-mass-upload-wave-reactive-window {
  backface-visibility: hidden;
  transform-box: view-box;
  transform-origin: 0 0;
  will-change: transform;
  animation: audizyMassUploadWaveScan 9.2s cubic-bezier(0.42, 0, 0.18, 1) infinite;
}

.audizy-mass-upload-wave-reactive-bars,
.audizy-mass-upload-wave-reactive-particles {
  mix-blend-mode: screen;
}

.audizy-mass-upload-wave-reactive-particles circle {
  shape-rendering: geometricPrecision;
}

.audizy-mass-upload-waveform-bar {
  shape-rendering: geometricPrecision;
}

@keyframes audizyMassUploadWaveScan {
  0% { transform: translate(24%, 50%); }
  12% { transform: translate(39%, 39%); }
  25% { transform: translate(58%, 58%); }
  38% { transform: translate(76%, 43%); }
  52% { transform: translate(88%, 62%); }
  65% { transform: translate(66%, 37%); }
  79% { transform: translate(45%, 59%); }
  92% { transform: translate(31%, 42%); }
  100% { transform: translate(24%, 50%); }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .audizy-mass-upload-cta-particle-layer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audizy-mass-upload-wave-scan-lens,
  .audizy-mass-upload-wave-reactive-window {
    animation: none !important;
    transform: translate(55%, 50%);
  }
}

.audizy-mass-upload-variable-card {
  min-height: 86px;
  border-color: rgba(26, 30, 38, 0.9) !important;
  background: rgb(0, 0, 1) !important;
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.012),
    inset 0 -1px 0 rgba(0, 0, 0, 0.56);
  transform: translateZ(0);
}

.audizy-mass-upload-variable-card::before,
.audizy-mass-upload-variable-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.audizy-mass-upload-variable-card::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 92% 64% at 50% 112%, rgba(5, 5, 8, 0.97) 0%, rgba(1, 1, 3, 0.995) 54%, rgba(0, 0, 1, 1) 100%),
    linear-gradient(135deg, rgba(3, 4, 7, 0.995) 0%, rgba(1, 2, 4, 0.995) 100%);
}

.audizy-mass-upload-variable-card::after {
  z-index: 1;
  opacity: 1;
  mix-blend-mode: screen;
  filter: blur(10px) saturate(1.38) contrast(1.1);
}

.audizy-mass-upload-variable-card > * {
  position: relative;
  z-index: 2;
}

/* Unified restrained monochrome wash: one calm cool-slate/white feather rising
   from the bottom edge on every variable card, so the set reads as a single
   premium system instead of a rainbow. Same treatment across all tones. */
.audizy-mass-upload-variable-card--studio::after,
.audizy-mass-upload-variable-card--primary::after,
.audizy-mass-upload-variable-card--signature::after,
.audizy-mass-upload-variable-card--cool::after,
.audizy-mass-upload-variable-card--pulse::after,
.audizy-mass-upload-variable-card--key::after,
.audizy-mass-upload-variable-card--genre::after,
.audizy-mass-upload-variable-card--style::after,
.audizy-mass-upload-variable-card--instrument::after,
.audizy-mass-upload-variable-card--detected::after {
  opacity: 0.85;
  background:
    radial-gradient(ellipse 64% 36% at 50% 113%, rgba(214, 222, 233, 0.15) 0%, rgba(148, 163, 184, 0.075) 42%, transparent 74%),
    radial-gradient(ellipse 78% 46% at 50% 108%, rgba(226, 232, 240, 0.065) 0%, rgba(148, 163, 184, 0.032) 46%, transparent 82%),
    radial-gradient(ellipse 53% 30% at 40% 115%, rgba(244, 248, 252, 0.09) 0%, rgba(224, 232, 236, 0.035) 42%, transparent 79%);
}

.audizy-mass-upload-analyzed-filename {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0;
  row-gap: 2px;
}

.audizy-mass-upload-filename-plain,
.audizy-mass-upload-filename-token {
  white-space: pre;
}

.audizy-mass-upload-filename-token {
  --audizy-mass-upload-token-line: rgba(255, 255, 255, 0.24);
  --audizy-mass-upload-token-line-soft: rgba(255, 255, 255, 0.12);
  --audizy-mass-upload-token-glow: rgba(255, 255, 255, 0.04);
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding-bottom: 6px;
  margin-bottom: -5px;
  color: rgba(248, 250, 252, 0.96);
  text-shadow: none;
}

.audizy-mass-upload-filename-token::after {
  content: '';
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: 2px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--audizy-mass-upload-token-line) 16%, var(--audizy-mass-upload-token-line-soft) 78%, transparent 100%);
  box-shadow: 0 0 7px var(--audizy-mass-upload-token-glow);
  opacity: 0.72;
}

/* Uniform cool-white/slate underline on every parsed token — cohesion over
   color-coding. No per-token rainbow hues. */
.audizy-mass-upload-filename-token--artist,
.audizy-mass-upload-filename-token--genre,
.audizy-mass-upload-filename-token--style,
.audizy-mass-upload-filename-token--name,
.audizy-mass-upload-filename-token--bpm,
.audizy-mass-upload-filename-token--prod {
  --audizy-mass-upload-token-line: rgba(203, 213, 225, 0.40);
  --audizy-mass-upload-token-line-soft: rgba(148, 163, 184, 0.22);
  --audizy-mass-upload-token-glow: rgba(226, 232, 240, 0.06);
}

.audizy-mass-upload-variable-card-icon {
  border-color: rgba(38, 42, 50, 0.92) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014) 54%, rgba(5, 5, 7, 0.92) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.046), 0 16px 34px rgba(0, 0, 0, 0.28);
}

.audizy-mass-upload-variable-slot {
  border-color: rgba(38, 42, 50, 0.92) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.012) 42%, rgba(125, 211, 252, 0.036) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032);
}


html.audizy-viewport-locked,
body.audizy-viewport-locked {
  height: 100%;
  overflow: hidden !important;
}

.audizy-site-shell {
  min-height: 100vh;
}

.audizy-site-shell--scroll-root {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .audizy-site-shell--scroll-root {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility Classes for Premium Motion */
.smooth-scroll-container {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
}

/* Scroll Snap Utilities - Only apply where segment-based */
.snap-y-mandatory {
  scroll-snap-type: y mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.snap-always {
  scroll-snap-stop: always;
}

/* Interaction Gating */
.pointer-events-none-recursive * {
  pointer-events: none;
}

/* GPU Optimization */
.gpu-layer {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Custom Scrollbar (Matches existing style but centralized) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 99px;
  transition: background var(--duration-fast) var(--ease-out-cubic);
}
::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--accent, #00F0FF);
  outline-offset: 2px;
}

@keyframes audizyPlayerMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - 1.25rem), 0, 0);
  }
}

.audizy-player-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.audizy-player-marquee__track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  gap: 2.5rem;
  animation: audizyPlayerMarquee var(--audizy-marquee-duration, 14s) linear infinite;
  will-change: transform;
}

.audizy-player-marquee__segment {
  flex: 0 0 auto;
  white-space: nowrap;
}

.audizy-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.audizy-volume-slider:focus {
  outline: none;
}

.audizy-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.audizy-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: #d4d4dc;
  margin-top: -9px;
  box-shadow: none;
}

.audizy-volume-slider::-moz-range-track {
  height: 4px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.audizy-volume-slider::-moz-range-thumb {
  width: 3px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: #d4d4dc;
  box-shadow: none;
}

/* Universal Variable Box System */
.audizy-variable-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  min-width: 112px;
  box-sizing: border-box;
  border: 1px solid #262626;
  border-radius: 6px;
  background: #181818;
  color: #d4d4d4;
  padding: 4px 10px;
  font-family: 'MADE Outer Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.audizy-variable-box--inline {
  margin: 0 2px;
  vertical-align: middle;
}

.audizy-variable-box--drag {
  cursor: grab;
  user-select: none;
}

.audizy-variable-box--drag:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: #1f1f1f;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.audizy-variable-box--drag:active {
  cursor: grabbing;
}

.audizy-variable-box--dragging {
  opacity: 0.7;
  transform: scale(0.97);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.audizy-description-editor--drop-active {
  box-shadow: none;
  background: #050505;
}

.audizy-variable-box--used {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.audizy-variable-box--disabled {
  color: #737373;
  opacity: 0.5;
  cursor: not-allowed;
}

.audizy-variable-box--removable {
  padding-left: 16px;
  padding-right: 16px;
}

.audizy-variable-box__label {
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audizy-variable-box__remove {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #737373;
  line-height: 1;
  transition: color 180ms ease;
}

.audizy-variable-box__remove:hover {
  color: #ffffff;
}

/* Unified structured form language (rolled site-wide) */
.audizy-site-shell {
  --audizy-structure-card-bg: rgba(0, 0, 0, 0.25);
  --audizy-structure-card-border: rgba(255, 255, 255, 0.1);
  --audizy-structure-field-bg: #050505;
  --audizy-structure-field-border: rgba(255, 255, 255, 0.1);
  --audizy-structure-field-text: #ffffff;
  --audizy-structure-field-placeholder: #737373;
  --audizy-structure-subtext: #737373;
  --audizy-structure-focus: rgba(255, 255, 255, 0.42);
  --audizy-structure-focus-ring: rgba(255, 255, 255, 0.12);
}

.audizy-site-shell :is(
  input[type='text'],
  input[type='search'],
  input[type='email'],
  input[type='url'],
  input[type='password'],
  input[type='number'],
  input[type='tel'],
  input[type='date'],
  input[type='time'],
  input[type='datetime-local'],
  select,
  textarea
) {
  background: var(--audizy-structure-field-bg);
  color: var(--audizy-structure-field-text);
  border-color: var(--audizy-structure-field-border);
  border-radius: 0.75rem;
  font-weight: 500;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.audizy-site-shell :is(
  input[type='text'],
  input[type='search'],
  input[type='email'],
  input[type='url'],
  input[type='password'],
  input[type='number'],
  input[type='tel'],
  input[type='date'],
  input[type='time'],
  input[type='datetime-local'],
  textarea
)::placeholder {
  color: var(--audizy-structure-field-placeholder);
}

.audizy-site-shell :is(
  input[type='text'],
  input[type='search'],
  input[type='email'],
  input[type='url'],
  input[type='password'],
  input[type='number'],
  input[type='tel'],
  input[type='date'],
  input[type='time'],
  input[type='datetime-local'],
  select,
  textarea
):focus {
  border-color: var(--audizy-structure-focus);
  box-shadow: 0 0 0 2px var(--audizy-structure-focus-ring);
}

.audizy-site-shell .audizy-message-composer-input,
.audizy-site-shell .audizy-message-composer-input:focus,
.audizy-site-shell .audizy-message-composer-input:focus-visible {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.audizy-site-shell select {
  padding-right: 2.15rem;
}

/* Step 2 keyboard-mapping dropdowns: restore the down-arrow chevron */
.audizy-step2-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 13px 13px;
}

.audizy-site-shell option {
  background: #050505;
  color: #ffffff;
}

.audizy-structure-card {
  border: 1px solid var(--audizy-structure-card-border);
  border-radius: 1rem;
  background: var(--audizy-structure-card-bg);
}

.audizy-structure-section {
  border: 1px solid var(--audizy-structure-card-border);
  border-radius: 0.75rem;
  background: rgba(7, 7, 7, 0.8);
}

.audizy-structure-field {
  background: var(--audizy-structure-field-bg) !important;
  border: 1px solid var(--audizy-structure-field-border) !important;
  border-radius: 0.75rem !important;
  color: var(--audizy-structure-field-text) !important;
  font-weight: 500 !important;
}

.audizy-structure-field::placeholder {
  color: var(--audizy-structure-field-placeholder) !important;
}

.audizy-structure-field:focus {
  border-color: var(--audizy-structure-focus) !important;
  box-shadow: 0 0 0 2px var(--audizy-structure-focus-ring) !important;
}

.audizy-number-no-spin {
  appearance: textfield;
  -moz-appearance: textfield;
}

.audizy-number-no-spin::-webkit-outer-spin-button,
.audizy-number-no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.audizy-structure-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.audizy-structure-help {
  font-size: 10px;
  color: var(--audizy-structure-subtext);
}

.audizy-artwork-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.group:hover .audizy-artwork-play-button,
.group:focus-within .audizy-artwork-play-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.audizy-artwork-play-button svg {
  overflow: visible;
}

@media (hover: none), (pointer: coarse) {
  .audizy-artwork-play-button {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
}

.audizy-auth-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(circle at center, black 32%, transparent 90%);
}

.audizy-auth-scene,
.audizy-auth-orb,
.audizy-auth-orb-core {
  position: relative;
}

.audizy-auth-scene::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 44% 50%, rgba(82, 120, 255, 0.24), transparent 34%),
    radial-gradient(circle at 58% 56%, rgba(255, 145, 82, 0.18), transparent 24%),
    radial-gradient(circle at 54% 40%, rgba(160, 98, 255, 0.16), transparent 28%);
  filter: blur(42px);
}

.audizy-auth-orb,
.audizy-auth-orb-core {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.audizy-auth-orb {
  width: 34%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.99), rgba(232, 239, 255, 0.96) 18%, rgba(171, 196, 255, 0.78) 34%, rgba(244, 246, 255, 0.72) 58%, rgba(0, 0, 0, 0) 78%),
    radial-gradient(circle at 64% 66%, rgba(231, 236, 255, 0.28), rgba(231, 236, 255, 0) 52%);
  box-shadow:
    0 0 150px rgba(96, 147, 255, 0.26),
    0 0 90px rgba(255, 154, 94, 0.14),
    0 0 110px rgba(160, 98, 255, 0.12);
}

.audizy-auth-orb-core {
  width: 15%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(219, 232, 255, 0.82) 60%, rgba(255, 255, 255, 0) 78%);
  filter: blur(6px);
}

/* ── Pricing "Studio" nebula card + pearly CTA (cloned for Upload Intro / Mass Upload card).
   Mirrors the rules defined in PRICING_CHROME_CSS inside Pricing.tsx so the nebula glow and
   premium CTA render globally, not only when the Pricing page is mounted. ── */
.audizy-pricing-card {
  border-color: rgba(255,255,255,.14);
  background: #020203;
  box-shadow: 0 34px 100px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.012);
}
.audizy-pricing-card::before,
.audizy-pricing-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.audizy-pricing-card::before {
  inset: 0;
  z-index: 0;
  background: #020203;
}
.audizy-pricing-card::after {
  inset: 0;
  z-index: 1;
  opacity: .82;
  mix-blend-mode: screen;
  filter: blur(18px) saturate(.9) contrast(1.06);
}
.audizy-pricing-card--studio::before {
  background:
    radial-gradient(ellipse 95% 55% at 48% -5%, rgba(0,0,0,.96) 0%, rgba(0,0,0,.68) 34%, transparent 66%),
    radial-gradient(ellipse 92% 64% at 50% 110%, rgba(12,12,18,.96) 0%, rgba(4,4,7,.98) 54%, rgba(1,1,2,1) 100%);
}
.audizy-pricing-card--studio::after {
  background:
    radial-gradient(ellipse 42% 14% at 96% -2%, rgba(224,232,236,.46) 0%, rgba(148,163,184,.18) 34%, transparent 76%),
    radial-gradient(ellipse 44% 12% at 80% 10%, rgba(0,168,86,.48) 0%, rgba(0,154,105,.24) 36%, transparent 76%),
    radial-gradient(ellipse 48% 14% at 67% 18%, rgba(114,91,255,.36) 0%, rgba(58,21,115,.18) 42%, transparent 78%),
    radial-gradient(ellipse 40% 13% at 61% 26%, rgba(28,143,255,.36) 0%, rgba(45,106,171,.18) 38%, transparent 78%);
}
.audizy-pricing-card-hairline {
  position: absolute;
  inset: 0 22px auto;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.audizy-pricing-card--studio .audizy-pricing-card-hairline { background: linear-gradient(90deg, transparent, rgba(119,30,124,.28), rgba(125,211,252,.38), rgba(0,154,105,.36), rgba(224,232,236,.22), transparent); }

/* Upload-intro Quick Upload card: strip the green/blue/violet glow → neutral mono. */
.audizy-upload-card--mono.audizy-pricing-card--studio::after {
  background:
    radial-gradient(ellipse 42% 14% at 96% -2%, rgba(224,232,236,.40) 0%, rgba(148,163,184,.16) 34%, transparent 76%),
    radial-gradient(ellipse 50% 16% at 70% 14%, rgba(224,232,236,.18) 0%, rgba(148,163,184,.09) 40%, transparent 78%) !important;
}
.audizy-upload-card--mono.audizy-pricing-card--studio .audizy-pricing-card-hairline { background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) !important; }

/* Upload-intro cards: dissolve the hard border + inset ring so they fall free
   into the near-black page — keep the inner gradient glows + a soft drop only. */
.audizy-upload-card.audizy-pricing-card {
  border-color: transparent !important;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.55) !important;
}
.audizy-pricing-hero-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  width: calc(100% + 12px);
  margin: 2rem -6px 0;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(5,5,5,.34);
  color: rgba(255,255,255,.88);
  font: 700 11px/1 var(--avl-suisse, 'MADE Outer Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.24);
  transform: translateY(-1px);
  transition: border-color .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  will-change: transform;
}
.audizy-pricing-hero-cta:hover {
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.02);
  transform: translateY(-1px);
}
@keyframes audizyPricingCtaPearlDrift { 0% { background-position: 0% 50%, 100% 50%, 0% 50%; } 100% { background-position: 220% 50%, -120% 50%, 0% 50%; } }
.audizy-pricing-hero-cta--studio {
  border-color: rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -1px 0 rgba(0,0,0,.14), 0 18px 44px rgba(255,255,255,.045), 0 0 28px rgba(0,154,105,.08);
}
.audizy-pricing-hero-cta::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(244,248,252) 0%, rgb(224,228,232) 46%, rgb(178,171,158) 100%);
  opacity: 1;
  filter: none;
  transform: translateX(0);
  transition: transform .46s cubic-bezier(.22,1,.36,1);
}
.audizy-pricing-hero-cta--studio::before { background: radial-gradient(ellipse 80% 140% at 18% 0%, rgba(255,255,255,1) 0%, rgba(242,252,248,.98) 38%, transparent 72%), linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(82,172,158,.24) 18%, rgba(255,255,255,.92) 31%, rgba(125,211,252,.22) 44%, rgba(255,255,255,0) 62%), linear-gradient(90deg, #ffffff 0%, #edf7f4 36%, #f7f3ea 72%, #ffffff 100%); background-size: 100% 100%, 220% 100%, 100% 100%; animation: audizyPricingCtaPearlDrift 7.8s linear infinite; }
.audizy-pricing-hero-cta:hover::before { opacity: 1; transform: translateX(0); }
.audizy-pricing-hero-cta::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 34%, rgba(255,255,255,.06) 100%);
  transform: translateX(-101%);
  transition: transform .46s cubic-bezier(.22,1,.36,1);
}
.audizy-pricing-hero-cta:hover::after { animation: none; transform: translateX(-101%); }
.audizy-pricing-cta-particle-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .32s cubic-bezier(.22,1,.36,1);
}
.audizy-pricing-hero-cta:hover .audizy-pricing-cta-particle-layer { opacity: 1; }
.audizy-pricing-cta-content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(5,5,5,.96) !important;
  transform: none;
  transition: color .22s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
}
.audizy-pricing-hero-cta:hover .audizy-pricing-cta-content { color: rgba(5,5,5,.96) !important; transform: none; }
.audizy-pricing-cta-arrow {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 22px;
  height: 16px;
  flex: 0 0 22px;
  color: rgba(5,5,5,.96) !important;
  overflow: hidden;
  transition: color .22s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
}
.audizy-pricing-cta-arrow-svg {
  display: block;
  width: 20px;
  height: 16px;
  transform: translate3d(0,0,0);
  transition: transform .24s cubic-bezier(.16,1,.3,1), stroke .18s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.audizy-pricing-cta-arrow-svg path { stroke: currentColor !important; transition: stroke .22s cubic-bezier(.22,1,.36,1); }
.audizy-pricing-hero-cta:hover .audizy-pricing-cta-arrow { color: rgba(5,5,5,.96) !important; }
.audizy-pricing-hero-cta:hover .audizy-pricing-cta-arrow-svg { transform: translate3d(4px,0,0); }
@media (prefers-reduced-motion: reduce) {
  .audizy-pricing-hero-cta--studio::before { animation: none; }
}

/* Upload-intro CTAs (Mass + Quick): mirror the wizard stepper's ACTIVE pill —
   glassy light gradient + bright white border + outer ring, white text. */
.audizy-upload-hero-cta.audizy-pricing-hero-cta--studio,
.audizy-upload-hero-cta {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.06) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.audizy-upload-hero-cta.audizy-pricing-hero-cta--studio::before,
.audizy-upload-hero-cta::before {
  opacity: 0 !important;
  background: transparent !important;
  animation: none !important;
}
.audizy-upload-hero-cta .audizy-pricing-cta-content,
.audizy-upload-hero-cta .audizy-pricing-cta-arrow,
.audizy-upload-hero-cta:hover .audizy-pricing-cta-content,
.audizy-upload-hero-cta:hover .audizy-pricing-cta-arrow {
  color: #ffffff !important;
}
.audizy-upload-hero-cta .audizy-pricing-cta-particle-layer { opacity: 0 !important; }
.audizy-upload-hero-cta .audizy-pricing-cta-arrow-svg { transform: translate3d(0, 0, 0); }

/* Clean shimmer placeholder shown while beat artwork decodes */
.audizy-art-wire {
  background-color: #0c0c0e;
  overflow: hidden;
}
.audizy-art-wire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: audizyArtShimmer 1.4s ease-in-out infinite;
}
@keyframes audizyArtShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .audizy-art-wire::after { animation: none; }
}

/* Mobile bottom tab bar (mobile-pass). Var is 0 on desktop so nothing shifts. */
:root { --audizy-tabbar-h: 0px; }
@media (max-width: 1023.98px) {
  :root { --audizy-tabbar-h: 56px; }
  .audizy-site-shell { padding-bottom: calc(var(--audizy-tabbar-h) + env(safe-area-inset-bottom)); }
}