:root{--color:#000;--bg-color:#f9f9f9;--hover-bg-color:#e9e9e9;--primary-color:#e66622;--muted-color:#999;--link-color:#17f;--code-color:var(--primary-color);--code-bg-color:#fff;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--code-font:Menlo,Consolas,Monaco,Lucida Console,monospace;--code-font-size:0.75rem;--bold:700;--x-bold:900;--line-height:1.5em;--line-height-heading:1.3em;--text-transform-heading:uppercase;--border-color:#000;--border-color-light:#ccc;--border-radius:6px;--border-radius-large:8px;--border-radius-xl:12px;--page-width:56rem;--sm-screen:720px}*{box-sizing:border-box}body{margin:0;background:var(--bg-color)}@media (min-width:720px){body{padding:0}}html{font-size:16px}@media (min-width:720px){html{font-size:16px}}@media (min-width:1200px){html{font-size:17px}}@media (min-width:1600px){html{font-size:18px}}body,button,input,select,textarea{font-family:var(--font);font-size:1rem;line-height:var(--line-height);-webkit-font-smoothing:antialiased}h1,h2,h3{font-weight:var(--bold);letter-spacing:-.01em;word-spacing:.01em}h1{font-size:4rem;line-height:1em;margin:0 0 12px;text-transform:uppercase;font-weight:var(--x-bold)}h2{margin-top:24px;font-size:1.75rem}h2,h3{text-align:center}h3{font-size:1.25rem;line-height:var(--line-height-heading)}@media (min-width:720px){h1{font-size:5rem}h2,h3{text-align:left}}p{margin:1em auto 1.5em;hyphens:auto;hyphenate-limit-chars:6 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:8%}p.before-list{margin-bottom:1rem}.lead{margin-bottom:1.1rem;font-size:1.1rem}@media (min-width:720px){.lead{font-size:1.25em}}ol{list-style-type:decimal;counter-reset:item}ol>li{position:relative;list-style-type:none;counter-increment:item}ol>li:before{position:absolute;left:-1.75rem;width:1.5em;padding-right:.5em;font-weight:var(--bold);text-align:right;content:counter(item) "."}ol,ul{margin:0 0 2rem;padding-left:18px}@media (min-width:720px){ol,ul{padding-left:40px}}li{margin-bottom:.5rem}strong{font-weight:var(--bold)}a{color:var(--link-color);text-decoration:none;outline:0}a:hover{text-decoration:underline}code{border-radius:var(--border-radius-large);font-family:var(--code-font);font-size:var(--code-font-size);padding:.1em .3em;position:relative}code,pre{background-color:var(--code-bg-color)}pre{border-radius:var(--border-radius-large);border:1px solid var(--border-color-light)}pre code{color:inherit;padding:0}li>code,p>code{padding:2px 6px;color:var(--code-color);border:1px solid var(--border-color-light);border-radius:var(--border-radius);line-height:12px}.code-file,li>code,p>code{font-size:var(--code-font-size)}.code-file{position:relative;top:.2rem;color:var(--muted-color);font-family:var(--code-font)}td,th{vertical-align:top;line-height:var(--line-height)}th{text-align:left}.button{display:block;padding:.5rem 2rem;margin-bottom:8px;border:2px solid var(--link-color);color:var(--link-color);text-transform:uppercase;letter-spacing:.05em;border-radius:var(--border-radius-large);vertical-align:middle;white-space:nowrap;font-weight:var(--bold);background-color:#fff}.button:hover{color:#fff;background-color:var(--link-color);text-decoration:none}@media (min-width:720px){.button{display:inline-block;margin-right:8px}}hr{width:348px;border:0;border-top:1px solid var(--border-color-light)}@media (min-width:720px){hr{width:480px;margin-left:0}}.column{max-width:var(--page-width);margin:0 auto;padding:0 16px}@media (min-width:720px){.column{display:flex}}.header{color:var(--color);padding-top:5rem;text-align:center}.logo-credit{display:block;margin-bottom:.2em;color:var(--muted-color);font-weight:var(--bold)}@media (min-width:720px){.header{text-align:left}.logo-credit{position:relative;top:-6px}}.sidebar{display:none;flex:0 0 14rem}.nav{position:sticky;top:3rem;display:flex;flex-direction:column;margin-top:3rem;margin-right:32px;border-right:2px solid var(--border-color-light)}.nav,.nav-list{text-align:right}.nav-list{margin:0 16px 0 0;padding:0;list-style:none}.nav-list-item{margin:0}.nav-link{display:inline-block;padding:6px 16px;line-height:1.25em;color:var(--muted-color);font-weight:var(--bold);border-radius:var(--border-radius-xl)}.nav-link:hover{text-decoration:none;color:var(--color);background-color:var(--hover-bg-color)}a.nav-item:focus{outline:0}@media (min-width:720px){.sidebar{display:block}}section{border-bottom:2px solid var(--border-color-light);padding:2rem 0}section:last-of-type{border-bottom:0}.row:after{content:"";display:table;clear:both}.image-row{text-align:center}@media (min-width:720px){.image-row{text-align:left}}.example-image-link{display:inline-block;padding:4px;margin:0 .5rem 1rem;background-color:var(--bg-color);line-height:0;border-radius:var(--border-radius-xl)}.example-image-link:hover{background-color:var(--link-color)}.example-image{width:7rem;border-radius:var(--border-radius-xl)}.guide-steps li{margin-bottom:2rem}.method{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--border-color-light)}.method:last-of-type{border-bottom:0}.method-argument,.method-name,.method-return{font-family:var(--code-font);font-weight:var(--bold);font-size:.875rem}.method-argument,.method-return{color:var(--primary-color)}@media (min-width:720px){.method-argument,.method-name,.method-return{font-size:.9375rem}}.faq-section h3:not(:first-of-type){margin-top:3em}footer{padding:2rem 0;border-top:2px solid var(--border-color-light);text-align:center}footer .button{margin-top:.5rem}@media (min-width:720px){footer{text-align:left}}.gh{display:inline-flex;align-items:center;color:var(--color);font-weight:var(--bold);background:linear-gradient(#fff,#f3f3f3);border:2px solid var(--border-color-light);border-radius:var(--border-radius-large);letter-spacing:.05em;text-transform:uppercase}.gh:hover{text-decoration:none;background:var(--hover-bg-color)}.gh-count,.gh-label{display:flex;align-items:center;padding:.5rem 1rem}.gh-count{border-left:2px solid var(--border-color-light)}.gh-logo,.gh-star{width:20px;margin-right:.5rem}.image-section{margin-bottom:80px}.image-section .image-wrap{position:relative;line-height:1em;min-height:240px;background-color:var(--hover-bg-color);border-radius:var(--border-radius-xl)}.examples-section .image-section .target-image{border-radius:var(--border-radius-xl);transition:border-radius .2s .3s}.examples-section .image-section.with-color-thief-output .target-image{border-radius:var(--border-radius-xl) var(--border-radius-xl) 0 0}.output-layout{display:flex}.function.get-color{flex:0 1 16rem;margin-right:2rem}.run-functions-button{position:absolute;top:50%;left:50%;width:8rem;height:8rem;margin-top:-4rem;margin-left:-4rem;border:none;border-radius:50%;color:var(--link-color);background-color:#fff;border:4px solid var(--link-color);font-size:2rem;font-weight:var(--bold);cursor:pointer;text-transform:uppercase;outline:none}.run-functions-button:hover{color:#fff;background-color:var(--link-color)}.run-functions-button:active{transform:scale(.9)}.run-functions-button.hide{transition:transform .6s,top .6s cubic-bezier(.22,-.37,.75,.75);top:105%;transform:scale(0)}.touch-label{display:inline}.no-touch-label{display:none}@media (min-width:640px){.touch-label{display:none}.no-touch-label{display:inline}}.target-image{display:block;width:100%;border-radius:var(--border-radius-xl) var(--border-radius-xl) 0 0}.color-thief-output{display:none;padding:1.5rem;background-color:#fff;border-top-width:1px;border:1px solid var(--border-color-light);border-top:0 solid var(--border-color-light);border-radius:0 0 var(--border-radius-xl) var(--border-radius-xl)}.function-title{text-align:left;margin-top:0}.function-code{display:none}.swatch{display:inline-block;background:#ddd;border-radius:50%}.get-color .swatch{width:4rem;height:4rem}.get-palette .swatch{width:3rem;height:3rem}.drag-drop-section{display:none}.drop-zone{height:25rem;margin-bottom:4rem;background-color:#fff;border:4px solid var(--link-color);border-radius:var(--border-radius-xl);font-weight:var(--bold)}.drop-zone.dragging{background-color:var(--link-color)}.drop-zone.dragging .default-label{display:none;color:var(--link-color)}.drop-zone.dragging .dragging-label{color:#fff;display:block}.drop-zone-label{position:relative;top:11rem;color:var(--link-color);font-size:1.8rem;text-align:center;pointer-events:none;text-transform:uppercase;border-radius:var(--border-radius-xl)}.dragging-label,.dropped-image .run-functions-button{display:none}
/*# sourceMappingURL=main.94c3ed36.css.map */