.duotones-tool{color:#4a4a4a;font-family:Montserrat,sans-serif;font-size:16px;line-height:1.5}.duotones-tool.columns{background:linear-gradient(-160deg,#111,#444);border:10px solid #000;margin:0;padding:0}.duotones-tool .column{padding:0}.duotones-tool p,.duotones-tool h1{margin:0;padding:0}.duotones-tool .page-icon,.duotones-tool .colors,.duotones-tool .social-share .download{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}.duotones-tool .controls{min-width:330px;height:90vh;padding:0 0 40px 40px}.duotones-tool .main-image{justify-content:center;align-items:center;max-width:75%;height:calc(100vh - 20px);padding-left:0;display:flex;position:relative}.duotones-tool .main-image .img-wrap{width:calc(100% - 100px);height:calc(100% - 100px);margin:50px;position:relative;top:0;right:0}.duotones-tool .main-image .img-wrap:hover svg,.duotones-tool .main-image .img-wrap:active svg,.duotones-tool .main-image .img-wrap:has(:focus-visible) svg{opacity:.6}.duotones-tool .main-image .img-wrap:hover .img-controls,.duotones-tool .main-image .img-wrap:active .img-controls,.duotones-tool .main-image .img-wrap:has(:focus-visible) .img-controls{opacity:1}.duotones-tool .main-image .img-wrap:hover .img-controls .field,.duotones-tool .main-image .img-wrap:active .img-controls .field,.duotones-tool .main-image .img-wrap:has(:focus-visible) .img-controls .field{margin:0 10px}.duotones-tool .main-image svg{width:100%;height:100%;transition:opacity .3s;overflow:hidden}.duotones-tool .controls-content{width:100%;height:calc(100vh - 321.5px)}.duotones-tool .color-tab{height:100%;overflow:hidden}.duotones-tool .swatches{flex-wrap:wrap;justify-content:space-around;height:calc(100% - 40px);margin-right:-8px;padding-bottom:30px;padding-right:4px;display:flex;overflow:hidden scroll}.duotones-tool .swatch{text-align:center;color:#aaa;width:44%;margin:3%;position:relative}.duotones-tool .swatch .colors{border-radius:50%;width:100%;padding:50% 0;display:block;position:relative;transform:rotate(40deg);box-shadow:1px 1px 15px #0003}.duotones-tool .swatch .color{width:100%;height:50%;position:absolute;left:0}.duotones-tool .swatch .color.one{border-top-left-radius:300px;border-top-right-radius:300px;top:0}.duotones-tool .swatch .color.two{border-bottom-right-radius:300px;border-bottom-left-radius:300px;bottom:0}.duotones-tool .swatch p{padding-top:5px;font-size:14px}.duotones-tool .swatch.custom .color{cursor:pointer;transition:transform .2s}.duotones-tool .swatch.custom .edit{text-align:center;color:#fffc;opacity:.6;margin:0 auto;font-size:1.2em;display:none;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)rotate(-45deg)}.duotones-tool .swatch.custom.is-selected .color:is(:hover,:focus-within){z-index:2;transform:scale(1.1)}.duotones-tool .swatch.custom.is-selected .color:is(:hover,:focus-within) .edit{display:block}.duotones-tool .swatch.custom .color:has(.custom-color:focus-visible){outline-offset:2px;outline:2px solid #fff}.duotones-tool .swatch .custom-color{opacity:0;pointer-events:none;border:0;width:1px;height:1px;padding:0;position:absolute;top:50%;left:50%}.duotones-tool .hex{letter-spacing:-2px;z-index:10;text-transform:uppercase;height:56px;max-height:40px;font-size:56px;font-weight:900;line-height:40px;transition:color .64s;display:block;position:absolute}.duotones-tool .hex.top{text-align:right;top:0;right:-12px;transform:scaleX(.9)translateY(-110%)}.duotones-tool .hex.bottom{filter:brightness(1.2);bottom:0;left:-14px;transform:scaleX(.9)translateY(110%)}.duotones-tool .photos{text-align:center;padding:20px}.duotones-tool .file-label{width:100%}.duotones-tool .file-label:hover .file-cta{color:#fff;background-color:#777}.duotones-tool .file-label .file-cta{color:#ccc;background-color:#555;border:2px solid #777;border-radius:2px;width:100%}.duotones-tool .upload-input{opacity:0;width:1px;height:1px;position:absolute}.duotones-tool:has(.upload-input:focus-visible) :is(.upload-prompt,.file-cta){outline-offset:2px;outline:2px solid #fff}.duotones-tool .upload-prompt{z-index:10;color:#fff;white-space:nowrap;cursor:pointer;background-color:#000000b3;padding:15px 25px;font-size:1.5em;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.duotones-tool .img-controls{opacity:0;text-align:center;width:100%;margin:auto;padding:0;transition:opacity .3s;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.duotones-tool .img-controls .field{margin:0;transition:margin .3s;display:inline-block}.duotones-tool .img-controls .button{color:#fff;cursor:pointer;border:none;border-radius:0;justify-content:flex-start;align-items:center;height:2.25em;padding:calc(.375em - 1px) .75em;font-family:inherit;font-size:1.5em;font-weight:700;line-height:1.5;transition:width .3s;display:inline-flex;overflow:hidden;box-shadow:0 2px 6px #0000001a}.duotones-tool .img-controls .button .icon{width:1.5em;height:1.5em;color:inherit;margin:0 .1875em 0 calc(-.375em - 1px)}.duotones-tool .brand{color:#ffffffe6;text-align:center;padding:40px 0 30px}.duotones-tool .brand h1{color:inherit;font-size:2em;font-weight:900;line-height:1.5;transform:scaleX(.9)}.duotones-tool .brand p{opacity:.6;text-transform:uppercase;font-size:.8em}.duotones-tool .brand .logo{width:65px;margin:0 auto;padding:6% 0;position:relative;transform:rotate(-35deg)}.duotones-tool .brand .logo .circle{opacity:.8;filter:brightness(1.5);border-radius:50%;width:60%;padding:30% 0;transition:background-color .64s;position:absolute;top:0}.duotones-tool .brand .logo .circle.one{z-index:1;opacity:.7;background-color:var(--duotone-dark);left:0}.duotones-tool .brand .logo .circle.two{background-color:var(--duotone-light);right:0}.duotones-tool .tab-content{background:linear-gradient(#3c3c3c,#333);padding:15px;position:relative}.duotones-tool .settings-tab{min-height:50vh;padding:20px}.duotones-tool .settings-tab p{color:#fff9;text-transform:uppercase;margin-top:20px;font-size:.7em;display:inline-block}.duotones-tool .contrast-controls{flex-wrap:wrap;align-items:center;display:flex}.duotones-tool .contrast-controls .button{color:#f5f5f5;height:2.25em;font:inherit;cursor:pointer;background-color:#363636;border:1px solid #0000;border-radius:4px;margin:0 .5rem .5rem 0;padding:calc(.375em - 1px) .75em;line-height:1.5}.duotones-tool .contrast-controls .button:hover{background-color:#2f2f2f}.duotones-tool input[type=range].slider{opacity:.7;appearance:none;cursor:pointer;background:0 0;width:100%;margin:10px 0 20px;padding:0;display:block}.duotones-tool input[type=range].slider::-webkit-slider-runnable-track{background:#0a0a0a;border-radius:4px;height:12px}.duotones-tool input[type=range].slider::-moz-range-track{background:#0a0a0a;border-radius:4px;height:12px}.duotones-tool input[type=range].slider::-webkit-slider-thumb{appearance:none;background:#fff;border:1px solid #b5b5b5;border-radius:50%;width:24px;height:24px;margin-top:-6px}.duotones-tool input[type=range].slider::-moz-range-thumb{box-sizing:border-box;background:#fff;border:1px solid #b5b5b5;border-radius:50%;width:24px;height:24px}.duotones-tool .tab-switch{justify-content:center;display:flex}.duotones-tool .tab-switch .page-icon{background-color:#3a3a3a;width:50%;height:70px;padding:17px;box-shadow:inset 0 -2px 4px #0000001a}.duotones-tool .tab-switch .page-icon.settings{padding:16px 17px}.duotones-tool .tab-switch .page-icon.is-active{background:linear-gradient(#4a4a4a,#3c3c3c);box-shadow:inset 0 2px 4px #0000001a}.duotones-tool .tab-switch .page-icon svg{width:100%;height:100%}.duotones-tool .tab-switch .icon-line{fill:none;stroke:#ffffffb3;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}.duotones-tool .tab-switch .icon-fill{fill:#ffffffb3}.duotones-tool .pretty-scroll ::-webkit-scrollbar{width:5px;height:8px}.duotones-tool .pretty-scroll ::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:5px}.duotones-tool .img-loader,.duotones-tool .img-loader:before,.duotones-tool .img-loader:after{border-radius:50%;width:2.5em;height:2.5em;animation:1.2s ease-in-out infinite duotones-loader}.duotones-tool .loader-drop{z-index:10;background-color:#00000080;width:100%;height:100%;position:absolute;top:0;left:0}.duotones-tool .img-loader{color:#ccc;text-indent:-9999em;z-index:100;margin:0 auto;font-size:10px;animation-delay:-.16s;position:absolute;top:50%;left:0;right:0;transform:translateY(-100%)}.duotones-tool .img-loader:before,.duotones-tool .img-loader:after{content:"";position:absolute;top:0}.duotones-tool .img-loader:before{animation-delay:-.32s;left:-3.5em}.duotones-tool .img-loader:after{left:3.5em}.duotones-tool .social-share{position:absolute;top:-45px;left:0}.duotones-tool .social-share .icon{vertical-align:top;color:#000;justify-content:center;align-items:center;width:45px;height:40px;margin-right:8px;font-size:1.7em;transition:background-color .64s;display:inline-flex}.duotones-tool .social-share .download img{width:24px;height:24px}.duotones-tool .attribution{opacity:.8;position:absolute;bottom:-28px;right:4px}.duotones-tool .attribution:hover{opacity:1}.duotones-tool .attribution span{color:#fff6;font-weight:400}.duotones-tool .attribution a{color:#ffffffe6;font-weight:700;text-decoration:none}@keyframes duotones-loader{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}@media screen and (width<=769px){.duotones-tool.columns{grid-template:"brand"60px"image"minmax(0,1fr)"controls"220px/minmax(0,1fr);height:100svh;display:grid}.duotones-tool .controls{display:contents}.duotones-tool .brand{grid-area:brand;align-self:center;width:200px;margin-left:14px;padding:0;position:relative}.duotones-tool .brand p{display:none}.duotones-tool .brand h1{margin-left:-15px;font-size:1.7em;line-height:1.25;transform:scaleX(.85)}.duotones-tool .brand .logo{width:40px;height:40px;margin:0 0 0 7px;padding:0;position:absolute;top:2px;left:0;transform:rotate(-60deg)}.duotones-tool .main-image{grid-area:image;max-width:none;height:auto}.duotones-tool .main-image .img-wrap{width:calc(100% - 40px);height:calc(100% - 65px);margin:20px 20px 45px}.duotones-tool .controls-content{grid-area:controls;height:auto}.duotones-tool .tab-switch .page-icon{height:60px}.duotones-tool .tab-content{height:160px;min-height:0}.duotones-tool .contrast-controls,.duotones-tool .attribution{display:none}.duotones-tool .hex{font-size:30px}.duotones-tool .hex.top,.duotones-tool .hex.bottom{top:auto;bottom:0;transform:scaleX(.9)translateY(85%)}.duotones-tool .hex.top{left:-7px;right:auto}.duotones-tool .hex.bottom{left:auto;right:-4px}.duotones-tool .swatches{flex-wrap:nowrap;justify-content:flex-start;height:135px;padding-bottom:5px;overflow:scroll hidden}.duotones-tool .swatches .swatch{flex:none;width:70px;margin-bottom:0;margin-right:50px;line-height:1em}.duotones-tool .swatches .swatch .colors{width:50px;height:50px;margin:0 auto;padding:0}.duotones-tool .settings-tab p{margin-top:3px}.duotones-tool .settings-tab input[type=range].slider{margin:8px 0 15px}.duotones-tool .social-share{text-align:right;top:-70px;left:auto;right:-8px}.duotones-tool .upload-prompt{font-size:1.1em}}