.ColorsRoute{grid-template-rows:repeat(3,auto);gap:16px;padding:16px;display:grid}.ColorsRoute__TopPanel{grid-template-columns:1fr 1fr;display:grid}.ColorsRoute__ColorPicker{grid-template-rows:auto auto;grid-template-columns:1fr 1fr 1fr;gap:32px;padding:32px;display:grid}.ColorsRoute__SliderPicker{grid-column:1/span 3}.ColorsRoute--ColorPalette{flex-flow:row;display:flex}.ColorSection{border:1px dotted #000;border-radius:8px;flex-direction:column;align-items:stretch;display:flex}.ColorSection__Label{font-size:18px;font-weight:700}.PrimaryColorSection{grid-template-rows:auto auto;grid-template-columns:1fr 1fr;gap:16px;padding:16px;display:grid}.PrimaryColorSection__ColorPicker{grid-template-columns:auto 1fr;gap:32px;display:grid}.PrimaryColorSection__ColorPreviewContainer{place-self:flex-end flex-start}.PrimaryColorSection__ImageContainer{width:500px;height:250px}.PrimaryColorSection__Image{object-fit:contain;width:100%;height:100%}.PrimaryColorSection__ImageQuantizer{flex-direction:column;align-items:center;gap:16px;display:flex}.PrimaryColorSection__GeneratedColors{grid-template-columns:repeat(5,auto);justify-content:space-around;gap:8px;display:grid}.ColorPreview{flex-direction:column;align-items:center;gap:8px;display:flex}.ColorPreview--Small .ColorPreview__Color{width:50px;height:50px}.ColorPreview--Small .ColorPreview__ColorHex{font-size:13px}.ColorPreview__Label{align-self:flex-start;font-size:16px;font-weight:700}.ColorPreview__Color{border:1px solid #000;width:100px;height:100px}.ColorPreview__ColorHex{font-size:16px}.RangeControl{flex-direction:column;align-items:stretch;gap:4px;display:flex}.RangeControl__Label{padding-left:4px;font-size:16px;font-weight:700;line-height:1}.RangeControl__Control{grid-template-columns:1fr auto;gap:8px;display:grid}.RangeControl__Value{white-space:nowrap;min-width:70px;font-size:16px;font-weight:700}.ChromaSelectorRegion{border:1px dotted #000;border-radius:8px;flex-flow:column;align-items:stretch;gap:16px;padding:16px;display:flex}.ChromaSelectorRegion__Caption{white-space:nowrap;font-size:16px;font-weight:700}.ColorHarmonyControl{border:1px dotted #000;border-radius:8px;flex-direction:column;align-items:stretch;gap:16px;padding:16px;display:flex}.ColorHarmonyControl__Caption{white-space:nowrap;font-size:16px;font-weight:700}.WithLabel{grid-template-rows:auto auto;gap:4px;display:grid}.WithLabel__Label{white-space:nowrap;font-size:16px;font-weight:700}.OtherColorSection{grid-template-columns:auto auto 1fr;gap:8px;display:grid}.OtherColorSection__ColorPreview{flex-direction:row;justify-content:center;align-items:center;gap:16px;padding:16px;display:flex}.ColorPalettePreview{flex-flow:row;display:flex}.ColorPalettePreview__Color{flex-direction:row;justify-content:center;align-items:center;width:80px;height:50px;font-size:14px;font-weight:700;display:flex}.TonalPaletteSection{flex-direction:column;gap:8px;display:flex}#editor{border:1px solid #ccc;width:100%;height:400px;position:relative}.EmptyRoute{flex-direction:row;justify-content:center;align-items:center;height:100vh;display:flex}.EmptyRoute__Message{color:#000;font-size:48px;font-weight:700}.SidebareMenu{color:#fff;background-color:#00315d;flex-direction:column;align-items:flex-start;gap:10px;padding:30px 50px;display:flex}.SidebareMenu__Item{color:#fff;font-weight:700;text-decoration:none;position:relative}.SidebareMenu__Item:after{content:"";border-bottom:2px solid #fff;width:0;height:0;transition:width .15s;position:absolute;bottom:-1px;left:0}.SidebareMenu__Item:hover:after{width:100%;transition:width .3s}.App{background-color:#d4e3ff;grid-template-rows:100vh;grid-template-columns:auto 1fr;display:grid}.App__ContentScroller{max-height:100vh;overflow:hidden scroll}html,body,#root{font-optical-sizing:auto;height:100vh;margin:0;padding:0;font-family:Roboto,sans-serif;font-size:24px;font-style:normal}