.color-studio-module__9Z8CpW__field{background:#fff;border:1px solid #00000026;border-radius:5px;height:44px;padding:0 12px;font-size:13px;font-weight:400}.color-studio-module__9Z8CpW__field:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.color-studio-module__9Z8CpW__field:where(input){padding-left:40px}.color-studio-module__9Z8CpW__grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:8px;display:grid}.color-studio-module__9Z8CpW__swatch{border-radius:2px;height:138px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1);position:relative}.color-studio-module__9Z8CpW__selected{box-shadow:inset 0 0 0 2px var(--primary)}@media (hover:hover){.color-studio-module__9Z8CpW__swatch:hover{z-index:2;transform:scale(1.06);box-shadow:0 14px 28px -10px #0005}.color-studio-module__9Z8CpW__selected:hover{box-shadow:inset 0 0 0 2px var(--primary), 0 14px 28px -10px #0005}}.color-studio-module__9Z8CpW__detail{grid-column:1/-1;grid-template-rows:1fr;margin-bottom:16px;animation:.5s cubic-bezier(.22,1,.36,1) both color-studio-module__9Z8CpW__detailOpen;display:grid}.color-studio-module__9Z8CpW__detailClip{min-height:0;overflow:hidden}.color-studio-module__9Z8CpW__detailBody{background:#fff;border:1px solid #0000001a;grid-template-columns:1.15fr 1fr;gap:48px;padding:40px;animation:.45s cubic-bezier(.22,1,.36,1) .12s both color-studio-module__9Z8CpW__detailContentIn;display:grid;position:relative}.color-studio-module__9Z8CpW__detailSwap{animation:none}.color-studio-module__9Z8CpW__detailSwap .color-studio-module__9Z8CpW__detailBody{animation:.35s ease-out both color-studio-module__9Z8CpW__detailContentSwap}.color-studio-module__9Z8CpW__detailClosing{pointer-events:none;animation:.32s cubic-bezier(.4,0,.2,1) both color-studio-module__9Z8CpW__detailClose}.color-studio-module__9Z8CpW__detailClosing .color-studio-module__9Z8CpW__detailBody{animation:none}@keyframes color-studio-module__9Z8CpW__detailOpen{0%{opacity:0;grid-template-rows:0fr;margin-bottom:0}to{opacity:1;grid-template-rows:1fr;margin-bottom:16px}}@keyframes color-studio-module__9Z8CpW__detailClose{0%{opacity:1;grid-template-rows:1fr;margin-bottom:16px}to{opacity:0;grid-template-rows:0fr;margin-bottom:0}}@keyframes color-studio-module__9Z8CpW__detailContentIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes color-studio-module__9Z8CpW__detailContentSwap{0%{opacity:.35}to{opacity:1}}@media (prefers-reduced-motion:reduce){.color-studio-module__9Z8CpW__swatch,.color-studio-module__9Z8CpW__detail,.color-studio-module__9Z8CpW__detailBody{transition:none;animation:none!important}.color-studio-module__9Z8CpW__swatch:hover{transform:none}}.color-studio-module__9Z8CpW__swatch{min-width:0}@media (max-width:1023px){.color-studio-module__9Z8CpW__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.color-studio-module__9Z8CpW__detailBody{gap:24px;padding:32px 24px}}@media (max-width:639px){.color-studio-module__9Z8CpW__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-studio-module__9Z8CpW__swatch{height:128px}.color-studio-module__9Z8CpW__detailBody{grid-template-columns:1fr;gap:24px;padding:44px 16px 24px}}