:root{--channel-equation-background:var(--secondary);--channel-equation-shadow:inset 0 .5px 0 0 #0000001a, inset 0 -.5px 0 0 #0000001a}@supports (color:lab(0% 0 0)){:root{--channel-equation-shadow:inset 0 .5px 0 0 lab(0% 0 0/.1), inset 0 -.5px 0 0 lab(0% 0 0/.1)}}.dark{--channel-equation-background:#ffffff0a;--channel-equation-shadow:inset 0 .5px 0 0 #ffffff0f, inset 0 -.5px 0 0 #ffffff0f}@supports (color:lab(0% 0 0)){.dark{--channel-equation-background:lab(100% 0 0/.04);--channel-equation-shadow:inset 0 .5px 0 0 lab(100% 0 0/.06), inset 0 -.5px 0 0 lab(100% 0 0/.06)}}
.maker-icon{pointer-events:none;flex-shrink:0;width:58px;height:58px;position:relative}.maker-icon-shell{width:100%;height:100%;box-shadow:0 0 0 .5px #0000001a, 0 3px 6px -2px #00000029, 0 1px 1px 0 #0000005c, 0 6px 20px -7px var(--maker-icon-glow-near,var(--gray-1500)), 0 46px 90px -7px var(--maker-icon-glow-far,var(--gray-700));border-radius:12px}.maker-icon-face{width:100%;height:100%;box-shadow:inset 0 1.5px 0 0 var(--white), inset 0 0 0 1px #fff6;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;padding:6px;display:flex;position:relative;overflow:hidden}.maker-icon-plate{border-radius:inherit;background-image:linear-gradient(in oklab 180deg, var(--gray-200) 0%,  var(--gray-600) 100% );position:absolute;inset:0}.maker-icon-gem{z-index:1;box-sizing:border-box;background-clip:padding-box;background-image:linear-gradient(in oklab 135.55deg, var(--gray-400) 0%,  var(--gray-500) 8.333%, var(--gray-600) 16.667%, var(--gray-700) 25%, var(--gray-800) 33.333%, var(--gray-900) 41.667%, var(--gray-1000) 50%, var(--gray-1100) 58.333%, var(--gray-1200) 66.667%, var(--gray-1300) 75%, var(--gray-1400) 83.333%, var(--gray-1500) 91.667%, var(--gray-1600) 100% );border:.75px solid #ffffff7d;border-radius:8px;flex-shrink:0;width:44px;height:44px;position:relative;overflow:hidden;box-shadow:inset 0 0 .5px 1px #0000002b;box-shadow:inset 0 0 .5px 1px lab(0% 0 0/.17)}.maker-icon-rim{display:none}.dark .maker-icon-shell{box-sizing:border-box;background:linear-gradient(in oklab 180deg, var(--gray-1600) 0%,  var(--gray-1800) 100% );box-shadow:inset 0 1px 0 0 #ffffff47, 0 0 0 .5px #000, 0 3px 6px -2px #000000eb, 0 1px 1px 0 #0000005c, 0 6px 20px -7px var(--maker-icon-glow-near,var(--gray-1500)), 0 46px 90px -7px var(--maker-icon-glow-far,var(--gray-700));border:none;border-radius:12px;justify-content:center;align-items:center;padding:6px;display:flex;overflow:hidden}.dark .maker-icon-face{width:auto;height:auto;box-shadow:none;background:0 0;border:none;padding:0;overflow:visible}.dark .maker-icon-plate,.dark .maker-icon-rim{display:none}.dark .maker-icon-gem{background-image:linear-gradient(in oklab 143.13deg, var(--gray-1400) 0%,  var(--gray-1500) 16.667%, var(--gray-1600) 33.333%, var(--gray-1700) 50%, var(--gray-1800) 66.667%, var(--gray-1900) 83.333%, var(--gray-2000) 100% );border-color:#ffffff1f;box-shadow:inset 0 0 .5px 1px #00000036;box-shadow:inset 0 0 .5px 1px lab(0% 0 0/.21)}
.palette-swatch{z-index:0;background-color:var(--ramp-swatch);transform-origin:50%;transition:transform var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out);position:relative;transform:translateY(0)scale(1)}@media (hover:hover){.palette-swatch:hover,.palette-swatch[data-active]{z-index:1;transform:translateY(-3px)scale(1.12);box-shadow:inset 0 0 0 .5px #00000038;box-shadow:inset 0 0 0 .5px lab(0% 0 0/.22)}.dark .palette-swatch:hover,.dark .palette-swatch[data-active]{box-shadow:inset 0 0 0 .5px #ffffff52;box-shadow:inset 0 0 0 .5px lab(100% 0 0/.32)}}.palette-swatch[data-active]{z-index:1;box-shadow:inset 0 0 0 .5px #00000038;box-shadow:inset 0 0 0 .5px lab(0% 0 0/.22)}.dark .palette-swatch[data-active]{box-shadow:inset 0 0 0 .5px #ffffff52;box-shadow:inset 0 0 0 .5px lab(100% 0 0/.32)}@media (prefers-reduced-motion:reduce){.palette-swatch,.palette-swatch:hover,.palette-swatch[data-active]{transition:box-shadow var(--duration-quick) var(--ease-out);transform:none}}