[data-tool=shader-gradient][data-theme=dark],[data-tool=shader-gradient]:not([data-theme]){--sg-bg:#0a0a0b;--sg-surface:#101113;--sg-surface-hover:#18181d;--sg-border:#ffffff14;--sg-border-subtle:#ffffff0d;--sg-text:#d0d6e0;--sg-text-secondary:#8a8f98;--sg-text-muted:#62666d;--sg-overlay:#000000eb;--sg-card-shadow:0 2px 8px #0000004d;--sg-accent:#7c3aed;--sg-accent-light:#a855f7;--sg-accent-glow:#7c3aed4d;--sg-accent-muted:#7c3aed1a;--sg-accent-border:#7c3aed33;--sg-slider-track:#0e0e12;--sg-slider-fill:#2a2a32;--sg-slider-thumb:#4a4a55;--sg-slider-label:#7a7a84;--sg-control-label:#7a7a84;--sg-control-active-bg:#ffffff14;--sg-control-active-text:#d0d6e0;--sg-control-active-border:#ffffff1f;--sg-toggle-active-bg:#4a4a58;--sg-toggle-inactive-bg:#18181e;--sg-toggle-active-thumb:#fff;--sg-toggle-inactive-thumb:#5a5a64;--sg-helper-text:#3a3a44;--sg-glass-bg:#ffffff0a;--sg-glass-bg-hover:#ffffff0f;--sg-glass-bg-active:#ffffff1a;--sg-glass-border:#ffffff0f;--sg-glass-border-hover:#ffffff1a;--sg-glass-glow:#ffffff0d;--sg-glass-text:#ffffff80;--sg-glass-text-hover:#ffffffb3;--sg-glass-text-subtle:#fff6;--sg-glass-text-faint:#ffffff40;--sg-glass-text-muted:#ffffff4d;--sg-glass-divider:#ffffff14;--sg-glass-pill-count:#ffffff1a;--sg-glass-pill-count-active:#fff3;--sg-glass-badge:#fff3;--sg-overlay-bg:#0009;--sg-card-footer-bg:#0a0a0b;--sg-nav-active-bg:#ffffff1f;--sg-nav-active-glow:0 0 12px #ffffff0f;--sg-nav-inactive-text:#fff6;--sg-nav-inactive-hover:#ffffffb3;--sg-btn-primary-bg:#fff;--sg-btn-primary-text:#000;--sg-btn-hover-overlay:#ffffff14;--sg-loading-dot:#fff9;--sg-scrim-btn-bg:#0000004d;--sg-scrim-btn-hover:#00000080}[data-tool=shader-gradient][data-theme=light]{--sg-bg:#fafafa;--sg-surface:#fff;--sg-surface-hover:#f5f5f5;--sg-border:#e5e5e5;--sg-border-subtle:#f0f0f0;--sg-text:#0a0a0a;--sg-text-secondary:#525252;--sg-text-muted:#a3a3a3;--sg-overlay:#ffffffe6;--sg-card-shadow:0 2px 8px #00000014;--sg-accent:#7c3aed;--sg-accent-light:#a855f7;--sg-accent-glow:#7c3aed4d;--sg-accent-muted:#7c3aed1a;--sg-accent-border:#7c3aed33;--sg-slider-track:#e5e5e5;--sg-slider-fill:#d4d4d4;--sg-slider-thumb:#a3a3a3;--sg-slider-label:#737373;--sg-control-label:#737373;--sg-control-active-bg:#00000014;--sg-control-active-text:#0a0a0a;--sg-control-active-border:#00000026;--sg-toggle-active-bg:#a3a3a3;--sg-toggle-inactive-bg:#e5e5e5;--sg-toggle-active-thumb:#fff;--sg-toggle-inactive-thumb:#a3a3a3;--sg-helper-text:#737373;--sg-glass-bg:#0000000a;--sg-glass-bg-hover:#0000000f;--sg-glass-bg-active:#0000001a;--sg-glass-border:#00000014;--sg-glass-border-hover:#00000026;--sg-glass-glow:#0000000a;--sg-glass-text:#00000080;--sg-glass-text-hover:#000000b3;--sg-glass-text-subtle:#00000073;--sg-glass-text-faint:#00000040;--sg-glass-text-muted:#0000004d;--sg-glass-divider:#00000014;--sg-glass-pill-count:#00000014;--sg-glass-pill-count-active:#00000026;--sg-glass-badge:#00000026;--sg-overlay-bg:#0006;--sg-card-footer-bg:#fff;--sg-nav-active-bg:#00000014;--sg-nav-active-glow:0 0 12px #0000000a;--sg-nav-inactive-text:#0006;--sg-nav-inactive-hover:#000000b3;--sg-btn-primary-bg:#0a0a0a;--sg-btn-primary-text:#fff;--sg-btn-hover-overlay:#0000000f;--sg-loading-dot:#00000080;--sg-scrim-btn-bg:#0000004d;--sg-scrim-btn-hover:#00000080}.shader-track{-webkit-user-select:none;user-select:none;touch-action:none}input[type=color]{-webkit-appearance:none;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.shader-panel-scroll{scrollbar-width:thin;scrollbar-color:var(--sg-border)transparent}.shader-panel-scroll::-webkit-scrollbar{width:3px}.shader-panel-scroll::-webkit-scrollbar-track{background:0 0;margin-top:4px;margin-bottom:4px}.shader-panel-scroll::-webkit-scrollbar-thumb{background:var(--sg-border);border-radius:3px;min-height:30px}.shader-panel-scroll::-webkit-scrollbar-thumb:hover{background:var(--sg-border-subtle)}.type-dropdown-scroll{scrollbar-width:thin;scrollbar-color:#ffffff14 transparent}.type-dropdown-scroll::-webkit-scrollbar{width:2px}.type-dropdown-scroll::-webkit-scrollbar-track{background:0 0;margin:6px 0}.type-dropdown-scroll::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}.shader-modes-scroll{-ms-overflow-style:none;scrollbar-width:none}.shader-modes-scroll::-webkit-scrollbar{display:none}.modal-tabs-scroll{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}.modal-tabs-scroll::-webkit-scrollbar{height:3px}.modal-tabs-scroll::-webkit-scrollbar-track{background:0 0}.modal-tabs-scroll::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.modal-tabs-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff40}.explore-scroll{overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--sg-glass-border)transparent}.explore-scroll::-webkit-scrollbar{width:4px}.explore-scroll::-webkit-scrollbar-track{background:0 0}.explore-scroll::-webkit-scrollbar-thumb{background:var(--sg-glass-border);border-radius:4px}.explore-masonry{columns:2;column-gap:12px}@media (min-width:640px){.explore-masonry{columns:3;column-gap:14px}}@media (min-width:1024px){.explore-masonry{columns:4;column-gap:14px}}@media (min-width:1280px){.explore-masonry{columns:5;column-gap:16px}}.explore-masonry--compact{columns:3}@media (min-width:640px){.explore-masonry--compact{columns:4}}@media (min-width:1024px){.explore-masonry--compact{columns:5}}@media (min-width:1280px){.explore-masonry--compact{columns:6}}.explore-masonry--comfortable{columns:2}@media (min-width:640px){.explore-masonry--comfortable{columns:2}}@media (min-width:1024px){.explore-masonry--comfortable{columns:3}}@media (min-width:1280px){.explore-masonry--comfortable{columns:4}}.explore-masonry-item{break-inside:avoid;content-visibility:auto;contain-intrinsic-size:auto 100% 180px;width:100%;margin-bottom:12px;display:inline-block}@media (min-width:640px){.explore-masonry-item{contain-intrinsic-size:auto 100% 210px;margin-bottom:14px}}@media (min-width:1280px){.explore-masonry-item{contain-intrinsic-size:auto 100% 240px;margin-bottom:16px}}.explore-card-sm{height:180px}.explore-card-md{height:240px}.explore-card-lg{height:320px}@media (min-width:640px){.explore-card-sm{height:210px}.explore-card-md{height:290px}.explore-card-lg{height:400px}}@media (min-width:1280px){.explore-card-sm{height:240px}.explore-card-md{height:330px}.explore-card-lg{height:460px}}.explore-card{border-radius:12px;transition:box-shadow .35s;overflow:visible}.explore-card:hover{box-shadow:0 0 30px var(--sg-glass-glow)}.explore-card .explore-card-inner{clip-path:inset(0 round 12px);border-radius:12px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.explore-card:hover .explore-card-inner{transform:scale(1.03)}.explore-card:active .explore-card-inner{transform:scale(.97)}.explore-card-scrim{background:linear-gradient(#00000026 0%,#0000004d 60%,#0009 100%);border-radius:12px}.explore-card .explore-card-overlay{transition:opacity .2s}.explore-card:hover .explore-card-overlay{opacity:1!important}.explore-card .explore-card-actions{opacity:0;transition:opacity .2s,transform .2s;transform:translateY(-4px)}.explore-card:hover .explore-card-actions{opacity:1;transform:translateY(0)}.explore-card .explore-card-actions .explore-card-btn{transition:background .2s,color .2s}.explore-card .explore-card-actions .explore-card-btn:nth-child(2){transition-delay:40ms}@keyframes savePopIn{0%{transform:scale(1)}40%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes heartPop{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.4)}50%{transform:scale(.9)}70%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes explore-skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.explore-skeleton-shimmer{background:linear-gradient(90deg,var(--sg-glass-bg)25%,#ffffff0f 50%,var(--sg-glass-bg)75%);background-size:200% 100%;animation:1.8s ease-in-out infinite explore-skeleton-shimmer}@keyframes thumbnailFadeIn{0%{opacity:0}to{opacity:1}}@keyframes cardReveal{0%{opacity:0;filter:blur(1px);transform:translateY(32px)scale(.95)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}.explore-card{opacity:1}.explore-card-inner img{image-rendering:auto;-webkit-backface-visibility:hidden}.explore-card[data-reveal-pending]{opacity:0;transform:translateY(24px)scale(.97)}.explore-card[data-visible]{animation:.5s cubic-bezier(.16,1,.3,1) forwards cardReveal}.explore-section-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (min-width:640px){.explore-section-grid{grid-template-columns:repeat(4,1fr);gap:14px}}@media (min-width:1280px){.explore-section-grid{gap:16px}}.explore-section-grid .explore-card{break-inside:auto}.explore-section-grid .explore-card-md{height:220px}@media (min-width:640px){.explore-section-grid .explore-card-md{height:260px}}@media (min-width:1280px){.explore-section-grid .explore-card-md{height:300px}}.explore-mode-page-header{border-bottom:1px solid var(--sg-glass-divider);margin-bottom:8px;padding-bottom:16px}.explore-category-tabs{gap:6px;display:flex}.explore-category-tab{height:36px;color:var(--sg-glass-text);background:var(--sg-glass-bg);border:1px solid var(--sg-glass-border);cursor:pointer;white-space:nowrap;border-radius:9999px;align-items:center;padding:8px 14px;font-size:12px;font-weight:500;line-height:1;text-decoration:none;transition:all .15s;display:flex}.explore-category-tab:hover{color:var(--sg-glass-text-hover);background:var(--sg-glass-bg-hover)}.explore-category-tab[data-active=true]{color:var(--sg-text);background:var(--sg-glass-bg-active);border-color:var(--sg-glass-border-hover)}.tools-bottom-nav{isolation:isolate}.nav-dot{opacity:.6;transform-origin:50%;transform-box:fill-box;animation:none}.group\/circle:hover .nav-dot{animation:.5s ease-out both dotPulse}@keyframes dotPulse{0%{opacity:.6;transform:scale(1)}40%{opacity:1;transform:scale(1.6)}to{opacity:.8;transform:scale(1)}}.nav-export-arrow{transform-origin:50%;transform-box:fill-box;transition:transform .35s cubic-bezier(.16,1,.3,1)}.nav-export-bg{transform-origin:50%;transform-box:fill-box;transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1)}.group\/circle:hover .nav-export-arrow{transform:translate(1.5px)}.group\/circle:hover .nav-export-bg{opacity:.55;transform:translateY(-.5px)}.nav-share-arrow{transform-origin:50%;transform-box:fill-box;transition:transform .35s cubic-bezier(.16,1,.3,1)}.nav-share-bg{transform-origin:50%;transform-box:fill-box;transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1)}.group\/circle:hover .nav-share-arrow{transform:translate(1px,-1px)}.group\/circle:hover .nav-share-bg{opacity:.55}.nav-bookmark-bg{transform-origin:bottom;transform-box:fill-box;transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1)}.nav-bookmark-fg{transform-origin:100% 0;transform-box:fill-box;transition:transform .35s cubic-bezier(.16,1,.3,1)}.group\/circle:hover .nav-bookmark-bg{opacity:.6;transform:translateY(-1px)scale(1.04)}.group\/circle:hover .nav-bookmark-fg{transform:translate(.5px,-.5px)}.nav-heart-bg{transform-origin:50%;transform-box:fill-box;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}.nav-heart-plus{transform-origin:50%;transform-box:fill-box;transition:transform .4s cubic-bezier(.16,1,.3,1)}.group\/circle:hover .nav-heart-bg{opacity:.6;transform:scale(1.06)}.group\/circle:hover .nav-heart-plus{transform:rotate(90deg)}@keyframes upgrade-gradient{0%,to{background-position:0%}50%{background-position:100%}}@keyframes upgrade-border-glow{0%{background-position:0%}to{background-position:300%}}@keyframes upgrade-shimmer{0%,20%{background-position:200% 0}80%,to{background-position:-200% 0}}@keyframes pro-banner-mesh{0%,to{background-position:0 0}25%{background-position:100%}50%{background-position:50% 100%}75%{background-position:0%}}@keyframes pro-banner-colorshift{0%{opacity:.6;filter:hue-rotate()}50%{opacity:.9;filter:hue-rotate(45deg)}to{opacity:.6;filter:hue-rotate(90deg)}}@keyframes pro-banner-shimmer{0%,20%{background-position:200% 0}80%,to{background-position:-200% 0}}@keyframes pro-banner-border{0%{background-position:0%}to{background-position:300%}}@keyframes sg-next-blink{0%,to{filter:brightness();box-shadow:0 0 #7c3aed00}50%{filter:brightness(1.16);box-shadow:0 0 24px #7c3aed6b}}.sg-next-blink{animation:1.2s ease-in-out infinite sg-next-blink}.huegrid-logo-swatch{filter:blur(1px)saturate(1.6)brightness(1.2);background:linear-gradient(160deg,#1a0533 0%,#2d1b69 15%,#7c3aed 28%,#a855f7 35%,#ec4899 45%,#f472b6 52%,#c084fc 60%,#818cf8 70%,#6366f1 80%,#1e1b4b 100%) 0 0/100% 300%;animation:4s ease-in-out infinite alternate sg-aurora-wave,6s ease-in-out infinite sg-aurora-hue;position:absolute;inset:-8px}.huegrid-logo-swatch:after{content:"";mix-blend-mode:screen;background-color:#0000;background-image:radial-gradient(120% 80% at 30% 20%,#a855f7d9 0%,#0000 50%),radial-gradient(100% 120% at 70% 80%,#ec4899bf 0%,#0000 50%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:200% 200%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;animation:5s ease-in-out infinite alternate sg-aurora-bands;position:absolute;inset:0}@keyframes sg-aurora-wave{0%{background-position:0 0}50%{background-position:0%}to{background-position:0 100%}}@keyframes sg-aurora-bands{0%{background-position:0 0;transform:scale(1)rotate(0)}to{background-position:100% 100%;transform:scale(1.15)rotate(5deg)}}@keyframes sg-aurora-hue{0%{filter:hue-rotate()blur(1px)saturate(1.6)brightness(1.2)}25%{filter:hue-rotate(30deg)blur(1px)saturate(1.6)brightness(1.25)}50%{filter:hue-rotate(-20deg)blur(1px)saturate(1.6)brightness(1.3)}75%{filter:hue-rotate(15deg)blur(1px)saturate(1.6)brightness(1.25)}to{filter:hue-rotate()blur(1px)saturate(1.6)brightness(1.2)}}.sg-tab-btn{transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s,color .15s,box-shadow .15s}.sg-tab-btn:active{transform:scale(.95)}.sg-icon-btn{transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}.sg-icon-btn:active:not(:disabled){transform:scale(.88)}[data-tool=shader-gradient] .flex-wrap>button{transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s,color .15s,border-color .15s,box-shadow .15s}[data-tool=shader-gradient] .flex-wrap>button:active{transform:scale(.93)}.shader-modes-scroll>button{transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s,color .15s}.shader-modes-scroll>button:active{transform:scale(.93)}