@layer components{.shader{--shader-aspect:16 / 9;--shader-glow:1.25rem;--shader-poster-default:radial-gradient(120% 90% at 15% 20%, color-mix(in oklch, var(--chart-1) 75%, transparent), transparent 60%), radial-gradient(100% 80% at 85% 25%, color-mix(in oklch, var(--chart-3) 70%, transparent), transparent 60%), radial-gradient(110% 90% at 50% 100%, color-mix(in oklch, var(--chart-5) 65%, transparent), transparent 65%), var(--muted);aspect-ratio:var(--shader-aspect);background:var(--shader-poster,var(--shader-poster-default));background-size:cover;display:block;position:relative;overflow:hidden;&[hidden]{display:none}&>.shader-canvas{opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity .6s;display:block;position:absolute;inset:0}&[data-ready]:not([data-fallback])>.shader-canvas{opacity:1}&[data-fallback]>.shader-canvas{display:none}&:has(>img,>svg,>video){aspect-ratio:auto;background:0 0}&>:is(img,svg,video){max-width:100%;height:auto;transition:opacity .6s;display:block}&:has(>svg){inline-size:100%;&>svg{width:100%}}&[data-ready]:not([data-fallback],[data-image=blocked])>:is(img,svg,video){opacity:0}&>script{display:none}&[data-effect=warp]{--shader-poster-default:radial-gradient(90% 80% at 30% 40%, #e0548c, transparent 70%), radial-gradient(80% 70% at 75% 70%, #ffb36b, transparent 70%), #2a1a5e}&:is([data-effect=neuro-noise],[data-effect=god-rays],[data-effect=aurora],[data-effect=galaxy],[data-effect=orb],[data-effect=fluid],[data-effect=trails]){--shader-poster-default:radial-gradient(70% 60% at 50% 45%, oklch(62.2335% .210508 282.704/.35), transparent 70%), #06070f}&[data-effect=hologram]{--shader-poster-default:linear-gradient(115deg, #ff8fd8, #8fe3ff 35%, #b7ffcf 55%, #fff3a0 75%, #c9a8ff)}&:is([data-effect=liquid-metal],[data-effect=pulsing-border]){--shader-poster-default:none}&[data-effect=water]{--shader-poster-default:linear-gradient(#18a0b4, #0a4d68)}&[data-effect=fluted-glass]{--shader-poster-default:repeating-linear-gradient(90deg, #ffffff2e 0 2px, transparent 2px 7.14%), linear-gradient(120deg, #ff5f6d, #ffc371 40%, #47cacc 70%, #5b5bd6)}&[data-effect=waves]{--shader-poster-default:linear-gradient(#35548a, #f6c49c 48%, #0f7d8c 52%, #03253a)}&:is([data-effect=dot-orbit],[data-effect=topography],[data-effect=metaballs],[data-effect=dithering]){--shader-poster-default:var(--background)}&[data-effect=plasma]{--shader-poster-default:radial-gradient(70% 80% at 40% 30%, #ff006e, transparent 70%), radial-gradient(80% 80% at 80% 70%, #3a86ff, transparent 70%), #fb5607}&:is([data-effect=bokeh],[data-effect=starfield]){--shader-poster-default:radial-gradient(60% 60% at 50% 50%, oklch(70.3483% .164269 287.376/.18), transparent 70%), #07070f}&[data-effect=ripple]{--shader-poster-default:linear-gradient(#3fb8c7, #0d5c75)}&[data-effect=voronoi]{--shader-poster-default:conic-gradient(from 30deg, #d1495b, #edae49, #00798c, #30638e, #7f5a83, #d1495b)}&[data-effect=clouds]{--shader-poster-default:linear-gradient(#2f6fc4, #a9d1f5)}&[data-effect=fire]{--shader-poster-default:linear-gradient(#0a0505 35%, #b3160b 70%, #ffb21f)}&[data-effect=silk]{--shader-poster-default:linear-gradient(135deg, #2b0f3a, #7a2e8e 45%, #e07bb5 75%, #ffe3f1)}&[data-effect=nebula]{--shader-poster-default:radial-gradient(circle at 40% 45%, #f72585 0, #3a0ca3 35%, #05030d 75%)}&[data-effect=prism]{--shader-poster-default:linear-gradient(170deg, #0b0b12 40%, #ff5f5f 46%, #ffd25f 48%, #5fff8a 50%, #5fc8ff 52%, #a05fff 54%, #0b0b12 60%)}&[data-effect=matrix]{--shader-poster-default:linear-gradient(#020a04, #0b3d1a)}&[data-effect=marble]{--shader-poster-default:linear-gradient(120deg, #f4f1ec, #d9d4cc 60%, #f4f1ec)}&[data-effect=oil]{--shader-poster-default:linear-gradient(120deg, #0a0a0f, #3b2a5c 40%, #1f5c5a 60%, #1d1b2a)}&[data-effect=op-art]{--shader-poster-default:repeating-radial-gradient(circle, var(--foreground) 0 6px, var(--background) 6px 12px)}&:is([data-effect=lightning],[data-effect=crt]){--shader-poster-default:linear-gradient(#070914, #141a33)}&[data-effect=snow]{--shader-poster-default:linear-gradient(#6c8ead, #1b2a41)}&[data-effect=fireflies]{--shader-poster-default:linear-gradient(#0b2e22, #03140d)}&[data-effect=glitch]{--shader-poster-default:linear-gradient(90deg, #ff2e63, #08d9d6, #252a34, #eaeaea)}&[data-effect=caustics]{--shader-poster-default:linear-gradient(#20a4c4, #0b4f6c)}&[data-effect=smoke]{--shader-poster-default:linear-gradient(#26262e, #101014)}&[data-variant=background]{z-index:-1;aspect-ratio:auto;border-radius:inherit;pointer-events:none;position:absolute;inset:0}&[data-variant=border]{--shader-poster-default:none;inset:calc(-1 * var(--shader-glow));z-index:-1;aspect-ratio:auto;pointer-events:none;position:absolute;overflow:visible}}.shader-controls{align-content:start;gap:.75rem;min-inline-size:0;display:grid;& .shader-controls-field{gap:.375rem;min-inline-size:0;display:grid}& .shader-controls-head{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}& .slider-value{font-family:var(--font-mono);color:var(--muted-foreground);font-variant-numeric:tabular-nums;font-size:.75rem}& .shader-controls-cycle{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.25rem;display:grid;& .select{inline-size:100%;min-inline-size:0}}& .shader-controls-colors{flex-wrap:wrap;gap:.375rem;display:flex;& input[type=color]{border:1px solid var(--input);border-radius:var(--radius-sm);background:var(--background);cursor:pointer;block-size:2rem;inline-size:2rem;padding:.125rem;&:focus-visible{outline:2px solid var(--ring);outline-offset:2px}}}& .shader-controls-actions{flex-wrap:wrap;gap:.5rem;display:flex}}:where(:has(>.shader:is([data-variant=background],[data-variant=border]))){isolation:isolate;position:relative}@media (prefers-reduced-motion:reduce){.shader>.shader-canvas,.shader>:is(img,svg,video){transition:none}}@media (prefers-contrast:more){.shader[data-variant=background]{display:none}}@media (forced-colors:active){.shader{background:canvas;&>.shader-canvas{display:none}&>:is(img,svg,video){opacity:1}&:is([data-variant=background],[data-variant=border]){display:none}}}}/*# sourceMappingURL=shaders.min.css.map */