@property --pointer-x{syntax:"<number>";inherits:false;initial-value:.5}@property --pointer-y{syntax:"<number>";inherits:false;initial-value:.5}.gradient-demos-module__xLfUUq__pointerSurface{cursor:crosshair;touch-action:none}.gradient-demos-module__xLfUUq__pointerSurface:not(:hover,:active),.gradient-demos-module__xLfUUq__layeredBox:not(:hover,:active){transition:--pointer-x .25s var(--ease-out-cubic),--pointer-y .25s var(--ease-out-cubic)}.gradient-demos-module__xLfUUq__typesContainer{gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}@media (max-width:480px){.gradient-demos-module__xLfUUq__typesContainer{gap:var(--space-3)}}.gradient-demos-module__xLfUUq__gradientCard{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.gradient-demos-module__xLfUUq__gradientBox{height:120px;box-shadow:var(--ring-weak);border-radius:12px}.gradient-demos-module__xLfUUq__gradientLabel{color:rgb(var(--text-strong));text-align:center;font-size:14px;font-weight:500}.gradient-demos-module__xLfUUq__gradientDescription{color:rgb(var(--text-weak));text-align:center;text-wrap:pretty;font-size:12px;line-height:1.4}.gradient-demos-module__xLfUUq__linearGradient{background:linear-gradient(calc(var(--pointer-x)*360deg),#6366f1,#ef4444)}.gradient-demos-module__xLfUUq__radialGradient{background:radial-gradient(circle at calc(var(--pointer-x)*100%)calc(var(--pointer-y)*100%),#6366f1,#22c55e)}.gradient-demos-module__xLfUUq__conicGradient{background:conic-gradient(from calc(var(--pointer-x)*360deg)at calc(var(--pointer-x)*100%)calc(var(--pointer-y)*100%),#6366f1,#ef4444,#f59e0b,#22c55e,#6366f1)}.gradient-demos-module__xLfUUq__colorSpaceContainer{gap:var(--space-6);flex-direction:column;width:100%;display:flex}.gradient-demos-module__xLfUUq__segmented{justify-content:center;gap:var(--space-1);padding:var(--space-1);background:rgb(var(--fill-weak));border-radius:10px;flex-wrap:wrap;align-self:center;display:flex}.gradient-demos-module__xLfUUq__segment{min-height:32px;padding:0 var(--space-3);font:inherit;color:rgb(var(--text-weak));cursor:pointer;transition:background-color var(--duration-fast)var(--ease-out-cubic),color var(--duration-fast)var(--ease-out-cubic);background:0 0;border:1px solid #0000;border-radius:7px;align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}@media (hover:hover) and (pointer:fine){.gradient-demos-module__xLfUUq__segment:hover{color:rgb(var(--text-strong))}}.gradient-demos-module__xLfUUq__segment[aria-pressed=true]{color:rgb(var(--text-strong));background:rgb(var(--background-base));box-shadow:var(--ring-weak)}.gradient-demos-module__xLfUUq__hueToggle{border-radius:8px;align-self:auto;padding:2px}.gradient-demos-module__xLfUUq__hueToggle .gradient-demos-module__xLfUUq__segment{min-height:26px;padding:0 var(--space-2);border-radius:6px}.gradient-demos-module__xLfUUq__segmentChip{border-radius:50%;flex-shrink:0;width:12px;height:12px;box-shadow:inset 0 0 0 1px #0000001a}.gradient-demos-module__xLfUUq__colorSpaceRow{gap:var(--space-2);flex-direction:column;display:flex}.gradient-demos-module__xLfUUq__colorSpaceHeader{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.gradient-demos-module__xLfUUq__colorSpaceTitle{align-items:center;gap:var(--space-2);flex-wrap:wrap;min-width:0;display:flex}.gradient-demos-module__xLfUUq__colorSpaceLabel{color:rgb(var(--text-strong));font-size:13px;font-weight:500}.gradient-demos-module__xLfUUq__midpoint{align-items:center;gap:6px;display:inline-flex}.gradient-demos-module__xLfUUq__midpointLabel{color:rgb(var(--text-weak));font-variant-numeric:tabular-nums;font-size:12px}.gradient-demos-module__xLfUUq__midpointSwatch{width:20px;height:20px;box-shadow:var(--ring-weak);border-radius:6px;flex-shrink:0}.gradient-demos-module__xLfUUq__colorSpaceGradient{height:56px;box-shadow:var(--ring-weak);border-radius:12px}.gradient-demos-module__xLfUUq__colorSpaceNote{color:rgb(var(--text-weak));text-wrap:pretty;margin:0;font-size:12px;line-height:1.45}.gradient-demos-module__xLfUUq__srgb{background:linear-gradient(to right in srgb,var(--from),var(--to))}.gradient-demos-module__xLfUUq__oklab{background:linear-gradient(to right in oklab,var(--from),var(--to))}.gradient-demos-module__xLfUUq__oklch{background:linear-gradient(to right in oklch,var(--from),var(--to))}.gradient-demos-module__xLfUUq__oklchLonger{background:linear-gradient(to right in oklch longer hue,var(--from),var(--to))}.gradient-demos-module__xLfUUq__srgbMid{background:color-mix(in srgb,var(--from),var(--to))}.gradient-demos-module__xLfUUq__oklabMid{background:color-mix(in oklab,var(--from),var(--to))}.gradient-demos-module__xLfUUq__oklchMid{background:color-mix(in oklch,var(--from),var(--to))}.gradient-demos-module__xLfUUq__oklchLongerMid{background:color-mix(in oklch longer hue,var(--from),var(--to))}.gradient-demos-module__xLfUUq__supportNote{color:rgb(var(--text-weak));margin:0;font-size:12px;display:none}@supports not (background-image:linear-gradient(in oklch, red, blue)){.gradient-demos-module__xLfUUq__srgb,.gradient-demos-module__xLfUUq__oklab,.gradient-demos-module__xLfUUq__oklch,.gradient-demos-module__xLfUUq__oklchLonger{background:linear-gradient(to right,var(--from),var(--to))}.gradient-demos-module__xLfUUq__midpoint,.gradient-demos-module__xLfUUq__hueToggle{display:none}.gradient-demos-module__xLfUUq__supportNote{display:block}}@supports not (color:color-mix(in oklch, red, blue)){.gradient-demos-module__xLfUUq__midpoint{display:none}}.gradient-demos-module__xLfUUq__animatedContainer{gap:var(--space-4);flex-direction:column;width:100%;display:flex}.gradient-demos-module__xLfUUq__animatedLabel{color:rgb(var(--text-weak));text-align:center;text-wrap:pretty;font-size:12px;line-height:1.4}.gradient-demos-module__xLfUUq__reducedOnly{display:none}.gradient-demos-module__xLfUUq__animatedGradient{height:160px;box-shadow:var(--ring-weak);background-image:linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#ff6b6b);background-repeat:repeat-x;background-size:200% 100%;border-radius:12px;animation:12s linear infinite gradient-demos-module__xLfUUq__gradientSlide}@keyframes gradient-demos-module__xLfUUq__gradientSlide{0%{background-position:0 0}to{background-position:200% 0}}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.gradient-demos-module__xLfUUq__borderCard{min-height:160px;padding:var(--space-6);background:linear-gradient(rgb(var(--background-raised)),rgb(var(--background-raised)))padding-box,conic-gradient(from var(--angle),#ff6b6b,#feca57,#48dbfb,#ff9ff3,#ff6b6b)border-box;justify-content:center;align-items:center;gap:var(--space-2);text-align:center;border:2px solid #0000;border-radius:14px;flex-direction:column;animation:4s linear infinite gradient-demos-module__xLfUUq__spinAngle;display:flex}@keyframes gradient-demos-module__xLfUUq__spinAngle{to{--angle:360deg}}.gradient-demos-module__xLfUUq__borderTitle{color:rgb(var(--text-strong));font-size:15px;font-weight:500}.gradient-demos-module__xLfUUq__borderCode{color:rgb(var(--text-weak));overflow-wrap:anywhere;font-size:12px}@media (prefers-reduced-motion:reduce){.gradient-demos-module__xLfUUq__animatedGradient{background-position:50% 0;animation:none}.gradient-demos-module__xLfUUq__borderCard{--angle:135deg;animation:none}.gradient-demos-module__xLfUUq__motionOnly{display:none}.gradient-demos-module__xLfUUq__reducedOnly{display:inline}}.gradient-demos-module__xLfUUq__layeredContainer{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}@media (max-width:480px){.gradient-demos-module__xLfUUq__layeredContainer{grid-template-columns:minmax(0,1fr)}}.gradient-demos-module__xLfUUq__layeredCard{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.gradient-demos-module__xLfUUq__layeredBox{height:140px;box-shadow:var(--ring-weak);border-radius:12px}.gradient-demos-module__xLfUUq__layeredLabel{color:rgb(var(--text-strong));text-align:center;font-size:14px;font-weight:500}.gradient-demos-module__xLfUUq__layeredDescription{color:rgb(var(--text-weak));text-align:center;text-wrap:pretty;font-size:12px;line-height:1.4}.gradient-demos-module__xLfUUq__meshGradient{--offset-x:calc((var(--pointer-x) - .5)*20%);--offset-y:calc((var(--pointer-y) - .5)*20%);background:radial-gradient(at calc(40% + var(--offset-x))calc(20% + var(--offset-y)),#ff6b6bcc 0px,transparent 50%),radial-gradient(at calc(80% - var(--offset-x))calc(0% + var(--offset-y)),#48dbfbcc 0px,transparent 50%),radial-gradient(at calc(0% + var(--offset-x))calc(50% + var(--offset-y)),#feca57cc 0px,transparent 50%),radial-gradient(at calc(80% - var(--offset-x))calc(50% - var(--offset-y)),#ff9ff3cc 0px,transparent 50%),radial-gradient(at calc(0% + var(--offset-x))calc(100% - var(--offset-y)),#48dbfbcc 0px,transparent 50%),radial-gradient(at calc(80% - var(--offset-x))calc(100% - var(--offset-y)),#ff6b6bcc 0px,transparent 50%),linear-gradient(180deg,#1a1a2e 0%,#16213e 100%)}.gradient-demos-module__xLfUUq__stripedOverlay{background:repeating-linear-gradient(calc(45deg + (var(--pointer-x) - .5)*90deg),transparent 0 10px,#ffffff1f 10px 20px),linear-gradient(calc(135deg + (var(--pointer-y) - .5)*60deg),#6366f1,#ef4444)}.gradient-demos-module__xLfUUq__noiseTexture{background:linear-gradient(calc(135deg + (var(--pointer-x) - .5)*60deg),#667eea 0%,#764ba2 50%,#f093fb 100%);background-size:200% 200%;background-position:calc(var(--pointer-x)*100%)calc(var(--pointer-y)*100%);position:relative}.gradient-demos-module__xLfUUq__noiseTexture:after{content:"";border-radius:inherit;opacity:.2;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px 200px;position:absolute;inset:0}.gradient-demos-module__xLfUUq__glassScene{background:radial-gradient(circle at 22% 30%,#ff6b6b 0 26px,#0000 27px),radial-gradient(circle at 78% 72%,#48dbfb 0 32px,#0000 33px),radial-gradient(circle at 60% 18%,#feca57 0 18px,#0000 19px),repeating-linear-gradient(-45deg,#ffffff1a 0 6px,#0000 6px 16px),linear-gradient(135deg,#3b2f7a,#16213e);place-items:center;display:grid;position:relative;overflow:hidden}.gradient-demos-module__xLfUUq__glassPanel{width:64%;padding:var(--space-4)var(--space-3);-webkit-backdrop-filter:blur(10px)saturate(140%);backdrop-filter:blur(10px)saturate(140%);text-align:center;background:#ffffff24;border-radius:10px;box-shadow:inset 0 0 0 1px #ffffff40,0 8px 24px #00000040}.gradient-demos-module__xLfUUq__glassText{color:#fff;text-shadow:0 1px 2px #00000059;font-size:13px;font-weight:600}@media (forced-colors:active){.gradient-demos-module__xLfUUq__gradientBox,.gradient-demos-module__xLfUUq__colorSpaceGradient,.gradient-demos-module__xLfUUq__midpointSwatch,.gradient-demos-module__xLfUUq__segmentChip,.gradient-demos-module__xLfUUq__layeredBox,.gradient-demos-module__xLfUUq__animatedGradient{forced-color-adjust:none}.gradient-demos-module__xLfUUq__gradientBox,.gradient-demos-module__xLfUUq__colorSpaceGradient,.gradient-demos-module__xLfUUq__midpointSwatch,.gradient-demos-module__xLfUUq__layeredBox,.gradient-demos-module__xLfUUq__animatedGradient{border:1px solid canvastext}.gradient-demos-module__xLfUUq__segment{border-color:buttontext}.gradient-demos-module__xLfUUq__segment[aria-pressed=true]{forced-color-adjust:none;color:highlighttext;background:highlight;border-color:highlight}}