:root{--radius:0.75rem;--background:#0b0b0d;--foreground:#f7f7f8;--card:#111114;--card-foreground:#f7f7f8;--popover:#151518;--popover-foreground:#f7f7f8;--primary:#8b6cff;--primary-foreground:#ffffff;--primary-hover:#9b80ff;--brand-2:#8b6cff;--signal:#8b6cff;--signal-warm:#f4b860;--secondary:#19191d;--secondary-foreground:#f7f7f8;--muted:#18181c;--muted-foreground:#9a9aa3;--accent:#1b1b20;--accent-foreground:#f7f7f8;--elevated:#151519;--border:#29292f;--input:#34343b;--ring:#8b6cff;--shadow-sm:0 1px 0 rgba(255,255,255,0.035);--shadow-md:0 18px 54px -32px rgba(0,0,0,0.9);--shadow-lg:0 40px 100px -48px rgba(0,0,0,0.95)}body{background:var(--background)}::selection{background:color-mix(in oklab,var(--primary) 45%,transparent);color:var(--foreground)}.max-w-3xl:has(>[data-crayox-build-field]){max-width:84rem}.max-w-3xl:has(>[data-crayox-build-field])>.mb-6{max-width:58rem;margin-bottom:2rem;padding-left:1.1rem;text-align:left;border-left:2px solid var(--brand-2)}.max-w-3xl:has(>[data-crayox-build-field])>.mb-6 h1{font-family:var(--font-space-grotesk),ui-sans-serif,sans-serif;font-size:clamp(1.8rem,4vw,3.25rem);line-height:1;letter-spacing:-.055em}.crayox-field{position:relative;isolation:isolate;background:var(--background)}.crayox-field:before{content:none}.crayox-aperture{position:relative}.crayox-aperture:after{position:absolute;right:-1px;bottom:-1px;width:.6rem;height:.6rem;content:"";background:var(--signal);box-shadow:0 0 24px color-mix(in oklab,var(--signal) 55%,transparent)}.crayox-spectrum{background:linear-gradient(90deg,var(--primary),var(--brand-2) 58%,var(--signal))}.crayox-signal-text{background:linear-gradient(100deg,#ffffff 4%,#cdbfff 48%,#8df4df 92%);background-clip:text;color:transparent}.crayox-data-label{font-family:var(--font-jetbrains-mono),ui-monospace,monospace;font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}@keyframes crayox-enter{0%{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes crayox-scan{0%{transform:translateX(-115%)}to{transform:translateX(215%)}}@keyframes crayox-node{0%,to{opacity:.42;box-shadow:0 0 0 transparent}50%{opacity:1;box-shadow:0 0 22px color-mix(in oklab,var(--brand-2) 60%,transparent)}}.crayox-enter{animation:crayox-enter .36s cubic-bezier(.22,1,.36,1) both}.crayox-scan{animation:crayox-scan 2.8s linear infinite}.crayox-node-active{animation:crayox-node 1.8s ease-in-out infinite}@media (prefers-reduced-motion:reduce){.crayox-enter,.crayox-node-active,.crayox-scan{animation:none}}