:root {
 --asx-bg-0: #050613;
 --asx-bg-1: #0a0c1d;
 --asx-bg-2: #11142a;
 --asx-bg-3: #1a1d3d;
 --asx-fg-1: rgba(255, 255, 255, 0.95);
 --asx-fg-2: rgba(255, 255, 255, 0.72);
 --asx-fg-3: rgba(255, 255, 255, 0.42);
 --asx-fg-4: rgba(255, 255, 255, 0.18);
 --asx-c: #00e5ff;
 --asx-m: #ff2dd5;
 --asx-g: #ffc846;
 --asx-green: #22c997;
 --asx-red: #ff5a5a;
 --asx-purple: #a78bfa;
 --asx-glass-1: rgba(15, 15, 40, 0.78);
 --asx-glass-2: rgba(3, 3, 18, 0.85);
 --asx-glass-3: rgba(15, 15, 40, 0.95);
 --asx-border-1: rgba(0, 229, 255, 0.10);
 --asx-border-2: rgba(0, 229, 255, 0.22);
 --asx-border-3: rgba(0, 229, 255, 0.45);
 --asx-font-display: 'Cinzel', Georgia, serif;
 --asx-font-body: 'Rajdhani', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 --asx-font-mono: 'JetBrains Mono', 'Share Tech Mono', ui-monospace, monospace;
 --asx-text-xs: clamp(0.6rem, 1.4vw, 0.7rem);
 --asx-text-sm: clamp(0.75rem, 1.6vw, 0.85rem);
 --asx-text-base: clamp(0.875rem, 1.8vw, 1rem);
 --asx-text-lg: clamp(1rem, 2.2vw, 1.25rem);
 --asx-text-xl: clamp(1.25rem, 3vw, 1.65rem);
 --asx-text-2xl: clamp(1.5rem, 4vw, 2rem);
 --asx-motion-1: 100ms;
 --asx-motion-2: 200ms;
 --asx-motion-3: 350ms;
 --asx-motion-4: 600ms;
 --asx-motion-5: 1000ms;
 --asx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
 --asx-radius-sm: 6px;
 --asx-radius-md: 10px;
 --asx-radius-lg: 14px;
 --asx-radius-pill: 999px;
 --asx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
 --asx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
 --asx-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
 --asx-glow-cyan: 0 0 12px rgba(0, 229, 255, 0.3);
 --asx-glow-magenta: 0 0 12px rgba(255, 45, 213, 0.3);
 --asx-glow-gold: 0 0 12px rgba(255, 200, 70, 0.3);
 --asx-space-1: 0.25rem;
 --asx-space-2: 0.5rem;
 --asx-space-3: 0.75rem;
 --asx-space-4: 1rem;
 --asx-space-6: 1.5rem;
 --asx-space-8: 2rem;
}
@media (prefers-reduced-motion: reduce) {
 :root {
 --asx-motion-1: 0ms;
 --asx-motion-2: 0ms;
 --asx-motion-3: 0ms;
 --asx-motion-4: 0ms;
 --asx-motion-5: 0ms;
 }
}
body.asx-branded {
 background: linear-gradient(135deg, var(--asx-bg-0) 0%, var(--asx-bg-1) 50%, var(--asx-bg-2) 100%) !important;
 color: var(--asx-fg-1) !important;
 font-family: var(--asx-font-body) !important;
 background-attachment: fixed !important;
}
body.asx-branded .ms-spatial,
body.asx-branded .concert-tag.ms-spatial {
 color: var(--asx-c) !important;
 border-color: rgba(0, 229, 255, 0.3) !important;
}
body.asx-branded .ms-stereo,
body.asx-branded .concert-tag.ms-stereo {
 color: var(--asx-fg-1) !important;
 border-color: var(--asx-border-2) !important;
}
body.asx-branded .ms-binaural,
body.asx-branded .concert-tag.ms-binaural {
 color: var(--asx-purple) !important;
 border-color: rgba(167, 139, 250, 0.3) !important;
}
body.asx-branded {
 --realm-accent-mint: var(--asx-c);
 --realm-accent-purple: var(--asx-purple);
 --realm-accent-green: var(--asx-green);
}
body.asx-branded h1,
body.asx-branded h2,
body.asx-branded .as-title,
body.asx-branded [class*="title"]:not([class*="subtitle"]):not(input):not(textarea) {
 font-family: var(--asx-font-display) !important;
 letter-spacing: 0.08em !important;
}
body.asx-branded .concert-live-badge,
body.asx-branded .live-badge,
body.asx-branded [class*="-live-"] {
 background: linear-gradient(135deg, var(--asx-m), var(--asx-red)) !important;
 border-color: rgba(255, 45, 213, 0.55) !important;
}
body.asx-branded .concert-reserve,
body.asx-branded .reserve-btn,
body.asx-branded button[class*="cta"]:not([class*="cta-secondary"]) {
 background: linear-gradient(180deg, rgba(0, 229, 255, 0.22), rgba(0, 229, 255, 0.08)) !important;
 border: 1px solid var(--asx-border-3) !important;
 color: var(--asx-fg-1) !important;
 font-family: var(--asx-font-display) !important;
 letter-spacing: 0.18em !important;
}
body.asx-branded .concert-reserve:hover,
body.asx-branded .reserve-btn:hover {
 background: linear-gradient(180deg, rgba(0, 229, 255, 0.35), rgba(0, 229, 255, 0.12)) !important;
 border-color: rgba(0, 229, 255, 0.7) !important;
 filter: brightness(1.08) !important;
}
body.asx-branded.realm-music-hall {
 background:
 radial-gradient(circle at 50% 30%, rgba(0, 229, 255, 0.08), transparent 60%),
 radial-gradient(circle at 80% 80%, rgba(255, 45, 213, 0.06), transparent 50%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
body.asx-branded.realm-comedy-hall {
 background:
 radial-gradient(circle at 30% 30%, rgba(255, 45, 213, 0.08), transparent 60%),
 radial-gradient(circle at 80% 70%, rgba(255, 200, 70, 0.04), transparent 50%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
body.asx-branded.realm-theater {
 background:
 radial-gradient(circle at 40% 30%, rgba(167, 139, 250, 0.08), transparent 60%),
 radial-gradient(circle at 80% 80%, rgba(255, 45, 213, 0.05), transparent 50%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
body.asx-branded.realm-gallery-talk,
body.asx-branded.realm-learning-hall {
 background:
 radial-gradient(circle at 30% 30%, rgba(0, 229, 255, 0.06), transparent 60%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
body.asx-branded.realm-bounty-board {
 background:
 radial-gradient(circle at 50% 30%, rgba(255, 200, 70, 0.08), transparent 60%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
body.asx-branded.realm-founder {
 background: linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-3)) !important;
 color: var(--asx-fg-1) !important;
}
body.asx-branded.realm-wilderness {
 background:
 radial-gradient(circle at 30% 70%, rgba(34, 201, 151, 0.08), transparent 60%),
 radial-gradient(circle at 70% 20%, rgba(0, 229, 255, 0.05), transparent 50%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
body.asx-branded.realm-marketplace {
 background:
 radial-gradient(circle at 50% 30%, rgba(0, 229, 255, 0.08), transparent 60%),
 radial-gradient(circle at 80% 80%, rgba(255, 200, 70, 0.06), transparent 50%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
body.asx-branded.realm-studio,
body.asx-branded.realm-creator {
 background:
 radial-gradient(circle at 30% 30%, rgba(255, 45, 213, 0.06), transparent 60%),
 radial-gradient(circle at 80% 70%, rgba(0, 229, 255, 0.06), transparent 50%),
 linear-gradient(135deg, var(--asx-bg-0), var(--asx-bg-1)) !important;
}
.asx-brand-mark {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.3rem 0.65rem;
 background: var(--asx-glass-1);
 border: 1px solid var(--asx-border-2);
 border-radius: var(--asx-radius-pill);
 font-family: var(--asx-font-display);
 font-size: var(--asx-text-xs);
 letter-spacing: 0.32em;
 text-transform: uppercase;
 color: var(--asx-c);
 font-weight: 700;
 text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}
.asx-surface {
 background: var(--asx-glass-1);
 border: 1px solid var(--asx-border-2);
 border-radius: var(--asx-radius-md);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 box-shadow: var(--asx-shadow-sm);
 transition: all var(--asx-motion-2) var(--asx-ease);
}
.asx-surface:hover {
 border-color: var(--asx-border-3);
 box-shadow: var(--asx-shadow-md), var(--asx-glow-cyan);
 transform: translateY(-1px);
}
.asx-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
 padding: 0.55rem 1.1rem;
 background: linear-gradient(180deg, rgba(0, 229, 255, 0.22), rgba(0, 229, 255, 0.06));
 border: 1px solid var(--asx-border-3);
 border-radius: var(--asx-radius-sm);
 color: var(--asx-fg-1);
 font-family: var(--asx-font-display);
 font-size: var(--asx-text-sm);
 letter-spacing: 0.22em;
 text-transform: uppercase;
 font-weight: 700;
 cursor: pointer;
 transition: all var(--asx-motion-2) var(--asx-ease);
}
.asx-btn:hover {
 background: linear-gradient(180deg, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.12));
 border-color: rgba(0, 229, 255, 0.7);
 box-shadow: var(--asx-glow-cyan);
 transform: translateY(-1px);
}
.asx-btn:active { transform: scale(0.97); }
.asx-btn-magenta {
 background: linear-gradient(180deg, rgba(255, 45, 213, 0.22), rgba(255, 45, 213, 0.06));
 border-color: rgba(255, 45, 213, 0.45);
}
.asx-btn-gold {
 background: linear-gradient(180deg, rgba(255, 200, 70, 0.22), rgba(255, 200, 70, 0.06));
 border-color: rgba(255, 200, 70, 0.45);
 color: #ffe9a8;
}
.asx-noise::before {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 9999;
 opacity: 0.03;
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
 mix-blend-mode: overlay;
}
body.asx-branded #loading-overlay {
 background: var(--asx-bg-0) !important;
}
body.asx-branded .loading-text {
 color: var(--asx-c) !important;
 font-family: var(--asx-font-display) !important;
 letter-spacing: 0.32em !important;
 text-shadow: var(--asx-glow-cyan);
}
body.asx-branded .loading-bar-inner {
 background: linear-gradient(90deg, var(--asx-c), var(--asx-m)) !important;
 box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}
body.asx-branded #snx-pill {
 background: var(--asx-glass-2) !important;
 border-color: var(--asx-border-2) !important;
 color: var(--asx-c) !important;
 font-family: var(--asx-font-display) !important;
 text-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
}
body.asx-branded ::-webkit-scrollbar { width: 8px; height: 8px; }
body.asx-branded ::-webkit-scrollbar-track { background: rgba(3, 3, 18, 0.4); }
body.asx-branded ::-webkit-scrollbar-thumb {
 background: rgba(0, 229, 255, 0.18);
 border-radius: 4px;
}
body.asx-branded ::-webkit-scrollbar-thumb:hover {
 background: rgba(0, 229, 255, 0.35);
}
body.asx-branded ::selection {
 background: rgba(0, 229, 255, 0.32);
 color: var(--asx-fg-1);
 text-shadow: var(--asx-glow-cyan);
}